From b7317d8fa619b35fb65789e12b268d65ff65968c Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 31 May 2021 08:58:32 -0400 Subject: [PATCH] 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) --- .../webpack-demo-vanilla-bundle/package.json | 4 ++-- packages/common/package.json | 18 +++++++++--------- packages/common/src/styles/sass-utilities.scss | 7 ++++--- packages/common/src/styles/slick.layout.scss | 7 ++++--- yarn.lock | 8 ++++---- 5 files changed, 23 insertions(+), 21 deletions(-) diff --git a/examples/webpack-demo-vanilla-bundle/package.json b/examples/webpack-demo-vanilla-bundle/package.json index feb5853f9..dbe1c0896 100644 --- 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" } -} +} \ No newline at end of file diff --git a/packages/common/package.json b/packages/common/package.json index 079b8eafd..4c38e3211 100644 --- 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" } -} +} \ No newline at end of file diff --git a/packages/common/src/styles/sass-utilities.scss b/packages/common/src/styles/sass-utilities.scss index 74d09d857..ac1ae3cea 100644 --- 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 index 2a4e8fc16..742b2a714 100644 --- 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 index d3be667e8..7ac5dff4b 100644 --- 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"