Skip to content

Commit c7d76cf

Browse files
crisbetocrisbeto
committed
refactor(multiple): fix warnings related to division operator in latest version of Sass
The latest version of Sass prints a warning when the division operator is used. These changes migrate us to the recommended `math.div` function. Fixes #22866.
1 parent 23dfbbb commit c7d76cf

37 files changed

+771
-704
lines changed

‎WORKSPACE

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ http_archive(
1515
# Add sass rules
1616
http_archive(
1717
name = "io_bazel_rules_sass",
18-
sha256 = "c310ba8fe69cce7793954a7f1778b65a86b06690215a504751e12b7df3ab51f8",
19-
strip_prefix = "rules_sass-1.32.13",
18+
sha256 = "80d3e70ab5a8d59494aa9e3a7e4722f9f9a6fe98d1497be6bfa0b9e106b1ea54",
19+
strip_prefix = "rules_sass-1.34.1",
2020
urls = [
21-
"https://github.com/bazelbuild/rules_sass/archive/1.32.13.zip",
22-
"https://mirror.bazel.build/github.com/bazelbuild/rules_sass/archive/1.32.13.zip",
21+
"https://github.com/bazelbuild/rules_sass/archive/1.34.1.zip",
22+
"https://mirror.bazel.build/github.com/bazelbuild/rules_sass/archive/1.34.1.zip",
2323
],
2424
)
2525

‎package.json

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"@types/googlemaps": "^3.43.1",
6464
"@types/youtube": "^0.0.42",
6565
"core-js-bundle": "^3.8.2",
66-
"material-components-web": "^12.0.0-canary.00b5899dc.0",
66+
"material-components-web": "12.0.0-canary.08db3d737.0",
6767
"rxjs": "^6.5.3",
6868
"rxjs-tslint-rules": "^4.33.1",
6969
"systemjs": "0.19.43",
@@ -95,53 +95,53 @@
9595
"@bazel/terser": "3.5.0",
9696
"@bazel/typescript": "3.5.0",
9797
"@firebase/app-types": "^0.6.1",
98-
"@material/animation": "^12.0.0-canary.00b5899dc.0",
99-
"@material/auto-init": "^12.0.0-canary.00b5899dc.0",
100-
"@material/banner": "^12.0.0-canary.00b5899dc.0",
101-
"@material/base": "^12.0.0-canary.00b5899dc.0",
102-
"@material/button": "^12.0.0-canary.00b5899dc.0",
103-
"@material/card": "^12.0.0-canary.00b5899dc.0",
104-
"@material/checkbox": "^12.0.0-canary.00b5899dc.0",
105-
"@material/chips": "^12.0.0-canary.00b5899dc.0",
106-
"@material/circular-progress": "^12.0.0-canary.00b5899dc.0",
107-
"@material/data-table": "^12.0.0-canary.00b5899dc.0",
108-
"@material/density": "^12.0.0-canary.00b5899dc.0",
109-
"@material/dialog": "^12.0.0-canary.00b5899dc.0",
110-
"@material/dom": "^12.0.0-canary.00b5899dc.0",
111-
"@material/drawer": "^12.0.0-canary.00b5899dc.0",
112-
"@material/elevation": "^12.0.0-canary.00b5899dc.0",
113-
"@material/fab": "^12.0.0-canary.00b5899dc.0",
114-
"@material/feature-targeting": "^12.0.0-canary.00b5899dc.0",
115-
"@material/floating-label": "^12.0.0-canary.00b5899dc.0",
116-
"@material/form-field": "^12.0.0-canary.00b5899dc.0",
117-
"@material/icon-button": "^12.0.0-canary.00b5899dc.0",
118-
"@material/image-list": "^12.0.0-canary.00b5899dc.0",
119-
"@material/layout-grid": "^12.0.0-canary.00b5899dc.0",
120-
"@material/line-ripple": "^12.0.0-canary.00b5899dc.0",
121-
"@material/linear-progress": "^12.0.0-canary.00b5899dc.0",
122-
"@material/list": "^12.0.0-canary.00b5899dc.0",
123-
"@material/menu": "^12.0.0-canary.00b5899dc.0",
124-
"@material/menu-surface": "^12.0.0-canary.00b5899dc.0",
125-
"@material/notched-outline": "^12.0.0-canary.00b5899dc.0",
126-
"@material/radio": "^12.0.0-canary.00b5899dc.0",
127-
"@material/ripple": "^12.0.0-canary.00b5899dc.0",
128-
"@material/rtl": "^12.0.0-canary.00b5899dc.0",
129-
"@material/segmented-button": "^12.0.0-canary.00b5899dc.0",
130-
"@material/select": "^12.0.0-canary.00b5899dc.0",
131-
"@material/shape": "^12.0.0-canary.00b5899dc.0",
132-
"@material/slider": "^12.0.0-canary.00b5899dc.0",
133-
"@material/snackbar": "^12.0.0-canary.00b5899dc.0",
134-
"@material/switch": "^12.0.0-canary.00b5899dc.0",
135-
"@material/tab": "^12.0.0-canary.00b5899dc.0",
136-
"@material/tab-bar": "^12.0.0-canary.00b5899dc.0",
137-
"@material/tab-indicator": "^12.0.0-canary.00b5899dc.0",
138-
"@material/tab-scroller": "^12.0.0-canary.00b5899dc.0",
139-
"@material/textfield": "^12.0.0-canary.00b5899dc.0",
140-
"@material/theme": "^12.0.0-canary.00b5899dc.0",
141-
"@material/tooltip": "^12.0.0-canary.00b5899dc.0",
142-
"@material/top-app-bar": "^12.0.0-canary.00b5899dc.0",
143-
"@material/touch-target": "^12.0.0-canary.00b5899dc.0",
144-
"@material/typography": "^12.0.0-canary.00b5899dc.0",
98+
"@material/animation": "12.0.0-canary.08db3d737.0",
99+
"@material/auto-init": "12.0.0-canary.08db3d737.0",
100+
"@material/banner": "12.0.0-canary.08db3d737.0",
101+
"@material/base": "12.0.0-canary.08db3d737.0",
102+
"@material/button": "12.0.0-canary.08db3d737.0",
103+
"@material/card": "12.0.0-canary.08db3d737.0",
104+
"@material/checkbox": "12.0.0-canary.08db3d737.0",
105+
"@material/chips": "12.0.0-canary.08db3d737.0",
106+
"@material/circular-progress": "12.0.0-canary.08db3d737.0",
107+
"@material/data-table": "12.0.0-canary.08db3d737.0",
108+
"@material/density": "12.0.0-canary.08db3d737.0",
109+
"@material/dialog": "12.0.0-canary.08db3d737.0",
110+
"@material/dom": "12.0.0-canary.08db3d737.0",
111+
"@material/drawer": "12.0.0-canary.08db3d737.0",
112+
"@material/elevation": "12.0.0-canary.08db3d737.0",
113+
"@material/fab": "12.0.0-canary.08db3d737.0",
114+
"@material/feature-targeting": "12.0.0-canary.08db3d737.0",
115+
"@material/floating-label": "12.0.0-canary.08db3d737.0",
116+
"@material/form-field": "12.0.0-canary.08db3d737.0",
117+
"@material/icon-button": "12.0.0-canary.08db3d737.0",
118+
"@material/image-list": "12.0.0-canary.08db3d737.0",
119+
"@material/layout-grid": "12.0.0-canary.08db3d737.0",
120+
"@material/line-ripple": "12.0.0-canary.08db3d737.0",
121+
"@material/linear-progress": "12.0.0-canary.08db3d737.0",
122+
"@material/list": "12.0.0-canary.08db3d737.0",
123+
"@material/menu": "12.0.0-canary.08db3d737.0",
124+
"@material/menu-surface": "12.0.0-canary.08db3d737.0",
125+
"@material/notched-outline": "12.0.0-canary.08db3d737.0",
126+
"@material/radio": "12.0.0-canary.08db3d737.0",
127+
"@material/ripple": "12.0.0-canary.08db3d737.0",
128+
"@material/rtl": "12.0.0-canary.08db3d737.0",
129+
"@material/segmented-button": "12.0.0-canary.08db3d737.0",
130+
"@material/select": "12.0.0-canary.08db3d737.0",
131+
"@material/shape": "12.0.0-canary.08db3d737.0",
132+
"@material/slider": "12.0.0-canary.08db3d737.0",
133+
"@material/snackbar": "12.0.0-canary.08db3d737.0",
134+
"@material/switch": "12.0.0-canary.08db3d737.0",
135+
"@material/tab": "12.0.0-canary.08db3d737.0",
136+
"@material/tab-bar": "12.0.0-canary.08db3d737.0",
137+
"@material/tab-indicator": "12.0.0-canary.08db3d737.0",
138+
"@material/tab-scroller": "12.0.0-canary.08db3d737.0",
139+
"@material/textfield": "12.0.0-canary.08db3d737.0",
140+
"@material/theme": "12.0.0-canary.08db3d737.0",
141+
"@material/tooltip": "12.0.0-canary.08db3d737.0",
142+
"@material/top-app-bar": "12.0.0-canary.08db3d737.0",
143+
"@material/touch-target": "12.0.0-canary.08db3d737.0",
144+
"@material/typography": "12.0.0-canary.08db3d737.0",
145145
"@octokit/rest": "18.3.5",
146146
"@rollup/plugin-babel": "^5.3.0",
147147
"@rollup/plugin-commonjs": "^18.0.0",
@@ -210,7 +210,7 @@
210210
"rollup-plugin-commonjs": "^10.1.0",
211211
"rollup-plugin-node-resolve": "^5.2.0",
212212
"rollup-plugin-sourcemaps": "^0.6.3",
213-
"sass": "^1.32.13",
213+
"sass": "^1.34.1",
214214
"selenium-webdriver": "^3.6.0",
215215
"semver": "^7.3.4",
216216
"send": "^0.17.1",

‎packages.bzl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
33
# version for the placeholders.
44
ANGULAR_PACKAGE_VERSION = "^12.0.0 || ^13.0.0-0"
5-
MDC_PACKAGE_VERSION = "^12.0.0-canary.00b5899dc.0"
5+
MDC_PACKAGE_VERSION = "12.0.0-canary.08db3d737.0"
66
TSLIB_PACKAGE_VERSION = "^2.1.0"
77
RXJS_PACKAGE_VERSION = "^6.5.3"
88

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '@material/card' as mdc-card;
2+
@use '../../material/core/style/private';
23
@use '../mdc-helpers/mdc-helpers';
34

45
// TODO(jelbourn): move header and title-group styles to their own files.
@@ -43,7 +44,7 @@ $mat-card-default-padding: 16px !default;
4344
// When a subtitle is inside of a header, we want to move it up slightly to reduce the space with
4445
// the title, and add a margin bottom to create space underneath the header.
4546
.mat-mdc-card-subtitle {
46-
margin-top: -($mat-card-default-padding / 2);
47+
margin-top: -(private.private-div($mat-card-default-padding, 2));
4748
margin-bottom: $mat-card-default-padding;
4849
}
4950
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use '@material/textfield' as mdc-textfield;
33
@use 'sass:map';
44
@use '../../material/core/theming/theming';
5+
@use '../../material/core/style/private';
56
@use 'form-field-sizing';
67

78
// Mixin that sets the vertical spacing for the infix container of filled form fields.
@@ -54,7 +55,7 @@
5455
// cannot update the spacing to explicit numbers based on the density scale. Instead, we
5556
// determine the height reduction and equally subtract it from the default `top` and `bottom`
5657
// padding that is provided by the Material Design specification.
57-
$vertical-deduction: (mdc-textfield.$height - $height) / 2;
58+
$vertical-deduction: private.private-div(mdc-textfield.$height - $height, 2);
5859
// Map that describes the padding for form-fields with label.
5960
$with-label-padding: (
6061
top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction,
@@ -77,7 +78,7 @@
7778
// form-field because we do not know what type of form-field control is set up. Hence
7879
// we always use a fixed position for the label. This does not have any implications.
7980
.mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label {
80-
top: $height / 2;
81+
top: private.private-div($height, 2);
8182
}
8283

8384
// 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 & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use '../mdc-helpers/mdc-helpers';
33
@use '../../cdk/a11y';
44
@use '../../material/core/theming/palette';
5+
@use '../../material/core/style/private';
56
@use '@material/theme/theme-color' as mdc-theme-color;
67

78
// Width of the Material Design form-field select arrow.
@@ -65,8 +66,8 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
6566
content: '';
6667
width: 0;
6768
height: 0;
68-
border-left: ($mat-form-field-select-arrow-width / 2) solid transparent;
69-
border-right: ($mat-form-field-select-arrow-width / 2) solid transparent;
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;
7071
border-top: $mat-form-field-select-arrow-height solid;
7172
position: absolute;
7273
right: 0;

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use '@material/list' as mdc-list;
33
@use '../../material/core/style/variables';
44
@use '../../material/core/style/vendor-prefixes';
5+
@use '../../material/core/style/private';
56
@use '../../cdk/a11y';
67

78
$mat-select-arrow-size: 5px !default;
@@ -105,7 +106,8 @@ $scale: 0.75 !default;
105106
.mat-mdc-select-placeholder {
106107
// Delay the transition until the label has animated about a third of the way through, in
107108
// order to prevent the placeholder from overlapping for a split second.
108-
transition: color variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
109+
transition: color variables.$swift-ease-out-duration
110+
private.private-div(variables.$swift-ease-out-duration, 3)
109111
variables.$swift-ease-out-timing-function;
110112

111113
._mat-animation-noopable & {
@@ -137,7 +139,8 @@ $scale: 0.75 !default;
137139
}
138140

139141
.mdc-floating-label--float-above {
140-
max-width: calc(100% / #{$scale} - #{$mat-select-placeholder-arrow-space / $scale});
142+
$arrow-scale: private.private-div($mat-select-placeholder-arrow-space, $scale);
143+
max-width: calc(100% / #{$scale} - #{$arrow-scale});
141144
}
142145
}
143146
&.mat-form-field-appearance-outline {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
@use 'sass:map';
12
@use '@material/switch/deprecated' as mdc-switch with ($deprecated-suffix: '');
23
@use '@material/form-field' as mdc-form-field;
34
@use '@material/ripple' as mdc-ripple;
4-
@use 'sass:map';
55
@use '../mdc-helpers/mdc-helpers';
66
@use '../../material/core/style/layout-common';
7+
@use '../../material/core/style/private';
78
@use '../../cdk/a11y';
89

910
@include mdc-switch.without-ripple($query: mdc-helpers.$mat-base-styles-query);
@@ -87,7 +88,7 @@
8788
// Usually 1px would be enough, but MDC reduces the opacity on the
8889
// element so we need to make this a bit more prominent.
8990
outline: solid 2px;
90-
outline-offset: mdc-switch.$track-height / 2;
91+
outline-offset: private.private-div(mdc-switch.$track-height, 2);
9192
}
9293
}
9394
}

‎src/material/badge/_badge-theme.scss

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@use '../core/theming/theming';
88
@use '../core/typography/typography';
99
@use '../core/typography/typography-utils';
10+
@use '../core/style/private';
1011
@use '../../cdk/a11y';
1112

1213
$font-size: 12px;
@@ -25,13 +26,13 @@ $large-size: $default-size + 6;
2526

2627
&.mat-badge-above {
2728
.mat-badge-content {
28-
top: -$size / 2;
29+
top: private.private-div(-$size, 2);
2930
}
3031
}
3132

3233
&.mat-badge-below {
3334
.mat-badge-content {
34-
bottom: -$size / 2;
35+
bottom: private.private-div(-$size, 2);
3536
}
3637
}
3738

@@ -64,27 +65,27 @@ $large-size: $default-size + 6;
6465
&.mat-badge-overlap {
6566
&.mat-badge-before {
6667
.mat-badge-content {
67-
left: -$size / 2;
68+
left: private.private-div(-$size, 2);
6869
}
6970
}
7071

7172
[dir='rtl'] &.mat-badge-before {
7273
.mat-badge-content {
7374
left: auto;
74-
right: -$size / 2;
75+
right: private.private-div(-$size, 2);
7576
}
7677
}
7778

7879
&.mat-badge-after {
7980
.mat-badge-content {
80-
right: -$size / 2;
81+
right: private.private-div(-$size, 2);
8182
}
8283
}
8384

8485
[dir='rtl'] &.mat-badge-after {
8586
.mat-badge-content {
8687
right: auto;
87-
left: -$size / 2;
88+
left: private.private-div(-$size, 2);
8889
}
8990
}
9091
}

‎src/material/card/card.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ $header-size: 40px !default;
5959

6060
.mat-card-actions {
6161
@extend %mat-card-section-base;
62-
margin-left: -$padding / 2;
63-
margin-right: -$padding / 2;
62+
margin-left: private.private-div(-$padding, 2);
63+
margin-right: private.private-div(-$padding, 2);
6464
padding: 8px 0;
6565
}
6666

‎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: 2 / 15 * checkbox-common.$size !default;
21+
$_mark-stroke-size: private.private-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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use '../style/menu-common';
22
@use '../style/vendor-prefixes';
33
@use '../style/layout-common';
4+
@use '../style/private';
45
@use '../../../cdk/a11y';
56

67
.mat-option {
@@ -77,7 +78,7 @@
7778
}
7879

7980
.mat-option-pseudo-checkbox {
80-
$margin: menu-common.$side-padding / 2;
81+
$margin: private.private-div(menu-common.$side-padding, 2);
8182
margin-right: $margin;
8283

8384
[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
@@ -50,19 +50,20 @@ $_checkmark-size: checkbox-common.$size - (2 * $_padding);
5050
}
5151

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

6061
.mat-pseudo-checkbox-checked::after {
61-
top: (checkbox-common.$size / 2) - ($_checkmark-size / 4) -
62-
(checkbox-common.$size / 10) - checkbox-common.$border-width;
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;
6364
left: $_padding - checkbox-common.$border-width * 1.5;
6465
width: $_checkmark-size;
65-
height: ($_checkmark-size - checkbox-common.$border-width) / 2;
66+
height: private.private-div($_checkmark-size - checkbox-common.$border-width, 2);
6667
border-left: checkbox-common.$border-width solid currentColor;
6768
transform: rotate(-45deg);
6869
opacity: 1;

‎src/material/core/style/_menu-common.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use './private';
12
@use './list-common';
23
@use './layout-common';
34

@@ -63,7 +64,7 @@ $icon-margin: 16px !default;
6364

6465
// Renders a triangle to indicate that the menu item will open a sub-menu.
6566
&::after {
66-
$size: $triangle-height / 2;
67+
$size: private.private-div($triangle-height, 2);
6768

6869
width: 0;
6970
height: 0;

0 commit comments

Comments
 (0)