Skip to content

Commit fcebcef

Browse files
committed
refactor(material/core): update minimum required sass version and clean up workarounds
Updates the minimum required version of Sass and cleans up some workarounds for `list.slash` and `math.div`. BREAKING CHANGE: * Material now requires at least version 1.34.0 of Sass. Version 1.38.0 is recommended. Fixes #22915.
1 parent b25283c commit fcebcef

32 files changed

+105
-131
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@
215215
"rollup-plugin-commonjs": "^10.1.0",
216216
"rollup-plugin-node-resolve": "^5.2.0",
217217
"rollup-plugin-sourcemaps": "^0.6.3",
218-
"sass": "^1.34.1",
218+
"sass": "^1.38.0",
219219
"selenium-webdriver": "^3.6.0",
220220
"semver": "^7.3.4",
221221
"send": "^0.17.1",

src/material-experimental/mdc-card/card.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
@use 'sass:math';
12
@use '@material/card' as mdc-card;
2-
@use '../../material/core/style/private';
33
@use '../mdc-helpers/mdc-helpers';
44

55
// TODO(jelbourn): move header and title-group styles to their own files.
@@ -44,7 +44,7 @@ $mat-card-default-padding: 16px !default;
4444
// When a subtitle is inside of a header, we want to move it up slightly to reduce the space with
4545
// the title, and add a margin bottom to create space underneath the header.
4646
.mat-mdc-card-subtitle {
47-
margin-top: -(private.private-div($mat-card-default-padding, 2));
47+
margin-top: -(math.div($mat-card-default-padding, 2));
4848
margin-bottom: $mat-card-default-padding;
4949
}
5050
}

src/material-experimental/mdc-form-field/_form-field-density.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
@use 'sass:map';
2+
@use 'sass:math';
13
@use '@material/density' as mdc-density;
24
@use '@material/textfield' as mdc-textfield;
3-
@use 'sass:map';
45
@use '../../material/core/theming/theming';
5-
@use '../../material/core/style/private';
66
@use 'form-field-sizing';
77

88
// Mixin that sets the vertical spacing for the infix container of filled form fields.
@@ -55,7 +55,7 @@
5555
// cannot update the spacing to explicit numbers based on the density scale. Instead, we
5656
// determine the height reduction and equally subtract it from the default `top` and `bottom`
5757
// padding that is provided by the Material Design specification.
58-
$vertical-deduction: private.private-div(mdc-textfield.$height - $height, 2);
58+
$vertical-deduction: math.div(mdc-textfield.$height - $height, 2);
5959
// Map that describes the padding for form-fields with label.
6060
$with-label-padding: (
6161
top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction,
@@ -78,7 +78,7 @@
7878
// form-field because we do not know what type of form-field control is set up. Hence
7979
// we always use a fixed position for the label. This does not have any implications.
8080
.mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label {
81-
top: private.private-div($height, 2);
81+
top: math.div($height, 2);
8282
}
8383

8484
// For the outline appearance, we re-create the active floating label transform. This is

src/material-experimental/mdc-form-field/_form-field-native-select.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@use 'sass:map';
2+
@use 'sass:math';
23
@use '../mdc-helpers/mdc-helpers';
34
@use '../../cdk/a11y';
45
@use '../../material/core/theming/palette';
5-
@use '../../material/core/style/private';
66
@use '@material/theme/theme-color' as mdc-theme-color;
77

88
// Width of the Material Design form-field select arrow.
@@ -66,8 +66,8 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
6666
content: '';
6767
width: 0;
6868
height: 0;
69-
border-left: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent;
70-
border-right: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent;
69+
border-left: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
70+
border-right: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
7171
border-top: $mat-form-field-select-arrow-height solid;
7272
position: absolute;
7373
right: 0;

src/material-experimental/mdc-select/select.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
@use 'sass:math';
12
@use '@material/menu-surface' as mdc-menu-surface;
23
@use '@material/list/evolution-mixins' as mdc-list;
34
@use '../../material/core/style/variables';
45
@use '../../material/core/style/vendor-prefixes';
5-
@use '../../material/core/style/private';
66
@use '../../cdk/a11y';
77

88
$mat-select-arrow-size: 5px !default;
@@ -111,7 +111,7 @@ $scale: 0.75 !default;
111111
// Delay the transition until the label has animated about a third of the way through, in
112112
// order to prevent the placeholder from overlapping for a split second.
113113
transition: color variables.$swift-ease-out-duration
114-
private.private-div(variables.$swift-ease-out-duration, 3)
114+
math.div(variables.$swift-ease-out-duration, 3)
115115
variables.$swift-ease-out-timing-function;
116116

117117
._mat-animation-noopable & {
@@ -143,7 +143,7 @@ $scale: 0.75 !default;
143143
}
144144

145145
.mdc-floating-label--float-above {
146-
$arrow-scale: private.private-div($mat-select-placeholder-arrow-space, $scale);
146+
$arrow-scale: math.div($mat-select-placeholder-arrow-space, $scale);
147147
max-width: calc(100% / #{$scale} - #{$arrow-scale});
148148
}
149149
}

src/material-experimental/mdc-slide-toggle/slide-toggle.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@use 'sass:map';
2+
@use 'sass:math';
23
@use '@material/switch/switch' as mdc-switch;
34
@use '@material/switch/switch-theme' as mdc-switch-theme;
45
@use '@material/form-field' as mdc-form-field;
56
@use '@material/ripple' as mdc-ripple;
67
@use '../mdc-helpers/mdc-helpers';
78
@use '../../material/core/style/layout-common';
8-
@use '../../material/core/style/private';
99
@use '../../cdk/a11y';
1010

1111
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
@@ -66,6 +66,6 @@
6666
// Usually 1px would be enough, but MDC reduces the opacity on the
6767
// element so we need to make this a bit more prominent.
6868
outline: solid 2px;
69-
outline-offset: private.private-div(map.get(mdc-switch-theme.$light-theme, track-height), 2);
69+
outline-offset: math.div(map.get(mdc-switch-theme.$light-theme, track-height), 2);
7070
}
7171
}

src/material/badge/_badge-theme.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
@use 'sass:color';
55
@use 'sass:map';
66
@use 'sass:meta';
7+
@use 'sass:math';
78
@use '../core/theming/theming';
89
@use '../core/typography/typography';
910
@use '../core/typography/typography-utils';
10-
@use '../core/style/private';
1111
@use '../../cdk/a11y';
1212

1313
$font-size: 12px;
@@ -29,13 +29,13 @@ $_badge-structure-emitted: false !default;
2929

3030
&.mat-badge-above {
3131
.mat-badge-content {
32-
top: private.private-div(-$size, 2);
32+
top: math.div(-$size, 2);
3333
}
3434
}
3535

3636
&.mat-badge-below {
3737
.mat-badge-content {
38-
bottom: private.private-div(-$size, 2);
38+
bottom: math.div(-$size, 2);
3939
}
4040
}
4141

@@ -68,27 +68,27 @@ $_badge-structure-emitted: false !default;
6868
&.mat-badge-overlap {
6969
&.mat-badge-before {
7070
.mat-badge-content {
71-
left: private.private-div(-$size, 2);
71+
left: math.div(-$size, 2);
7272
}
7373
}
7474

7575
[dir='rtl'] &.mat-badge-before {
7676
.mat-badge-content {
7777
left: auto;
78-
right: private.private-div(-$size, 2);
78+
right: math.div(-$size, 2);
7979
}
8080
}
8181

8282
&.mat-badge-after {
8383
.mat-badge-content {
84-
right: private.private-div(-$size, 2);
84+
right: math.div(-$size, 2);
8585
}
8686
}
8787

8888
[dir='rtl'] &.mat-badge-after {
8989
.mat-badge-content {
9090
right: auto;
91-
left: private.private-div(-$size, 2);
91+
left: math.div(-$size, 2);
9292
}
9393
}
9494
}

src/material/card/card.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:math';
12
@use '../core/style/variables';
23
@use '../core/style/elevation';
34
@use '../core/style/private';
@@ -59,8 +60,8 @@ $header-size: 40px !default;
5960

6061
.mat-card-actions {
6162
@extend %mat-card-section-base;
62-
margin-left: private.private-div(-$padding, 2);
63-
margin-right: private.private-div(-$padding, 2);
63+
margin-left: math.div(-$padding, 2);
64+
margin-right: math.div(-$padding, 2);
6465
padding: 8px 0;
6566
}
6667

src/material/checkbox/checkbox.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ $_ripple-radius: 20px;
1818
$_item-spacing: variables.$toggle-padding;
1919

2020
// The width of the line used to draw the checkmark / mixedmark.
21-
$_mark-stroke-size: private.private-div(2, 15) * checkbox-common.$size !default;
21+
$_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
2222

2323

2424
// Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.

src/material/core/option/option.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
@use 'sass:math';
12
@use '../style/menu-common';
23
@use '../style/vendor-prefixes';
34
@use '../style/layout-common';
4-
@use '../style/private';
55
@use '../../../cdk/a11y';
66

77
.mat-option {
@@ -78,7 +78,7 @@
7878
}
7979

8080
.mat-option-pseudo-checkbox {
81-
$margin: private.private-div(menu-common.$side-padding, 2);
81+
$margin: math.div(menu-common.$side-padding, 2);
8282
margin-right: $margin;
8383

8484
[dir='rtl'] & {

src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:math';
12
@use '../../style/checkbox-common';
23
@use '../../style/private';
34
@use '../../style/variables';
@@ -50,20 +51,20 @@ $_checkmark-size: checkbox-common.$size - (2 * $_padding);
5051
}
5152

5253
.mat-pseudo-checkbox-indeterminate::after {
53-
top: private.private-div(checkbox-common.$size - checkbox-common.$border-width, 2) -
54+
top: math.div(checkbox-common.$size - checkbox-common.$border-width, 2) -
5455
checkbox-common.$border-width;
55-
left: private.private-div(checkbox-common.$border-width, 2);
56+
left: math.div(checkbox-common.$border-width, 2);
5657
width: checkbox-common.$size - 6px;
5758
opacity: 1;
5859
border-radius: 2px;
5960
}
6061

6162
.mat-pseudo-checkbox-checked::after {
62-
top: private.private-div(checkbox-common.$size, 2) - private.private-div($_checkmark-size, 4) -
63-
private.private-div(checkbox-common.$size, 10) - checkbox-common.$border-width;
63+
top: math.div(checkbox-common.$size, 2) - math.div($_checkmark-size, 4) -
64+
math.div(checkbox-common.$size, 10) - checkbox-common.$border-width;
6465
left: $_padding - checkbox-common.$border-width * 1.5;
6566
width: $_checkmark-size;
66-
height: private.private-div($_checkmark-size - checkbox-common.$border-width, 2);
67+
height: math.div($_checkmark-size - checkbox-common.$border-width, 2);
6768
border-left: checkbox-common.$border-width solid currentColor;
6869
transform: rotate(-45deg);
6970
opacity: 1;

src/material/core/style/_private.scss

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
@use 'sass:map';
2-
@use 'sass:math';
3-
@use 'sass:meta';
4-
@use 'sass:list';
52
@use './elevation';
63

74
@mixin private-theme-elevation($zValue, $config, $opacity: elevation.$opacity) {
@@ -42,27 +39,3 @@
4239
@content;
4340
}
4441
}
45-
46-
// Private polyfill for the `math.div` function from Sass to be used until we can update the
47-
// minimum required Sass version to 1.34.0 or above.
48-
// TODO(crisbeto): replace with `math.div` eventually.
49-
@function private-div($a, $b) {
50-
@if (meta.function-exists('div', 'math')) {
51-
@return math.div($a, $b);
52-
}
53-
@else {
54-
@return $a / $b;
55-
}
56-
}
57-
58-
// Private polyfill for the `list.slash` function from Sass to be used until we can update the
59-
// minimum required Sass version to 1.34.0 or above.
60-
// TODO(crisbeto): replace with `list.slash` eventually.
61-
@function private-slash($a, $b) {
62-
@if (meta.function-exists('slash', 'list')) {
63-
@return list.slash($a, $b);
64-
}
65-
@else {
66-
@return #{$a}#{' / '}#{$b};
67-
}
68-
}

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
@use 'sass:math';
44
@use 'sass:meta';
55
@use 'sass:string';
6-
@use '../style/private';
76

87

98
// Utility for fetching a nested value from a typography config.
@@ -78,10 +77,8 @@
7877
font-family: $font-family;
7978
}
8079
@else {
81-
// Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
82-
// that we need to use `list.slash` for `font-size/line-height` in order to prevent
83-
// Sass from dividing the two values.
84-
font: $font-weight private.private-slash($font-size, $line-height) $font-family;
80+
// Otherwise use the shorthand `font`, because it's the least amount of bytes.
81+
font: $font-weight list.slash($font-size, $line-height) $font-family;
8582
}
8683
}
8784

src/material/datepicker/calendar-body.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
@use '../core/style/private';
1+
@use 'sass:math';
22
@use '../../cdk/a11y';
33

44
$calendar-body-label-padding-start: 5% !default;
55
// We don't want the label to jump around when we switch between month and year views, so we use
66
// the same amount of padding regardless of the number of columns. We align the header label with
77
// the one third mark of the first cell, this was chosen somewhat arbitrarily to make it look
88
// roughly like the mock. Half way is too far since the cell text is center aligned.
9-
$calendar-body-label-side-padding: private.private-div(33%, 7) !default;
9+
$calendar-body-label-side-padding: math.div(33%, 7) !default;
1010
$calendar-body-cell-min-size: 32px !default;
1111
$calendar-body-cell-content-margin: 5% !default;
1212
$calendar-body-cell-content-border-width: 1px !default;

src/material/datepicker/date-range-input.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1+
@use 'sass:math';
12
@use '../core/style/variables';
23
@use '../core/style/vendor-prefixes';
3-
@use '../core/style/private';
44
@use '../../cdk/a11y';
55

66
$date-range-input-separator-spacing: 4px;
77
$date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spacing});
88

99
@mixin _placeholder-transition($property) {
1010
transition: #{$property} variables.$swift-ease-out-duration
11-
private.private-div(variables.$swift-ease-out-duration, 3)
11+
math.div(variables.$swift-ease-out-duration, 3)
1212
variables.$swift-ease-out-timing-function;
1313
}
1414

src/material/form-field/_form-field-fill-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@use 'sass:map';
2+
@use 'sass:math';
23
@use '../core/theming/theming';
34
@use '../core/typography/typography';
45
@use '../core/typography/typography-utils';
5-
@use '../core/style/private';
66

77

88
// Theme styles that only apply to the fill appearance of the form-field.
@@ -55,7 +55,7 @@ $fill-dedupe: 0;
5555
@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
5656
transform: translateY(-$infix-margin-top - $infix-padding + $fill-dedupe)
5757
scale($font-scale);
58-
width: private.private-div(100%, $font-scale) + $fill-dedupe;
58+
width: math.div(100%, $font-scale) + $fill-dedupe;
5959

6060
$fill-dedupe: $fill-dedupe + 0.00001 !global;
6161
}

0 commit comments

Comments
 (0)