fix(multiple): resolve sass if function deprecation warnings

.stylelintrc.json

@@ -71,6 +71,7 @@
     "function-url-quotes": "always",
     "function-url-scheme-disallowed-list": ["data"],
     "function-whitespace-after": "always",
+    "function-disallowed-list": ["if"],
 
     "number-leading-zero": "always",
     "number-no-trailing-zeros": true,

package.json

@@ -132,7 +132,7 @@
     "rollup": "^4.52.3",
     "rollup-plugin-dts": "6.3.0",
     "rollup-plugin-sourcemaps2": "0.5.4",
-    "sass": "^1.80.6",
+    "sass": "^1.97.2",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.5",
     "shelljs": "^0.10.0",

src/cdk/a11y/_index.scss

@@ -54,7 +54,13 @@
            'Allowed values are "active" and "none"';
   }
 
-  @media (forced-colors: #{if($target == none, none, active)}) {
+  $query-value: active;
+
+  @if ($target == none) {
+    $query-value: none;
+  }
+
+  @media (forced-colors: #{$query-value}) {
     @content;
   }
 }

src/cdk/scrolling/virtual-scroll-viewport.scss

@@ -3,8 +3,16 @@
 // well. We reset some properties here to prevent these container elements from introducing
 // additional space that would throw off the scrolling calculations.
 @mixin _clear-container-space($direction) {
-  $start: if($direction == horizontal, 'left', 'top');
-  $end: if($direction == horizontal, 'right', 'bottom');
+  $start: '';
+  $end: '';
+
+  @if ($direction == horizontal) {
+    $start: 'left';
+    $end: 'right';
+  } @else {
+    $start: 'top';
+    $end: 'bottom';
+  }
 
   & > dl:not([cdkVirtualFor]),
   & > ol:not([cdkVirtualFor]),

src/material/badge/badge.scss

@@ -10,7 +10,12 @@ $large-size: $default-size + 6;
 $fallbacks: m3-badge.get-tokens();
 
 @mixin _badge-size($size) {
-  $prefix: if($size == 'medium', '', $size + '-size-');
+  $prefix: '';
+
+  @if ($size != 'medium') {
+    $prefix: $size + '-size-';
+  }
+
   $legacy-size-var-name: 'badge-legacy-#{$prefix}container-size';
   $size-var-name: 'badge-#{$prefix}container-size';
 

src/material/button/_m2-button.scss

@@ -16,8 +16,12 @@
     -2: 28px,
     -3: 24px,
   ), $scale);
-  $touch-target-display: if($scale < -1, none, block);
   $touch-target-size: 48px;
+  $touch-target-display: block;
+
+  @if ($scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (

src/material/button/_m2-fab.scss

@@ -17,6 +17,11 @@
   $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
   $touch-target-size: 48px;
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -70,8 +75,8 @@
       fab-extended-label-text-weight: map.get($system, label-small-weight)
     ),
     density: (
-      fab-small-touch-target-display: if($density-scale < -1, none, block),
-      fab-touch-target-display: if($density-scale < -1, none, block),
+      fab-small-touch-target-display: $touch-target-display,
+      fab-touch-target-display: $touch-target-display,
     ),
   );
 }

src/material/button/_m2-icon-button.scss

@@ -6,6 +6,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -27,7 +32,7 @@
     ),
     typography: (),
     density: (
-      icon-button-touch-target-display: if($density-scale < -1, none, block),
+      icon-button-touch-target-display: $touch-target-display,
       icon-button-state-layer-size: map.get((
         0: 48px,
         -1: 44px,

src/material/checkbox/_m2-checkbox.scss

@@ -6,6 +6,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -28,7 +33,7 @@
       checkbox-label-text-weight: map.get($system, body-medium-weight)
     ),
     density: (
-      checkbox-touch-target-display: if($density-scale < -1, none, block),
+      checkbox-touch-target-display: $touch-target-display,
       checkbox-state-layer-size: map.get((
         0: 40px,
         -1: 36px,

src/material/core/m2/_theming.scss

@@ -84,7 +84,13 @@
 
   // We cast the $hue to a string, because some hues starting with a number, like `700-contrast`,
   // might be inferred as numbers by Sass. Casting them to string fixes the map lookup.
-  $color: if(map.has-key($palette, $hue), map.get($palette, $hue), map.get($palette, $hue + ''));
+  $color: null;
+
+  @if (map.has-key($palette, $hue)) {
+    $color: map.get($palette, $hue);
+  } @else {
+    $color: map.get($palette, $hue + '');
+  }
 
   @if ($opacity == null) {
     @return $color;
@@ -121,12 +127,15 @@
     warn: $warn,
   );
 
-  $sys-color: if(
-      $is-dark,
-      m2.md-sys-color-values-dark($palettes),
-      m2.md-sys-color-values-light($palettes));
   $sys-state: m2.md-sys-state-values();
   $sys-typography: m2.md-sys-typescale-values($typography);
+  $sys-color: null;
+
+  @if ($is-dark) {
+    $sys-color: m2.md-sys-color-values-dark($palettes);
+  } @else {
+    $sys-color: m2.md-sys-color-values-light($palettes);
+  }
 
   $system: (density-scale: $density-scale);
   @each $map in ($sys-color, $sys-state, $sys-typography) {
@@ -139,16 +148,22 @@
 // Creates a color configuration from the specified
 // primary, accent and warn palettes.
 @function _mat-create-color-config($primary, $accent, $warn: null, $is-dark) {
-  $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
-  $foreground:
-      if($is-dark, palette.$dark-theme-foreground-palette, palette.$light-theme-foreground-palette);
-  $background:
-      if($is-dark, palette.$dark-theme-background-palette, palette.$light-theme-background-palette);
+  $foreground: null;
+  $background: null;
+  $warn-palette: $warn or define-palette(palette.$red-palette);
+
+  @if ($is-dark) {
+    $foreground: palette.$dark-theme-foreground-palette;
+    $background: palette.$dark-theme-background-palette;
+  } @else {
+    $foreground: palette.$light-theme-foreground-palette;
+    $background: palette.$light-theme-background-palette;
+  }
 
   @return (
     primary: $primary,
     accent: $accent,
-    warn: $warn,
+    warn: $warn-palette,
     is-dark: $is-dark,
     foreground: $foreground,
     background: $background,

src/material/core/m2/_typography-utils.scss

@@ -73,5 +73,9 @@
   }
 
   // Guard against unquoting non-string values, because it's deprecated.
-  @return if(meta.type-of($font-family) == string, string.unquote($font-family), $font-family);
+  @if (meta.type-of($font-family) == string) {
+    $font-family: string.unquote($font-family);
+  }
+
+  @return $font-family;
 }

src/material/core/style/_elevation.scss

@@ -159,8 +159,12 @@ $prefix: 'mat-elevation-z';
   $umbra-z-value: map.get($_umbra-map, $zValue);
   $penumbra-z-value: map.get($_penumbra-map, $zValue);
   $ambient-z-value: map.get($_ambient-map, $zValue);
+  $color-opacity: 1;
+
+  @if ($opacity != null) {
+    $color-opacity: $opacity;
+  }
 
-  $color-opacity: if($opacity != null, $opacity, 1);
   $umbra-color: _compute-color-opacity($shadow-color, $_umbra-opacity * $color-opacity);
   $penumbra-color: _compute-color-opacity($shadow-color, $_penumbra-opacity * $color-opacity);
   $ambient-color: _compute-color-opacity($shadow-color, $_ambient-opacity * $color-opacity);

src/material/core/style/_validation.scss

@@ -11,7 +11,10 @@
   @if ($result == list and list.index($types, map) and list.length($obj) == 0) {
     @return null;
   }
-  @return if(list.index($types, $result), null, $result);
+  @if (list.index($types, $result)) {
+    @return null;
+  }
+  @return $result;
 }
 
 /// Validates that a list contains only values from the allowed list of values.
@@ -25,7 +28,10 @@
       $invalid: list.append($invalid, $element);
     }
   }
-  @return if(list.length($invalid) > 0, $invalid, null);
+  @if (list.length($invalid) > 0) {
+    @return $invalid;
+  }
+  @return null;
 }
 
 /// Validates that a list contains all values from the required list of values.
@@ -39,5 +45,8 @@
       $invalid: list.append($invalid, $element);
     }
   }
-  @return if(list.length($invalid) > 0, $invalid, null);
+  @if (list.length($invalid) > 0) {
+    @return $invalid;
+  }
+  @return null;
 }

src/material/core/theming/_color-api-backwards-compatibility.scss

@@ -24,7 +24,11 @@
 $_overrides-only: true;
 
 @mixin _color-variant-styles($theme, $color-variant) {
-  $secondary-when-primary: if($color-variant == primary, secondary, $color-variant);
+  $secondary-when-primary: $color-variant;
+
+  @if ($color-variant == primary) {
+    $secondary-when-primary: secondary;
+  }
 
   & {
     @if ($color-variant != primary) {

src/material/core/theming/_inspection.scss

@@ -31,7 +31,10 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 @function _validate-theme-object($theme) {
   $err: validation.validate-type($theme, 'map') or
         map.get($theme, $internals, theme-version) == null;
-  @return if($err, true, null);
+  @if ($err) {
+    @return true;
+  }
+  @return null;
 }
 
 /// Gets the version number of a theme object. A theme that is not a valid versioned theme object is
@@ -40,7 +43,12 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @return {Number} The version number of the theme (0 if unknown).
 @function get-theme-version($theme) {
   $err: _validate-theme-object($theme);
-  @return if($err, 0, map.get($theme, $internals, theme-version) or 0);
+
+  @if ($err) {
+    @return 0;
+  }
+
+  @return map.get($theme, $internals, theme-version) or 0;
 }
 
 /// Gets the type of theme represented by a theme object (light or dark).
@@ -99,10 +107,10 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @if $args-count < 2 or $args-count > 3 {
       @error 'Expected either 2 or 3 arguments when working with an M3 theme. Got: #{$args-count}';
     }
-    @return if($args-count == 2,
-      _get-theme-role-color($theme, $args...),
-      _get-theme-palette-color($theme, $args...)
-    );
+    @if ($args-count == 2) {
+      @return _get-theme-role-color($theme, $args...);
+    }
+    @return _get-theme-palette-color($theme, $args...);
   }
 
   @error 'Unrecognized theme version: #{$version}';

src/material/core/theming/_m2-inspection.scss

@@ -49,7 +49,10 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   $internal: map.get($theme, $_internals, m2-config);
   $theme: map.remove($theme, $_internals);
-  @return if(_is-error-theme($theme), $internal, $theme);
+  @if (_is-error-theme($theme)) {
+    @return $internal;
+  }
+  @return $theme;
 }
 
 /// Checks whether the given theme contains error values.
@@ -99,7 +102,10 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if theme-has($colors, color) {
     $colors: m2-theming.get-color-config($colors);
   }
-  @return if(map.get($colors, is-dark), dark, light);
+  @if (map.get($colors, is-dark)) {
+    @return dark;
+  }
+  @return light;
 }
 
 /// Gets a color from a theme object. This function can take between 2 and 4 arguments. The first

src/material/core/theming/_theming.scss

@@ -45,7 +45,10 @@ $private-internal-name: _mat-theming-internals-do-not-access;
       $result: map.set($result, $key, $value);
     }
   }
-  @return if($result == (), null, $result);
+  @if ($result == ()) {
+    @return null;
+  }
+  @return $result;
 }
 
 // Checks whether the given value resolves to a theme object. Theme objects are always

src/material/core/tokens/_m3-tokens.scss

@@ -39,9 +39,13 @@
 }
 
 @function get-sys-color($type, $palettes, $prefix) {
-  $sys-color: if($type == dark,
-    m3.md-sys-color-values-dark($palettes),
-    m3.md-sys-color-values-light($palettes));
+  $sys-color: null;
+
+  @if ($type == dark) {
+    $sys-color: m3.md-sys-color-values-dark($palettes);
+  } @else {
+    $sys-color: m3.md-sys-color-values-light($palettes);
+  }
 
   @if (sass-utils.$use-system-color-variables) {
     $var-values: ();