fix(styling): address latest dart-sass math division deprecation warning

- latest version of dart-sass started adding deprecation warnings for math utilities (only division for now but more of them in the future)
ghiscoding · May 31, 2021 · b7317d8 · b7317d8
1 parent b1881c5
commit b7317d8
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 21 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/package.json b/examples/webpack-demo-vanilla-bundle/package.json
@@ -46,7 +46,7 @@
     "html-webpack-plugin": "5.3.1",
     "mini-css-extract-plugin": "^1.6.0",
     "rxjs": "^7.0.1",
-    "sass": "~1.32.13",
+    "sass": "^1.34.0",
     "sass-loader": "^11.1.1",
     "style-loader": "^2.0.0",
     "ts-loader": "^9.2.0",
@@ -56,4 +56,4 @@
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2"
   }
-}
+}
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -29,19 +29,19 @@
     "delete:dist": "cross-env rimraf --maxBusyTries=10 dist",
     "package:add-browser-prop": "cross-env node ../change-package-browser.js --add-browser=true --folder-name=common",
     "package:remove-browser-prop": "cross-env node ../change-package-browser.js --remove-browser=true --folder-name=common",
-    "sass-build-task:scss-compile:bootstrap": "sass src/styles/slickgrid-theme-bootstrap.scss dist/styles/css/slickgrid-theme-bootstrap.css --style=compressed",
+    "sass-build-task:scss-compile:bootstrap": "sass src/styles/slickgrid-theme-bootstrap.scss dist/styles/css/slickgrid-theme-bootstrap.css --style=compressed --quiet-deps",
     "postsass-build-task:scss-compile:bootstrap": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-bootstrap.css dist/styles/css/slickgrid-theme-bootstrap.css --style=compressed",
-    "sass-build-task:scss-compile:material": "sass src/styles/slickgrid-theme-material.scss dist/styles/css/slickgrid-theme-material.css --style=compressed",
+    "sass-build-task:scss-compile:material": "sass src/styles/slickgrid-theme-material.scss dist/styles/css/slickgrid-theme-material.css --style=compressed --quiet-deps",
     "postsass-build-task:scss-compile:material": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.css dist/styles/css/slickgrid-theme-material.css --style=compressed",
-    "sass-build-task:scss-compile:material-bare": "sass src/styles/slickgrid-theme-material.bare.scss dist/styles/css/slickgrid-theme-material.bare.css --style=compressed",
+    "sass-build-task:scss-compile:material-bare": "sass src/styles/slickgrid-theme-material.bare.scss dist/styles/css/slickgrid-theme-material.bare.css --style=compressed --quiet-deps",
     "postsass-build-task:scss-compile:material-bare": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.bare.css dist/styles/css/slickgrid-theme-material.bare.css --style=compressed",
-    "sass-build-task:scss-compile:material-lite": "sass src/styles/slickgrid-theme-material.lite.scss dist/styles/css/slickgrid-theme-material.lite.css --style=compressed",
+    "sass-build-task:scss-compile:material-lite": "sass src/styles/slickgrid-theme-material.lite.scss dist/styles/css/slickgrid-theme-material.lite.css --style=compressed --quiet-deps",
     "postsass-build-task:scss-compile:material-lite": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.lite.css dist/styles/css/slickgrid-theme-material.lite.css --style=compressed",
-    "sass-build-task:scss-compile:salesforce": "sass src/styles/slickgrid-theme-salesforce.scss dist/styles/css/slickgrid-theme-salesforce.css --style=compressed",
+    "sass-build-task:scss-compile:salesforce": "sass src/styles/slickgrid-theme-salesforce.scss dist/styles/css/slickgrid-theme-salesforce.css --style=compressed --quiet-deps",
     "postsass-build-task:scss-compile:salesforce": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.css dist/styles/css/slickgrid-theme-salesforce.css --style=compressed",
-    "sass-build-task:scss-compile:salesforce-bare": "sass src/styles/slickgrid-theme-salesforce.bare.scss dist/styles/css/slickgrid-theme-salesforce.bare.css --style=compressed",
+    "sass-build-task:scss-compile:salesforce-bare": "sass src/styles/slickgrid-theme-salesforce.bare.scss dist/styles/css/slickgrid-theme-salesforce.bare.css --style=compressed --quiet-deps",
     "postsass-build-task:scss-compile:salesforce-bare": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.bare.css dist/styles/css/slickgrid-theme-salesforce.bare.css --style=compressed",
-    "sass-build-task:scss-compile:salesforce-lite": "sass src/styles/slickgrid-theme-salesforce.lite.scss dist/styles/css/slickgrid-theme-salesforce.lite.css --style=compressed",
+    "sass-build-task:scss-compile:salesforce-lite": "sass src/styles/slickgrid-theme-salesforce.lite.scss dist/styles/css/slickgrid-theme-salesforce.lite.css --style=compressed --quiet-deps",
     "postsass-build-task:scss-compile:salesforce-lite": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.lite.css dist/styles/css/slickgrid-theme-salesforce.lite.css --style=compressed",
     "sass:build": "run-p sass-build-task:scss-compile:*",
     "presass:copy": "cross-env copyfiles -f src/styles/*.png dist/styles/css",
@@ -86,10 +86,10 @@
     "postcss": "^8.2.15",
     "postcss-cli": "^8.3.1",
     "rimraf": "^3.0.2",
-    "sass": "~1.32.13"
+    "sass": "^1.34.0"
   },
   "engines": {
     "node": ">=14.15.0",
     "npm": ">=6.14.8"
   }
-}
+}
diff --git a/packages/common/src/styles/sass-utilities.scss b/packages/common/src/styles/sass-utilities.scss
@@ -1,3 +1,4 @@
+@use 'sass:math';
 $svg-icon-vertical-align: bottom !default;
 
 @function encodecolor($string) {
@@ -10,9 +11,9 @@ $svg-icon-vertical-align: bottom !default;
 }
 
 @mixin recolor($color: #000, $opacity: 1) {
-  $r: red($color) / 255;
-  $g: green($color) / 255;
-  $b: blue($color) / 255;
+  $r: math.div(red($color), 255);
+  $g: math.div(green($color), 255);
+  $b: math.div(blue($color), 255);
   $a: $opacity;
 
   // grayscale fallback if SVG from data url is not supported

diff --git a/packages/common/src/styles/slick.layout.scss b/packages/common/src/styles/slick.layout.scss
@@ -1,8 +1,9 @@
+@use 'sass:math';
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width : 768px) {
   @for $i from 1 through 12 {
-    $width: ($i / 12) * 100%;
+    $width: math.div($i, 12) * 100%;
     .slick-col-medium-#{$i} {
       flex-basis: $width;
     }
@@ -12,7 +13,7 @@
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width : 992px) {
   @for $i from 1 through 12 {
-    $width: ($i / 12) * 100%;
+    $width: math.div($i, 12) * 100%;
     .slick-col-large-#{$i} {
       flex-basis: $width;
     }
@@ -22,7 +23,7 @@
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
   @for $i from 1 through 12 {
-    $width: ($i / 12) * 100%;
+    $width: math.div($i, 12) * 100%;
     .slick-col-xlarge-#{$i} {
       flex-basis: $width;
     }

diff --git a/yarn.lock b/yarn.lock
@@ -10234,10 +10234,10 @@ sass-loader@^11.1.1:
     klona "^2.0.4"
     neo-async "^2.6.2"
 
-sass@~1.32.13:
-  version "1.32.13"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.13.tgz#8d29c849e625a415bce71609c7cf95e15f74ed00"
-  integrity sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==
+sass@^1.34.0:
+  version "1.34.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.34.0.tgz#e46d5932d8b0ecc4feb846d861f26a578f7f7172"
+  integrity sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"