From d1d53f51ad9c565275c4916cf8e107dd994b7fc3 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 6 Nov 2024 14:10:14 +0100 Subject: [PATCH] fix(multiple): remove usages of Sass globals (#29972) In the latest version of Sass, the compiler logs a warning for usages of global functions. These changes switch our code to import the functions instead. (cherry picked from commit 3a3be4c851cf1c0cdae42bae3a57c00f4d90991f) --- package.json | 2 +- src/material/core/m2/_theming.scss | 3 ++- src/material/core/theming/_theming.scss | 3 ++- src/material/core/tokens/_m3-tokens.scss | 6 +++--- src/material/core/tokens/m2/mat/_badge.scss | 2 +- src/material/core/tokens/m2/mat/_datepicker.scss | 2 +- src/material/core/tokens/m2/mat/_sort.scss | 2 +- yarn.lock | 12 +++++++----- 8 files changed, 18 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 84c5cdbe65f5..d9c28c41147d 100644 --- a/package.json +++ b/package.json @@ -160,7 +160,7 @@ "requirejs": "^2.3.6", "rollup": "^2.66.1", "rollup-plugin-sourcemaps": "^0.6.3", - "sass": "^1.77.8", + "sass": "^1.80.6", "selenium-webdriver": "^3.6.0", "semver": "^7.3.5", "send": "^0.17.2", diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss index 10f5bf50876e..9bdf01f26828 100644 --- a/src/material/core/m2/_theming.scss +++ b/src/material/core/m2/_theming.scss @@ -1,6 +1,7 @@ @use 'sass:list'; @use 'sass:map'; @use 'sass:meta'; +@use 'sass:color'; @use '../theming/theming'; @use './palette'; @@ -82,7 +83,7 @@ @return $color; } - @return rgba($color, if($opacity == null, opacity($color), $opacity)); + @return rgba($color, if($opacity == null, color.opacity($color), $opacity)); } // Validates the specified theme by ensuring that the optional color config defines diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss index 89d391b3334e..eb6d3cb56148 100644 --- a/src/material/core/theming/_theming.scss +++ b/src/material/core/theming/_theming.scss @@ -2,6 +2,7 @@ @use 'sass:map'; @use 'sass:math'; @use 'sass:meta'; +@use 'sass:color'; // Whether to enable compatibility with legacy methods for accessing theme information. $theme-legacy-inspection-api-compatibility: true !default; @@ -332,7 +333,7 @@ $private-internal-name: _mat-theming-internals-do-not-access; // We convert the rgba color into a solid one by taking the opacity from the rgba // value and using it to determine the percentage of the background to put // into foreground when mixing the colors together. - @return mix($background-color, rgba($color, 1), (1 - opacity($color)) * 100%); + @return color.mix($background-color, rgba($color, 1), (1 - color.opacity($color)) * 100%); } // Clamps the density scale to a number between the given min and max. diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss index a016fef15c16..0cde0b8f5763 100644 --- a/src/material/core/tokens/_m3-tokens.scss +++ b/src/material/core/tokens/_m3-tokens.scss @@ -130,7 +130,7 @@ $_cached-token-slots: null; @function create-map($keys, $prefix) { $result: (); @each $key in $keys { - $result: map-merge($result, ($key: var(--#{$prefix}-#{$key}))); + $result: map.merge($result, ($key: var(--#{$prefix}-#{$key}))); } @return $result; } @@ -191,8 +191,8 @@ $_cached-token-slots: null; 'tertiary-fixed', 'tertiary-fixed-dim' ); - @return map-merge(create-map($keys, $prefix), ( - shadow: map.get($mdc-sys-color, shadow) + @return map.merge(create-map($keys, $prefix), ( + shadow: map.get($mdc-sys-color, shadow) )); } diff --git a/src/material/core/tokens/m2/mat/_badge.scss b/src/material/core/tokens/m2/mat/_badge.scss index 8e93f5750345..8ad24b1701d7 100644 --- a/src/material/core/tokens/m2/mat/_badge.scss +++ b/src/material/core/tokens/m2/mat/_badge.scss @@ -56,7 +56,7 @@ $prefix: (mat, badge); // the value to determine the percentage of the background to put into foreground when // mixing the colors together. @if (meta.type-of($disabled-background) == color and meta.type-of($app-background) == color) { - $badge-opacity: opacity($disabled-background); + $badge-opacity: color.opacity($disabled-background); $disabled-background: color.mix($app-background, rgba($disabled-background, 1), (1 - $badge-opacity) * 100%); } diff --git a/src/material/core/tokens/m2/mat/_datepicker.scss b/src/material/core/tokens/m2/mat/_datepicker.scss index 18231a105e99..c586fb125fbe 100644 --- a/src/material/core/tokens/m2/mat/_datepicker.scss +++ b/src/material/core/tokens/m2/mat/_datepicker.scss @@ -60,7 +60,7 @@ $private-default-overlap-color: #a8dab5; // for a solid border, but because we're using a dashed border for the // preview range, we need to bump its opacity to ensure that it's visible. @if meta.type-of($preview-outline-color) == color { - $preview-outline-opacity: math.min(opacity($preview-outline-color) * 2, 1); + $preview-outline-opacity: math.min(color.opacity($preview-outline-color) * 2, 1); $preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity); } diff --git a/src/material/core/tokens/m2/mat/_sort.scss b/src/material/core/tokens/m2/mat/_sort.scss index f819669b3e58..2c2e6f98ca4b 100644 --- a/src/material/core/tokens/m2/mat/_sort.scss +++ b/src/material/core/tokens/m2/mat/_sort.scss @@ -26,7 +26,7 @@ $prefix: (mat, sort); // when mixing the colors together. Otherwise, if it resolves to something different // (e.g. it resolves to a CSS variable), we use the color directly. @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) { - $text-opacity: opacity($text-color); + $text-opacity: color.opacity($text-color); $arrow-color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%); } @else { diff --git a/yarn.lock b/yarn.lock index e233646c0ce5..288dbd5e840a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14471,14 +14471,16 @@ sass@1.80.5: immutable "^4.0.0" source-map-js ">=0.6.2 <2.0.0" -sass@^1.77.8: - version "1.77.8" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd" - integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ== +sass@^1.80.6: + version "1.80.6" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.80.6.tgz#5d0aa55763984effe41e40019c9571ab73e6851f" + integrity sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg== dependencies: - chokidar ">=3.0.0 <4.0.0" + chokidar "^4.0.0" immutable "^4.0.0" source-map-js ">=0.6.2 <2.0.0" + optionalDependencies: + "@parcel/watcher" "^2.4.1" saucelabs@^1.5.0: version "1.5.0"