Merge #447

447: Migrate to dart-sass, update divisions r=bidoubiwa a=ColinFrick

Migrate from node-sass to (dart-) sass. Replace divisions with multiplications or `math.div`

Closes #344

Co-authored-by: colin.frick <[email protected]>
Co-authored-by: Colin Frick <[email protected]>

Author: bors[bot]

package.json

@@ -54,7 +54,7 @@
     "eslint-plugin-prettier": "^3.3.0",
     "jest": "^26.6.3",
     "jsdom": "^17.0.0",
-    "node-sass": "^6.0.1",
+    "sass": "^1.43.2",
     "postcss-cli": "^7.1.2",
     "prettier": "^2.0.5",
     "pretty-bytes-cli": "^2.0.0",

scripts/build-css

@@ -14,7 +14,7 @@ mkdir -p "$DIST_DIR"
 
 # ./dist/cdn/docs-searchbar.css
 echo "$LICENSE" > "$DIST_FILE";
-node-sass --output-style expanded ./src/styles/main.scss \
+sass --style expanded ./src/styles/main.scss \
   | postcss --use autoprefixer -o "$DIST_FILE"
 
 # copy styles

src/styles/_dropdown.scss

@@ -1,4 +1,6 @@
 // Detect lightness
+@use "sass:math";
+
 @function detectLightness($color) {
   @if (lightness($color) > 60) {
     @return mix($color, #000, 90%);
@@ -177,7 +179,7 @@
       .dsb-suggestions {
         position: relative;
         z-index: 1000;
-        margin-top: $padding/2;
+        margin-top: $padding*0.5;
         & a:hover {
           text-decoration: none;
         }
@@ -205,7 +207,7 @@
         background: $background-color;
         border-radius: $border-radius + px;
         overflow: auto;
-        padding: 0 $padding/2 $padding/2;
+        padding: 0 $padding*0.5 $padding*0.5;
       }
 
       // Inner-grid setup
@@ -218,7 +220,7 @@
     .docs-searchbar-suggestion {
       display: block;
       position: relative;
-      padding: 0 $padding/2;
+      padding: 0 $padding*0.5;
       background: $background-color;
       color: $title-color;
       overflow: hidden;
@@ -262,7 +264,7 @@
         display: block;
         width: 70%;
         position: relative;
-        padding: $padding/3 0 $padding/3 $padding/1.5;
+        padding: math.div($padding, 3) 0 math.div($padding, 3) math.div($padding, 1.5);
         cursor: pointer;
 
         &:before {
@@ -281,8 +283,8 @@
         position: relative;
         border-bottom: 1px solid #ddd;
         display: none;
-        margin-top: $padding/2;
-        padding: $padding/4 0;
+        margin-top: $padding*0.5;
+        padding: $padding*0.25 0;
         font-size: $header-size;
         color: $header-color;
         @if $dark-mode {
@@ -294,15 +296,15 @@
         width: 100%;
         display: flex;
         align-items: flex-start;
-        padding: $padding/2 0 0 0;
+        padding: $padding*0.5 0 0 0;
       }
 
       &--subcategory-column {
         width: 30%;
         padding-left: 0;
         text-align: right;
         position: relative;
-        padding: $padding/3 $padding/1.5;
+        padding: math.div($padding, 3) math.div($padding, 1.5);
         color: $subtitle-color;
         font-size: $subtitle-size;
         word-wrap: break-word;
@@ -324,7 +326,7 @@
       }
 
       &--title {
-        margin-bottom: $padding/4;
+        margin-bottom: $padding*0.25;
         color: $title-color;
         font-size: $title-size;
         font-weight: bold;
@@ -339,7 +341,7 @@
 
       &--no-results {
         width: 100%;
-        padding: $padding/2 0;
+        padding: $padding*0.5 0;
         text-align: center;
         font-size: 1.2em;
 
@@ -415,7 +417,7 @@
     .suggestion-layout-simple {
       &.docs-searchbar-suggestion {
         border-bottom: solid 1px #eee;
-        padding: $padding/2;
+        padding: $padding*0.5;
         margin: 0;
         @if $dark-mode {
           border-bottom: solid 1px lighten($border-color, 10%);
@@ -495,10 +497,10 @@
         }
 
         &--text {
-          margin: $padding/4 0 0;
+          margin: $padding*0.25 0 0;
           display: desc($include-desc);
           line-height: 1.4em;
-          padding: $padding/3 $padding/2;
+          padding: math.div($padding, 3) $padding*0.5;
           background: $suggestion-background-color;
           font-size: $text-size;
           opacity: 0.8;
@@ -520,7 +522,7 @@
       width: 180px;
       height: 20px;
       z-index: 2000;
-      margin-top: $padding/1.5;
+      margin-top: math.div($padding, 1.5);
       color: $text-color;
       margin-left: auto;
     }

src/styles/_searchbox.scss

@@ -1,16 +1,18 @@
+@use "sass:math";
+
 @function even-px($value) {
   @if type-of($value) == 'number' {
     @if (unitless($value)) {
       $value: $value * 1px;
     } @else if unit($value) == 'em' {
-      $value: ($value / 1em * 16px);
+      $value: (math.div($value, 1em) * 16px);
     } @else if unit($value) == 'pts' {
       $value: $value * 1.3333 * 1px;
     } @else if unit($value) == '%' {
-      $value: $value * 16 / 100% * 1px;
+      $value: math.div($value * 16, 100%) * 1px;
     }
     $value: round($value);
-    @if ($value % 2 != 0) {
+    @if ($value % 2 != 0px) {
       $value: $value + 1;
     }
     @return $value;
@@ -23,20 +25,20 @@
   $input-height: $font-size * 2.4,
   $border-width: 1px,
   $text-color: #555,
-  $border-radius: $input-height / 2,
+  $border-radius: $input-height * 0.5,
   $input-border-color: #ccc,
   $input-focus-border-color: #1ec9ea,
   $input-background: #f8f8f8,
   $input-focus-background: #fff,
   $placeholder-color: #aaa,
   $icon: 'sbx-icon-search-1',
-  $icon-size: $input-height / 1.6,
+  $icon-size: math.div($input-height, 1.6),
   $icon-position: left,
   $icon-color: #888,
   $icon-background: $input-focus-border-color,
   $icon-background-opacity: 0.1,
   $icon-clear: 'sbx-icon-clear-1',
-  $icon-clear-size: $font-size / 1.1,
+  $icon-clear-size: math.div($font-size, 1.1),
   $dark-mode: false
 ) {
   .searchbox {
@@ -78,7 +80,7 @@
         ) + if($icon-background-opacity == 0, 0, even-px($font-size));
       padding-left: if(
         $icon-position == 'right',
-        even-px($font-size / 2) + even-px($border-radius / 2),
+        even-px($font-size * 0.5) + even-px($border-radius * 0.5),
         even-px($input-height) +
           if($icon-background-opacity == 0, 0, even-px($font-size * 1.2))
       );
@@ -133,7 +135,7 @@
       background-color: rgba($icon-background, $icon-background-opacity);
       padding: 0;
       width: even-px($input-height) +
-        if($icon-background-opacity == 0, 0, even-px($font-size / 2));
+        if($icon-background-opacity == 0, 0, even-px($font-size * 0.5));
       height: 100%;
       vertical-align: middle;
       text-align: center;
@@ -176,12 +178,12 @@
     &__reset {
       display: block;
       position: absolute;
-      top: (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px;
+      top: (even-px($input-height) - even-px($icon-clear-size)) * 0.5 - 4px;
       right: if(
         $icon-position == 'right',
         even-px($input-height) +
           if($icon-background-opacity == 0, 0, even-px($font-size)),
-        (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px
+        (even-px($input-height) - even-px($icon-clear-size)) * 0.5 - 4px
       );
       margin: 0;
       border: 0;