issue #1471: Sass deprecation warnings with latest Dart Sass (if() fu…

packages/core/src/_box-shadows.scss

@@ -203,7 +203,12 @@ $box-shadow-3-layers: (
   $create-pseudo: true,
   $position-relative: true
 ) {
-  $pseudo-selector: if($pseudo-before, "&::before", "&::after");
+  $pseudo-selector: null;
+  @if $pseudo-before {
+    $pseudo-selector: "&::before";
+  } @else {
+    $pseudo-selector: "&::after";
+  }
   $suffix: string.slice($pseudo-selector, 2);
   $active-string: "";
 
@@ -230,7 +235,11 @@ $box-shadow-3-layers: (
       @for $i from 1 to list.length($active-selectors) + 1 {
         $selector: list.nth($active-selectors, $i);
 
-        $prefix: $active-string + if($i > 1, ", ", "");
+        @if $i > 1 {
+          $prefix: $active-string + ", ";
+        } @else {
+          $prefix: $active-string + "";
+        }
         $active-string: $prefix + $selector + $suffix;
       }
     }
@@ -282,16 +291,23 @@ $box-shadow-3-layers: (
   $opacity-boost: 0,
   $position-relative: true
 ) {
-  $start-shadow: if(
-    $start-z-value == none or $start-z-value == 0,
-    none,
-    box-shadow($start-z-value, $color, $opacity-boost)
-  );
-  $end-shadow: if(
-    $end-z-value == none or $end-z-value == 0,
-    none,
-    if($end-z-value, box-shadow($end-z-value, $color, $opacity-boost), null)
-  );
+  $start-shadow: null;
+  @if $start-z-value == none or $start-z-value == 0 {
+    $start-shadow: none;
+  } @else {
+    $start-shadow: box-shadow($start-z-value, $color, $opacity-boost);
+  }
+
+  $end-shadow: null;
+  @if $end-z-value == none or $end-z-value == 0 {
+    $end-shadow: none;
+  } @else {
+    @if $end-z-value {
+      $end-shadow: box-shadow($end-z-value, $color, $opacity-boost);
+    } @else {
+      $end-shadow: null;
+    }
+  }
 
   @include box-shadow-transition(
     $start-shadow,

packages/core/src/_utils.scss

@@ -97,30 +97,43 @@ $_swappable-properties: text-align;
 /// @param {String} error-message - The additional error message to display
 /// @returns {any} the value from the list or map
 @function validate($options, $key-or-value, $error-message) {
-  $options: if(
-    meta.type-of($options) == string,
-    list.append((), $options),
-    $options
-  );
+  @if meta.type-of($options) == string {
+    $options: list.append((), $options);
+  }
 
   $type: meta.type-of($options);
   $is-map: $type == map;
   $is-list: $type == list;
 
   @if $disable-validation {
-    @return if($is-list, $key-or-value, map.get($options, $key-or-value));
+    @if $is-list {
+      @return $key-or-value;
+    } @else {
+      @return map.get($options, $key-or-value);
+    }
   }
 
   @if not $is-map and not $is-list {
     @error "Unable to validate anything except for lists and maps at this time. Received: '#{$options}'.";
   }
 
-  $choices: if($is-map, map.keys($options), $options);
+  $choices: null;
+
+  @if $is-map {
+    $choices: map.keys($options);
+  } @else {
+    $choices: $options;
+  }
+
   @if not list.index($choices, $key-or-value) {
     @error "Invalid #{$error-message}: '#{$key-or-value}'. Choose one of: #{$choices}";
   }
 
-  @return if($is-list, $key-or-value, map.get($options, $key-or-value));
+  @if $is-list {
+    @return $key-or-value;
+  } @else {
+    @return map.get($options, $key-or-value);
+  }
 }
 
 /// Used to get a custom property variable name.
@@ -272,7 +285,11 @@ $_swappable-properties: text-align;
   content: "";
   inset: $inset;
   pointer-events: none;
-  position: if($fixed, fixed, absolute);
+  @if $fixed {
+    position: fixed;
+  } @else {
+    position: absolute;
+  }
   z-index: $z-index;
 }
 
@@ -349,8 +366,13 @@ $_swappable-properties: text-align;
   $css-modules: false,
   $parent-selector: true
 ) {
-  $selector: if($css-modules, ":global #{$selector} :local", $selector);
-  $selector: if($parent-selector, "#{$selector} &", $selector);
+  @if $css-modules {
+    $selector: ":global #{$selector} :local";
+  }
+
+  @if $parent-selector {
+    $selector: "#{$selector} &";
+  }
 
   #{$selector} {
     @content;

packages/core/src/app-bar/_app-bar.scss

@@ -115,11 +115,16 @@ $light-theme-surface-color: a11y.contrast-color(
 /// The background color to use when `theme="surface"` and using the global dark
 /// theme
 /// @type Color
-$dark-theme-surface-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $fixed-elevation)
-) !default;
+$dark-theme-surface-background-color: null;
+@if theme.$disable-dark-elevation {
+  $dark-theme-surface-background-color: theme.$dark-theme-surface-color;
+} @else {
+  $dark-theme-surface-background-color: map.get(
+    theme.$dark-elevation-colors,
+    $fixed-elevation
+  );
+}
+$dark-theme-surface-background-color: $dark-theme-surface-background-color !default;
 
 /// The text color to use when `theme="surface"` and using the global dark theme
 /// @type Color

packages/core/src/autocomplete/_autocomplete.scss

@@ -195,21 +195,22 @@ $variables: (
 @function _right-addon-calc() {
   $calc-spacing: get-var(addon-spacing);
   $calc-total-gap: calc(get-var(gap-count, 0) * get-var(addon-gap));
-  $calc-clear-button: if(
-    $disable-clear-button,
-    "",
-    " + " + get-var(clear-button-size, 0px)
-  );
-  $calc-dropdown-button: if(
-    $disable-dropdown-button,
-    "",
-    " + " + get-var(dropdown-button-size, 0px)
-  );
-  $calc-circular-progress: if(
-    $disable-circular-progress,
-    "",
-    " + " + get-var(circular-progress-size, 0px)
-  );
+
+  $calc-clear-button: "";
+  @if not $disable-clear-button {
+    $calc-clear-button: " + " + get-var(clear-button-size, 0px);
+  }
+
+  $calc-dropdown-button: "";
+  @if not $disable-dropdown-button {
+    $calc-dropdown-button: " + " + get-var(dropdown-button-size, 0px);
+  }
+
+  $calc-circular-progress: "";
+  @if not $disable-circular-progress {
+    $calc-circular-progress: " + " + get-var(circular-progress-size, 0px);
+  }
+
   $calc-addon-size: $calc-clear-button + $calc-dropdown-button +
     $calc-circular-progress;
 
@@ -223,7 +224,12 @@ $variables: (
 /// @param {String} addon-selector
 /// @returns {String} a class name selector
 @function _add-has-selector($appending-selector, $addon-selector) {
-  $prefix: if(string.length($appending-selector), "", "&");
+  $prefix: null;
+  @if string.length($appending-selector) {
+    $prefix: "";
+  } @else {
+    $prefix: "&";
+  }
 
   @return $appending-selector + $prefix + ":has(" + $addon-selector + ")";
 }

packages/core/src/avatar/_avatar.scss

@@ -165,7 +165,12 @@ $variables: (
 /// @param {Boolean} disable-prefix [false] - Set to `true` to disable the
 /// `.rmd-avatar--` prefix for the class name
 @mixin custom-color($name, $color, $background-color, $disable-prefix: false) {
-  $class-name: if($disable-prefix, $name, ".rmd-avatar--#{$name}");
+  $class-name: null;
+  @if $disable-prefix {
+    $class-name: $name;
+  } @else {
+    $class-name: ".rmd-avatar--#{$name}";
+  }
 
   #{$class-name} {
     @include set-var(background-color, $background-color);

packages/core/src/button/_button.scss

@@ -422,13 +422,14 @@ $variables: (
             );
             @include set-var(color, get-var(contained-color));
 
+            $pressed-elevation: null;
+            @if not $disable-contained-pressed-elevation {
+              $pressed-elevation: $contained-pressed-elevation;
+            }
+
             @include box-shadows.elevation-transition(
               $contained-elevation,
-              if(
-                $disable-contained-pressed-elevation,
-                null,
-                $contained-pressed-elevation
-              ),
+              $pressed-elevation,
               "&.rmd-button--pressed",
               $pseudo-before: false,
               $position-relative: false

packages/core/src/card/_card.scss

@@ -59,11 +59,16 @@ $light-theme-background-color: theme.theme-get-var(surface-color) !default;
 
 /// The background color to use when using the global dark theme
 /// @type Color
-$dark-theme-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $elevation)
-) !default;
+$dark-theme-background-color: null;
+@if theme.$disable-dark-elevation {
+  $dark-theme-background-color: theme.$dark-theme-surface-color;
+} @else {
+  $dark-theme-background-color: map.get(
+    theme.$dark-elevation-colors,
+    $elevation
+  );
+}
+$dark-theme-background-color: $dark-theme-background-color !default;
 
 /// The default card background color
 /// @type Color
@@ -226,11 +231,14 @@ $variables: (background-color, color);
           column-gap: $header-spacing;
           display: flex;
           max-width: 100%;
-          padding: if(
-            $header-padding == $header-padding-top or not $header-padding-top,
-            $header-padding,
-            $header-padding-top $header-padding $header-padding
-          );
+          $padding-value: null;
+          @if $header-padding == $header-padding-top or not $header-padding-top
+          {
+            $padding-value: $header-padding;
+          } @else {
+            $padding-value: $header-padding-top $header-padding $header-padding;
+          }
+          padding: $padding-value;
         }
 
         &__header-content {

packages/core/src/chip/_chip.scss

@@ -182,11 +182,13 @@ $solid-light-color: a11y.contrast-color($solid-light-background-color) !default;
 
 /// The dark theme background color for the `theme="solid"`
 /// @type Color
-$solid-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  colors.$grey-900,
-  map.get(theme.$dark-elevation-colors, 12)
-) !default;
+$solid-dark-background-color: null;
+@if theme.$disable-dark-elevation {
+  $solid-dark-background-color: colors.$grey-900;
+} @else {
+  $solid-dark-background-color: map.get(theme.$dark-elevation-colors, 12);
+}
+$solid-dark-background-color: $solid-dark-background-color !default;
 
 /// The dark theme background color for the `theme="solid"` and the `Chip` is
 /// disabled.
@@ -261,11 +263,16 @@ $outline-dark-color: $outline-light-color !default;
 
 /// The background-color to use in dark themes when `theme="outline"`
 /// @type Color
-$outline-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
-) !default;
+$outline-dark-background-color: null;
+@if theme.$disable-dark-elevation {
+  $outline-dark-background-color: theme.$dark-theme-surface-color;
+} @else {
+  $outline-dark-background-color: map.get(
+    theme.$dark-elevation-colors,
+    $outline-raisable-box-shadow-z-value
+  );
+}
+$outline-dark-background-color: $outline-dark-background-color !default;
 
 /// The text color to use in dark themes when `theme="outline"`
 /// @type Color

packages/core/src/dialog/_dialog.scss

@@ -87,19 +87,23 @@ $z-index: utils.$temporary-element-z-index !default;
 
 /// The default background color for a dialog.
 /// @type Color
-$background-color: if(
-  theme.$disable-dark-elevation,
-  theme.theme-get-var(surface-color),
-  null
-) !default;
+$background-color: null;
+@if theme.$disable-dark-elevation {
+  $background-color: theme.theme-get-var(surface-color);
+} @else {
+  $background-color: null;
+}
+$background-color: $background-color !default;
 
 /// The default text color for a dialog.
 /// @type Color
-$color: if(
-  theme.$disable-dark-elevation,
-  theme.theme-get-var(text-primary-color),
-  null
-) !default;
+$color: null;
+@if theme.$disable-dark-elevation {
+  $color: theme.theme-get-var(text-primary-color);
+} @else {
+  $color: null;
+}
+$color: $color !default;
 
 /// The `min-width` to apply to all `Dialog`s.
 ///

packages/core/src/divider/_divider.scss

@@ -125,8 +125,16 @@ $variables: (
 /// @param {String} position [null] - This should be one of `left`, `right`,
 /// `top`, `bottom`
 @mixin border-style($position: null) {
-  $property: if(not $position, border, "border-#{$position}");
-  $var-name: if(not $position, size, border-size);
+  $property: null;
+  $var-name: null;
+
+  @if not $position {
+    $property: border;
+    $var-name: size;
+  } @else {
+    $property: "border-#{$position}";
+    $var-name: border-size;
+  }
 
   #{$property}: get-var($var-name) solid get-var(color);
 }