node-sass -> dart-sass migration

package.json

@@ -36,7 +36,7 @@
     "html-webpack-plugin": "^5.3.1",
     "imagemin-webpack-plugin": "^2.4.2",
     "mini-css-extract-plugin": "^1.6.0",
-    "node-sass": "^4.14.1",
+    "sass": "^1.39.0",
     "postcss": "^8.3.4",
     "postcss-loader": "^6.1.0",
     "postcss-preset-env": "^6.7.0",

src/assets/styles/spec/settings/materialColors.scss

@@ -547,4 +547,4 @@ $md-colors: (
   blue-grey-700         : #455a64,
   blue-grey-800         : #37474f,
   blue-grey-900         : #263238,
-) !global;
+);

src/assets/styles/spec/utils/colors.scss

@@ -10,11 +10,11 @@
 // ---------------------------------------------------------
 
 @each $item, $color in $md-colors {
-  .c-#{$item},     .cH-#{$item}:hover      { color: $color !important; }
-  .bgc-#{$item},   .bgcH-#{$item}:hover    { background-color: $color !important; }
-  .bdc-#{$item},   .bdcH-#{$item}:hover    { border-color: $color !important; }
-  .fill-#{$item},  .fillH-#{$item}:hover   { fill: $color !important; }
-  .str-#{$item},   .strH-#{$item}:hover    { stroke: $color !important; }
+  .c-#{"" + $item},     .cH-#{"" + $item}:hover      { color: $color !important; }
+  .bgc-#{"" + $item},   .bgcH-#{"" + $item}:hover    { background-color: $color !important; }
+  .bdc-#{"" + $item},   .bdcH-#{"" + $item}:hover    { border-color: $color !important; }
+  .fill-#{"" + $item},  .fillH-#{"" + $item}:hover   { fill: $color !important; }
+  .str-#{"" + $item},   .strH-#{"" + $item}:hover    { stroke: $color !important; }
 }
 
 // ---------------------------------------------------------
@@ -22,9 +22,9 @@
 // ---------------------------------------------------------
 
 @each $item, $color in $grey-colors-alt {
-  .c-#{$item},     .cH-#{$item}:hover      { color: $color !important; }
-  .bgc-#{$item},   .bgcH-#{$item}:hover    { background-color: $color !important; }
-  .bdc-#{$item},   .bdcH-#{$item}:hover    { border-color: $color !important; }
-  .fill-#{$item},  .fillH-#{$item}:hover   { fill: $color !important; }
-  .str-#{$item},   .strH-#{$item}:hover    { stroke: $color !important; }
+  .c-#{"" + $item},     .cH-#{"" + $item}:hover      { color: $color !important; }
+  .bgc-#{"" + $item},   .bgcH-#{"" + $item}:hover    { background-color: $color !important; }
+  .bdc-#{"" + $item},   .bdcH-#{"" + $item}:hover    { border-color: $color !important; }
+  .fill-#{"" + $item},  .fillH-#{"" + $item}:hover   { fill: $color !important; }
+  .str-#{"" + $item},   .strH-#{"" + $item}:hover    { stroke: $color !important; }
 }

src/assets/styles/spec/utils/layout/utils/gap.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------
@@ -29,60 +31,60 @@ $responsive: true;
 
 @for $i from 0 through 4 {
   .gapX-#{$i} {
-    margin-left: #{($i / -2)}px !important;
-    margin-right: #{($i / -2)}px !important;
+    margin-left: #{math.div($i, -2)}px !important;
+    margin-right: #{math.div($i, -2)}px !important;
 
     & > * {
-      padding-left: #{($i / 2)}px !important;
-      padding-right: #{($i / 2)}px !important;
+      padding-left: #{math.div($i, 2)}px !important;
+      padding-right: #{math.div($i, 2)}px !important;
     }
   }
 
   .gapY-#{$i} {
-    margin-top: #{($i / -2)}px !important;
-    margin-bottom: #{($i / -2)}px !important;
+    margin-top: #{math.div($i, -2)}px !important;
+    margin-bottom: #{math.div($i, -2)}px !important;
 
     & > * {
-      padding-top: #{($i / 2)}px !important;
-      padding-bottom: #{($i / 2)}px !important;
+      padding-top: #{math.div($i, 2)}px !important;
+      padding-bottom: #{math.div($i, 2)}px !important;
     }
   }
 
   .gap-#{$i} {
-    margin: #{($i / -2)}px !important;
+    margin: #{math.div($i, -2)}px !important;
 
     & > * {
-      padding: #{($i / 2)}px !important;
+      padding: #{math.div($i, 2)}px !important;
     }
   }
 
   @if ($responsive == true) {
     @include generateResponsive() {
       .gapX-#{$i}\@#{$breakpointAlias} {
-        margin-left: #{($i / -2)}px !important;
-        margin-right: #{($i / -2)}px !important;
+        margin-left: #{math.div($i, -2)}px !important;
+        margin-right: #{math.div($i, -2)}px !important;
 
         & > * {
-          padding-left: #{($i / 2)}px !important;
-          padding-right: #{($i / 2)}px !important;
+          padding-left: #{math.div($i, 2)}px !important;
+          padding-right: #{math.div($i, 2)}px !important;
         }
       }
 
       .gapY-#{$i}\@#{$breakpointAlias} {
-        margin-top: #{($i / -2)}px !important;
-        margin-bottom: #{($i / -2)}px !important;
+        margin-top: #{math.div($i, -2)}px !important;
+        margin-bottom: #{math.div($i, -2)}px !important;
 
         & > * {
-          padding-top: #{($i / 2)}px !important;
-          padding-bottom: #{($i / 2)}px !important;
+          padding-top: #{math.div($i, 2)}px !important;
+          padding-bottom: #{math.div($i, 2)}px !important;
         }
       }
 
       .gap-#{$i}\@#{$breakpointAlias} {
-        margin: #{($i / -2)}px !important;
+        margin: #{math.div($i, -2)}px !important;
 
         & > * {
-          padding: #{($i / 2)}px !important;
+          padding: #{math.div($i, 2)}px !important;
         }
       }
     }
@@ -96,60 +98,60 @@ $responsive: true;
 @for $i from 5 through 35 {
   @if $i % 5 == 0 {
     .gapX-#{$i} {
-      margin-left: #{($i / -2)}px !important;
-      margin-right: #{($i / -2)}px !important;
+      margin-left: #{math.div($i, -2)}px !important;
+      margin-right: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-left: #{($i / 2)}px !important;
-        padding-right: #{($i / 2)}px !important;
+        padding-left: #{math.div($i, 2)}px !important;
+        padding-right: #{math.div($i, 2)}px !important;
       }
     }
 
     .gapY-#{$i} {
-      margin-top: #{($i / -2)}px !important;
-      margin-bottom: #{($i / -2)}px !important;
+      margin-top: #{math.div($i, -2)}px !important;
+      margin-bottom: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-top: #{($i / 2)}px !important;
-        padding-bottom: #{($i / 2)}px !important;
+        padding-top: #{math.div($i, 2)}px !important;
+        padding-bottom: #{math.div($i, 2)}px !important;
       }
     }
 
     .gap-#{$i} {
-      margin: #{($i / -2)}px !important;
+      margin: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding: #{($i / 2)}px !important;
+        padding: #{math.div($i, 2)}px !important;
       }
     }
 
     @if ($responsive == true) {
       @include generateResponsive() {
         .gapX-#{$i}\@#{$breakpointAlias} {
-          margin-left: #{($i / -2)}px !important;
-          margin-right: #{($i / -2)}px !important;
+          margin-left: #{math.div($i, -2)}px !important;
+          margin-right: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-left: #{($i / 2)}px !important;
-            padding-right: #{($i / 2)}px !important;
+            padding-left: #{math.div($i, 2)}px !important;
+            padding-right: #{math.div($i, 2)}px !important;
           }
         }
 
         .gapY-#{$i}\@#{$breakpointAlias} {
-          margin-top: #{($i / -2)}px !important;
-          margin-bottom: #{($i / -2)}px !important;
+          margin-top: #{math.div($i, -2)}px !important;
+          margin-bottom: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-top: #{($i / 2)}px !important;
-            padding-bottom: #{($i / 2)}px !important;
+            padding-top: #{math.div($i, 2)}px !important;
+            padding-bottom: #{math.div($i, 2)}px !important;
           }
         }
 
         .gap-#{$i}\@#{$breakpointAlias} {
-          margin: #{($i / -2)}px !important;
+          margin: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding: #{($i / 2)}px !important;
+            padding: #{math.div($i, 2)}px !important;
           }
         }
       }
@@ -164,60 +166,60 @@ $responsive: true;
 @for $i from 40 through 160 {
   @if $i % 10 == 0 {
     .gapX-#{$i} {
-      margin-left: #{($i / -2)}px !important;
-      margin-right: #{($i / -2)}px !important;
+      margin-left: #{math.div($i, -2)}px !important;
+      margin-right: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-left: #{($i / 2)}px !important;
-        padding-right: #{($i / 2)}px !important;
+        padding-left: #{math.div($i, 2)}px !important;
+        padding-right: #{math.div($i, 2)}px !important;
       }
     }
 
     .gapY-#{$i} {
-      margin-top: #{($i / -2)}px !important;
-      margin-bottom: #{($i / -2)}px !important;
+      margin-top: #{math.div($i, -2)}px !important;
+      margin-bottom: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-top: #{($i / 2)}px !important;
-        padding-bottom: #{($i / 2)}px !important;
+        padding-top: #{math.div($i, 2)}px !important;
+        padding-bottom: #{math.div($i, 2)}px !important;
       }
     }
 
     .gap-#{$i} {
-      margin: #{($i / -2)}px !important;
+      margin: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding: #{($i / 2)}px !important;
+        padding: #{math.div($i, 2)}px !important;
       }
     }
 
     @if ($responsive == true) {
       @include generateResponsive() {
         .gapX-#{$i}\@#{$breakpointAlias} {
-          margin-left: #{($i / -2)}px !important;
-          margin-right: #{($i / -2)}px !important;
+          margin-left: #{math.div($i, -2)}px !important;
+          margin-right: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-left: #{($i / 2)}px !important;
-            padding-right: #{($i / 2)}px !important;
+            padding-left: #{math.div($i, 2)}px !important;
+            padding-right: #{math.div($i, 2)}px !important;
           }
         }
 
         .gapY-#{$i}\@#{$breakpointAlias} {
-          margin-top: #{($i / -2)}px !important;
-          margin-bottom: #{($i / -2)}px !important;
+          margin-top: #{math.div($i, -2)}px !important;
+          margin-bottom: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-top: #{($i / 2)}px !important;
-            padding-bottom: #{($i / 2)}px !important;
+            padding-top: #{math.div($i, 2)}px !important;
+            padding-bottom: #{math.div($i, 2)}px !important;
           }
         }
 
         .gap-#{$i}\@#{$breakpointAlias} {
-          margin: #{($i / -2)}px !important;
+          margin: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding: #{($i / 2)}px !important;
+            padding: #{math.div($i, 2)}px !important;
           }
         }
       }