Skip to content

Commit 73ba6b7

Browse files
oramirez1oramirez1
committed
issue #1471: Sass deprecation warnings with latest Dart Sass (if() function usage) #1471
- packages/core/src/_box-shadows.scss - Fix Deprecation warning for $pseudo-selector - Fix Depreaction warning for $prefix - Fix Depreaction warning for $start-shadow - Fix Deprecation warning for $end-shadow - packages/core/src/_utils.scss - Fix Deprecation warning for $options - Fix Depreaction warning for $is-list validation - Fix Depreaction warning for $choices - Fix Deprecation warning for $position - Fix Deprecation warning for $selector - packages/core/src/app-bar/_app-bar.scss - Fix Deprecation warning for $dark-theme-surface-background-color - packages/core/src/autocomplete/_autocomplete.scss - Fix Deprecation warning for $calc-clear-button - Fix Deprecation warning for $calc-dropdown-button - Fix Deprecation warning for $calc-circular-progress - Fix Deprecation warning for $prefix - packages/core/src/avatar/_avatar.scss - Fix Deprecation warning for $class-name - packages/core/src/button/_button.scss - Fix Deprecation warning for $pressed-elevation - packages/core/src/card/_card.scss - Fix Deprecation warning for $dark-theme-background-color - Fix Deprecation warning for padding - packages/core/src/chip/_chip.scss - Fix Deprecation warning for $solid-dark-background-color - Fix Deprecation warning for $outline-dark-background-color - packages/core/src/dialog/_dialog.scss - Fix Deprecation warning for $background-color - Fix Deprecation warning for $color - packages/core/src/divider/_divider.scss - Fix Deprecation warning for $property - Fix Deprecation warning for $var-name - packages/core/src/form/_input-toggle.scss - Fix Deprecation warning for $focus-selector - packages/core/src/form/_slider.scss - Fix Deprecation warning for $track-color - packages/core/src/form/_switch.scss - Fix Deprecation warning for $track-dark-background-color - Fix Deprecation warning for $active-selector - packages/core/src/form/_text-field.scss - Fix Deprecation warning for $addon-offset - packages/core/src/interaction/_interaction.scss - Fix Deprecation warning for $focus-selector - Fix Deprecation warning for $transition-property - packages/core/src/snackbar/_snackbar.scss - Fix Deprecation warning for $dark-theme-background-color - packages/core/src/tabs/_tabs.scss - Fix Deprecation warning for $button-selector - packages/core/src/theme/_a11y.scss - Fix Deprecation warning for $light-color/$dark-color validation - packages/core/src/theme/_theme.scss - Fix Deprecation warning for $dark-theme-surface-color - Fix Deprecation warning for $theme-color-var-fallback - Fix Deprecation warning for $fallback - Fix Deprecation warning for $color-suffixes - Fix Deprecation warning for $color-name - packages/core/src/window-splitter/_window-splitter.scss - Fix Deprecation warning for $pseudo-selectors - Fix Deprecation warning for $fallback - Fix Deprecation warning for $inactive-fallback
1 parent d27b9cf commit 73ba6b7

File tree

20 files changed

+288
-144
lines changed

20 files changed

+288
-144
lines changed

‎packages/core/src/_box-shadows.scss‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,12 @@ $box-shadow-3-layers: (
203203
$create-pseudo: true,
204204
$position-relative: true
205205
) {
206-
$pseudo-selector: if($pseudo-before, "&::before", "&::after");
206+
$pseudo-selector: null;
207+
@if $pseudo-before {
208+
$pseudo-selector: "&::before";
209+
} @else {
210+
$pseudo-selector: "&::after";
211+
}
207212
$suffix: string.slice($pseudo-selector, 2);
208213
$active-string: "";
209214

@@ -230,7 +235,11 @@ $box-shadow-3-layers: (
230235
@for $i from 1 to list.length($active-selectors) + 1 {
231236
$selector: list.nth($active-selectors, $i);
232237

233-
$prefix: $active-string + if($i > 1, ", ", "");
238+
@if $i > 1 {
239+
$prefix: $active-string + ", ";
240+
} @else {
241+
$prefix: $active-string + "";
242+
}
234243
$active-string: $prefix + $selector + $suffix;
235244
}
236245
}
@@ -282,16 +291,23 @@ $box-shadow-3-layers: (
282291
$opacity-boost: 0,
283292
$position-relative: true
284293
) {
285-
$start-shadow: if(
286-
$start-z-value == none or $start-z-value == 0,
287-
none,
288-
box-shadow($start-z-value, $color, $opacity-boost)
289-
);
290-
$end-shadow: if(
291-
$end-z-value == none or $end-z-value == 0,
292-
none,
293-
if($end-z-value, box-shadow($end-z-value, $color, $opacity-boost), null)
294-
);
294+
$start-shadow: null;
295+
@if $start-z-value == none or $start-z-value == 0 {
296+
$start-shadow: none;
297+
} @else {
298+
$start-shadow: box-shadow($start-z-value, $color, $opacity-boost);
299+
}
300+
301+
$end-shadow: null;
302+
@if $end-z-value == none or $end-z-value == 0 {
303+
$end-shadow: none;
304+
} @else {
305+
@if $end-z-value {
306+
$end-shadow: box-shadow($end-z-value, $color, $opacity-boost);
307+
} @else {
308+
$end-shadow: null;
309+
}
310+
}
295311

296312
@include box-shadow-transition(
297313
$start-shadow,

‎packages/core/src/_utils.scss‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -97,30 +97,43 @@ $_swappable-properties: text-align;
9797
/// @param {String} error-message - The additional error message to display
9898
/// @returns {any} the value from the list or map
9999
@function validate($options, $key-or-value, $error-message) {
100-
$options: if(
101-
meta.type-of($options) == string,
102-
list.append((), $options),
103-
$options
104-
);
100+
@if meta.type-of($options) == string {
101+
$options: list.append((), $options);
102+
}
105103

106104
$type: meta.type-of($options);
107105
$is-map: $type == map;
108106
$is-list: $type == list;
109107

110108
@if $disable-validation {
111-
@return if($is-list, $key-or-value, map.get($options, $key-or-value));
109+
@if $is-list {
110+
@return $key-or-value;
111+
} @else {
112+
@return map.get($options, $key-or-value);
113+
}
112114
}
113115

114116
@if not $is-map and not $is-list {
115117
@error "Unable to validate anything except for lists and maps at this time. Received: '#{$options}'.";
116118
}
117119

118-
$choices: if($is-map, map.keys($options), $options);
120+
$choices: null;
121+
122+
@if $is-map {
123+
$choices: map.keys($options);
124+
} @else {
125+
$choices: $options;
126+
}
127+
119128
@if not list.index($choices, $key-or-value) {
120129
@error "Invalid #{$error-message}: '#{$key-or-value}'. Choose one of: #{$choices}";
121130
}
122131

123-
@return if($is-list, $key-or-value, map.get($options, $key-or-value));
132+
@if $is-list {
133+
@return $key-or-value;
134+
} @else {
135+
@return map.get($options, $key-or-value);
136+
}
124137
}
125138

126139
/// Used to get a custom property variable name.
@@ -272,7 +285,11 @@ $_swappable-properties: text-align;
272285
content: "";
273286
inset: $inset;
274287
pointer-events: none;
275-
position: if($fixed, fixed, absolute);
288+
@if $fixed {
289+
position: fixed;
290+
} @else {
291+
position: absolute;
292+
}
276293
z-index: $z-index;
277294
}
278295

@@ -349,8 +366,14 @@ $_swappable-properties: text-align;
349366
$css-modules: false,
350367
$parent-selector: true
351368
) {
352-
$selector: if($css-modules, ":global #{$selector} :local", $selector);
353-
$selector: if($parent-selector, "#{$selector} &", $selector);
369+
370+
@if $css-modules {
371+
$selector: ":global #{$selector} :local";
372+
}
373+
374+
@if $parent-selector {
375+
$selector: "#{$selector} &";
376+
}
354377

355378
#{$selector} {
356379
@content;

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,13 @@ $light-theme-surface-color: a11y.contrast-color(
115115
/// The background color to use when `theme="surface"` and using the global dark
116116
/// theme
117117
/// @type Color
118-
$dark-theme-surface-background-color: if(
119-
theme.$disable-dark-elevation,
120-
theme.$dark-theme-surface-color,
121-
map.get(theme.$dark-elevation-colors, $fixed-elevation)
122-
) !default;
118+
$dark-theme-surface-background-color: null;
119+
@if theme.$disable-dark-elevation {
120+
$dark-theme-surface-background-color: theme.$dark-theme-surface-color;
121+
} @else {
122+
$dark-theme-surface-background-color: map.get(theme.$dark-elevation-colors, $fixed-elevation);
123+
}
124+
$dark-theme-surface-background-color: $dark-theme-surface-background-color !default;
123125

124126
/// The text color to use when `theme="surface"` and using the global dark theme
125127
/// @type Color

‎packages/core/src/autocomplete/_autocomplete.scss‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -195,21 +195,22 @@ $variables: (
195195
@function _right-addon-calc() {
196196
$calc-spacing: get-var(addon-spacing);
197197
$calc-total-gap: calc(get-var(gap-count, 0) * get-var(addon-gap));
198-
$calc-clear-button: if(
199-
$disable-clear-button,
200-
"",
201-
" + " + get-var(clear-button-size, 0px)
202-
);
203-
$calc-dropdown-button: if(
204-
$disable-dropdown-button,
205-
"",
206-
" + " + get-var(dropdown-button-size, 0px)
207-
);
208-
$calc-circular-progress: if(
209-
$disable-circular-progress,
210-
"",
211-
" + " + get-var(circular-progress-size, 0px)
212-
);
198+
199+
$calc-clear-button: "";
200+
@if not $disable-clear-button {
201+
$calc-clear-button: " + " + get-var(clear-button-size, 0px);
202+
}
203+
204+
$calc-dropdown-button: "";
205+
@if not $disable-dropdown-button {
206+
$calc-dropdown-button: " + " + get-var(dropdown-button-size, 0px);
207+
}
208+
209+
$calc-circular-progress: "";
210+
@if not $disable-circular-progress {
211+
$calc-circular-progress: " + " + get-var(circular-progress-size, 0px);
212+
}
213+
213214
$calc-addon-size: $calc-clear-button + $calc-dropdown-button +
214215
$calc-circular-progress;
215216

@@ -223,7 +224,12 @@ $variables: (
223224
/// @param {String} addon-selector
224225
/// @returns {String} a class name selector
225226
@function _add-has-selector($appending-selector, $addon-selector) {
226-
$prefix: if(string.length($appending-selector), "", "&");
227+
$prefix: null;
228+
@if string.length($appending-selector) {
229+
$prefix: "";
230+
} @else {
231+
$prefix: "&";
232+
}
227233

228234
@return $appending-selector + $prefix + ":has(" + $addon-selector + ")";
229235
}

‎packages/core/src/avatar/_avatar.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,12 @@ $variables: (
165165
/// @param {Boolean} disable-prefix [false] - Set to `true` to disable the
166166
/// `.rmd-avatar--` prefix for the class name
167167
@mixin custom-color($name, $color, $background-color, $disable-prefix: false) {
168-
$class-name: if($disable-prefix, $name, ".rmd-avatar--#{$name}");
168+
$class-name: null;
169+
@if $disable-prefix {
170+
$class-name: $name;
171+
} @else {
172+
$class-name: ".rmd-avatar--#{$name}";
173+
}
169174

170175
#{$class-name} {
171176
@include set-var(background-color, $background-color);

‎packages/core/src/button/_button.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -422,13 +422,14 @@ $variables: (
422422
);
423423
@include set-var(color, get-var(contained-color));
424424

425+
$pressed-elevation: null;
426+
@if not $disable-contained-pressed-elevation {
427+
$pressed-elevation: $contained-pressed-elevation;
428+
}
429+
425430
@include box-shadows.elevation-transition(
426431
$contained-elevation,
427-
if(
428-
$disable-contained-pressed-elevation,
429-
null,
430-
$contained-pressed-elevation
431-
),
432+
$pressed-elevation,
432433
"&.rmd-button--pressed",
433434
$pseudo-before: false,
434435
$position-relative: false

‎packages/core/src/card/_card.scss‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,13 @@ $light-theme-background-color: theme.theme-get-var(surface-color) !default;
5959

6060
/// The background color to use when using the global dark theme
6161
/// @type Color
62-
$dark-theme-background-color: if(
63-
theme.$disable-dark-elevation,
64-
theme.$dark-theme-surface-color,
65-
map.get(theme.$dark-elevation-colors, $elevation)
66-
) !default;
62+
$dark-theme-background-color: null;
63+
@if theme.$disable-dark-elevation {
64+
$dark-theme-background-color: theme.$dark-theme-surface-color;
65+
} @else {
66+
$dark-theme-background-color: map.get(theme.$dark-elevation-colors, $elevation);
67+
}
68+
$dark-theme-background-color: $dark-theme-background-color !default;
6769

6870
/// The default card background color
6971
/// @type Color
@@ -226,11 +228,13 @@ $variables: (background-color, color);
226228
column-gap: $header-spacing;
227229
display: flex;
228230
max-width: 100%;
229-
padding: if(
230-
$header-padding == $header-padding-top or not $header-padding-top,
231-
$header-padding,
232-
$header-padding-top $header-padding $header-padding
233-
);
231+
$padding-value: null;
232+
@if $header-padding == $header-padding-top or not $header-padding-top {
233+
$padding-value: $header-padding;
234+
} @else {
235+
$padding-value: $header-padding-top $header-padding $header-padding;
236+
}
237+
padding: $padding-value;
234238
}
235239

236240
&__header-content {

‎packages/core/src/chip/_chip.scss‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -182,11 +182,13 @@ $solid-light-color: a11y.contrast-color($solid-light-background-color) !default;
182182

183183
/// The dark theme background color for the `theme="solid"`
184184
/// @type Color
185-
$solid-dark-background-color: if(
186-
theme.$disable-dark-elevation,
187-
colors.$grey-900,
188-
map.get(theme.$dark-elevation-colors, 12)
189-
) !default;
185+
$solid-dark-background-color: null;
186+
@if theme.$disable-dark-elevation {
187+
$solid-dark-background-color: colors.$grey-900;
188+
} @else {
189+
$solid-dark-background-color: map.get(theme.$dark-elevation-colors, 12);
190+
}
191+
$solid-dark-background-color: $solid-dark-background-color !default;
190192

191193
/// The dark theme background color for the `theme="solid"` and the `Chip` is
192194
/// disabled.
@@ -261,11 +263,13 @@ $outline-dark-color: $outline-light-color !default;
261263

262264
/// The background-color to use in dark themes when `theme="outline"`
263265
/// @type Color
264-
$outline-dark-background-color: if(
265-
theme.$disable-dark-elevation,
266-
theme.$dark-theme-surface-color,
267-
map.get(theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
268-
) !default;
266+
$outline-dark-background-color: null;
267+
@if theme.$disable-dark-elevation {
268+
$outline-dark-background-color: theme.$dark-theme-surface-color;
269+
} @else {
270+
$outline-dark-background-color: map.get(theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value);
271+
}
272+
$outline-dark-background-color: $outline-dark-background-color !default;
269273

270274
/// The text color to use in dark themes when `theme="outline"`
271275
/// @type Color

‎packages/core/src/dialog/_dialog.scss‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -87,19 +87,23 @@ $z-index: utils.$temporary-element-z-index !default;
8787

8888
/// The default background color for a dialog.
8989
/// @type Color
90-
$background-color: if(
91-
theme.$disable-dark-elevation,
92-
theme.theme-get-var(surface-color),
93-
null
94-
) !default;
90+
$background-color: null;
91+
@if theme.$disable-dark-elevation {
92+
$background-color: theme.theme-get-var(surface-color);
93+
} @else {
94+
$background-color: null;
95+
}
96+
$background-color: $background-color !default;
9597

9698
/// The default text color for a dialog.
9799
/// @type Color
98-
$color: if(
99-
theme.$disable-dark-elevation,
100-
theme.theme-get-var(text-primary-color),
101-
null
102-
) !default;
100+
$color: null;
101+
@if theme.$disable-dark-elevation {
102+
$color: theme.theme-get-var(text-primary-color);
103+
} @else {
104+
$color: null;
105+
}
106+
$color: $color !default;
103107

104108
/// The `min-width` to apply to all `Dialog`s.
105109
///

‎packages/core/src/divider/_divider.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,16 @@ $variables: (
125125
/// @param {String} position [null] - This should be one of `left`, `right`,
126126
/// `top`, `bottom`
127127
@mixin border-style($position: null) {
128-
$property: if(not $position, border, "border-#{$position}");
129-
$var-name: if(not $position, size, border-size);
128+
$property: null;
129+
$var-name: null;
130+
131+
@if not $position {
132+
$property: border;
133+
$var-name: size;
134+
} @else {
135+
$property: "border-#{$position}";
136+
$var-name: border-size;
137+
}
130138

131139
#{$property}: get-var($var-name) solid get-var(color);
132140
}

0 commit comments

Comments
 (0)