Skip to content

Commit 734447b

Browse files
crisbetocrisbeto
committed
perf(material-experimental/mdc-list): reduce bundle size
Reduces the amount of CSS generated by the MDC-based list by: * Uses a similar approach to #24256 to reduce the amount of CSS for the internal checkbox. These changes reduce the styles even more, because we can exclude the hover/focus/pressed styles. This shaved off ~15kb. * Disabling CSS variable fallbacks. This shaved off another 1-2kb.
1 parent e7b7576 commit 734447b

8 files changed

+107
-77
lines changed

‎src/material-experimental/mdc-checkbox/_checkbox-private.scss

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@use 'sass:map';
2+
@use 'sass:color';
3+
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
4+
@use '@material/theme/theme-color' as mdc-theme-color;
5+
6+
// Configuration used to define the theme-related CSS variables.
7+
$private-checkbox-theme-config: map.merge(mdc-checkbox-theme.$light-theme, (
8+
// Exclude all of the ripple-related styles.
9+
selected-focus-state-layer-color: null,
10+
selected-focus-state-layer-opacity: null,
11+
selected-hover-state-layer-color: null,
12+
selected-hover-state-layer-opacity: null,
13+
selected-pressed-state-layer-color: null,
14+
selected-pressed-state-layer-opacity: null,
15+
unselected-focus-state-layer-color: null,
16+
unselected-focus-state-layer-opacity: null,
17+
unselected-hover-state-layer-color: null,
18+
unselected-hover-state-layer-opacity: null,
19+
unselected-pressed-state-layer-color: null,
20+
unselected-pressed-state-layer-opacity: null,
21+
));
22+
23+
// Mixin that includes the checkbox theme styles with a given palette.
24+
// By default, the MDC checkbox always uses the `secondary` palette.
25+
@mixin private-checkbox-styles-with-color($color, $mdc-color) {
26+
$on-surface: mdc-theme-color.prop-value(on-surface);
27+
$border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color));
28+
$disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color));
29+
30+
@include mdc-checkbox-theme.theme((
31+
selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}),
32+
33+
selected-focus-icon-color: $color,
34+
selected-hover-icon-color: $color,
35+
selected-icon-color: $color,
36+
selected-pressed-icon-color: $color,
37+
unselected-focus-icon-color: $color,
38+
unselected-hover-icon-color: $color,
39+
40+
disabled-selected-icon-color: $disabled-color,
41+
disabled-unselected-icon-color: $disabled-color,
42+
43+
unselected-icon-color: $border-color,
44+
unselected-pressed-icon-color: $border-color,
45+
));
46+
}

‎src/material-experimental/mdc-checkbox/_checkbox-theme.scss

+4-29
Original file line numberDiff line numberDiff line change
@@ -9,32 +9,7 @@
99
@use '../../material/core/typography/typography';
1010
@use '../../material/core/theming/theming';
1111
@use '../../material/core/ripple/ripple-theme';
12-
13-
14-
// Mixin that includes the checkbox theme styles with a given palette.
15-
// By default, the MDC checkbox always uses the `secondary` palette.
16-
@mixin private-checkbox-styles-with-color($color, $mdc-color) {
17-
$on-surface: mdc-theme-color.prop-value(on-surface);
18-
$border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color));
19-
$disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color));
20-
21-
@include mdc-checkbox-theme.theme((
22-
selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}),
23-
24-
selected-focus-icon-color: $color,
25-
selected-hover-icon-color: $color,
26-
selected-icon-color: $color,
27-
selected-pressed-icon-color: $color,
28-
unselected-focus-icon-color: $color,
29-
unselected-hover-icon-color: $color,
30-
31-
disabled-selected-icon-color: $disabled-color,
32-
disabled-unselected-icon-color: $disabled-color,
33-
34-
unselected-icon-color: $border-color,
35-
unselected-pressed-icon-color: $border-color,
36-
));
37-
}
12+
@use './checkbox-private';
3813

3914
// Apply ripple colors to the MatRipple element and the MDC ripple element when the
4015
// checkbox is selected.
@@ -77,17 +52,17 @@
7752
// class for accent and warn style, and applying the appropriate overrides below. Since we
7853
// don't use MDC's ripple, we also need to set the color for our replacement ripple.
7954
&.mat-primary {
80-
@include private-checkbox-styles-with-color($primary, primary);
55+
@include checkbox-private.private-checkbox-styles-with-color($primary, primary);
8156
@include _selected-ripple-colors($primary, primary);
8257
}
8358

8459
&.mat-accent {
85-
@include private-checkbox-styles-with-color($accent, secondary);
60+
@include checkbox-private.private-checkbox-styles-with-color($accent, secondary);
8661
@include _selected-ripple-colors($accent, secondary);
8762
}
8863

8964
&.mat-warn {
90-
@include private-checkbox-styles-with-color($warn, error);
65+
@include checkbox-private.private-checkbox-styles-with-color($warn, error);
9166
@include _selected-ripple-colors($warn, error);
9267
}
9368
}

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

+2-15
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@use '../mdc-helpers/mdc-helpers';
99
@use '../../material/core/style/layout-common';
1010
@use '../../material/core/style/vendor-prefixes';
11+
@use './checkbox-private';
1112

1213
@include mdc-helpers.disable-fallback-declarations {
1314
@include mdc-checkbox.static-styles($query: mdc-helpers.$mat-base-styles-query);
@@ -30,21 +31,7 @@
3031
// MDC theme styles also include structural styles so we have to include the theme at least
3132
// once here. The values will be overwritten by our own theme file afterwards.
3233
@include mdc-helpers.disable-fallback-declarations {
33-
@include mdc-checkbox-theme.theme-styles(map.merge(mdc-checkbox-theme.$light-theme, (
34-
// Exclude all of the ripple-related styles.
35-
selected-focus-state-layer-color: null,
36-
selected-focus-state-layer-opacity: null,
37-
selected-hover-state-layer-color: null,
38-
selected-hover-state-layer-opacity: null,
39-
selected-pressed-state-layer-color: null,
40-
selected-pressed-state-layer-opacity: null,
41-
unselected-focus-state-layer-color: null,
42-
unselected-focus-state-layer-opacity: null,
43-
unselected-hover-state-layer-color: null,
44-
unselected-hover-state-layer-opacity: null,
45-
unselected-pressed-state-layer-color: null,
46-
unselected-pressed-state-layer-opacity: null,
47-
)));
34+
@include mdc-checkbox-theme.theme-styles(checkbox-private.$private-checkbox-theme-config);
4835
}
4936

5037
// The MDC checkbox styles related to the hover state are intertwined with the MDC ripple

‎src/material-experimental/mdc-list/_list-option-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
@use '@material/checkbox' as mdc-checkbox;
2-
@use '../mdc-checkbox/checkbox-theme';
2+
@use '../mdc-checkbox/checkbox-private';
33
@use '../mdc-helpers/mdc-helpers';
44
@use './list-option-trailing-avatar-compat';
55

66
// Mixin that overrides the selected item and checkbox colors for list options. By
77
// default, the MDC list uses the `primary` color for list items. The MDC checkbox
88
// inside list options by default uses the `primary` color too.
9-
@mixin private-list-option-color-override($color, $mdcColor) {
9+
@mixin private-list-option-color-override($color, $mdc-color) {
1010
& .mdc-list-item__start, & .mdc-list-item__end {
11-
@include checkbox-theme.private-checkbox-styles-with-color($color, $mdcColor);
11+
@include checkbox-private.private-checkbox-styles-with-color($color, $mdc-color);
1212
}
1313
}
1414

‎src/material-experimental/mdc-list/_list-option-trailing-avatar-compat.scss

+18-13
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use '@material/density/functions' as density-functions;
44
@use '@material/list/evolution-mixins' as mdc-list;
55
@use '@material/list/evolution-variables' as mdc-list-variables;
6+
@use '../mdc-helpers/mdc-helpers';
67

78
// For compatibility with the non-MDC selection list, we support avatars that are
89
// shown at the end of the list option. This is not supported by the MDC list as the
@@ -15,19 +16,21 @@
1516
@mixin core-styles($query) {
1617
$feat-structure: feature-targeting.create-target($query, structure);
1718

18-
.mat-mdc-list-option-with-trailing-avatar {
19-
@include mdc-list.item-end-spacing(16px, $query: $query);
20-
@include mdc-list.item-end-size(40px, $query: $query);
19+
@include mdc-helpers.disable-fallback-declarations {
20+
.mat-mdc-list-option-with-trailing-avatar {
21+
@include mdc-list.item-end-spacing(16px, $query: $query);
22+
@include mdc-list.item-end-size(40px, $query: $query);
2123

22-
&.mdc-list-item--with-two-lines {
23-
.mdc-list-item__primary-text {
24-
@include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
24+
&.mdc-list-item--with-two-lines {
25+
.mdc-list-item__primary-text {
26+
@include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
27+
}
2528
}
26-
}
2729

28-
.mdc-list-item__end {
29-
@include feature-targeting.targets($feat-structure) {
30-
border-radius: 50%;
30+
.mdc-list-item__end {
31+
@include feature-targeting.targets($feat-structure) {
32+
border-radius: 50%;
33+
}
3134
}
3235
}
3336
}
@@ -46,8 +49,10 @@
4649
$property-name: height,
4750
);
4851

49-
.mat-mdc-list-option-with-trailing-avatar {
50-
@include mdc-list.one-line-item-height($one-line-tall-height);
51-
@include mdc-list.two-line-item-height($two-line-tall-height);
52+
@include mdc-helpers.disable-fallback-declarations {
53+
.mat-mdc-list-option-with-trailing-avatar {
54+
@include mdc-list.one-line-item-height($one-line-tall-height);
55+
@include mdc-list.two-line-item-height($two-line-tall-height);
56+
}
5257
}
5358
}

‎src/material-experimental/mdc-list/_list-theme.scss

+11-10
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,10 @@
1616
$accent: theming.get-color-from-palette(map.get($config, accent));
1717
$warn: theming.get-color-from-palette(map.get($config, warn));
1818

19-
// MDC's state styles are tied in with their ripple. Since we don't use the MDC
20-
// ripple, we need to add the hover, focus and selected states manually.
21-
@include interactive-list-theme.private-interactive-list-item-state-colors($config);
22-
2319
@include mdc-helpers.mat-using-mdc-theme($config) {
20+
// MDC's state styles are tied in with their ripple. Since we don't use the MDC
21+
// ripple, we need to add the hover, focus and selected states manually.
22+
@include interactive-list-theme.private-interactive-list-item-state-colors($config);
2423
@include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
2524

2625
.mat-mdc-list-option {
@@ -38,13 +37,15 @@
3837
@mixin density($config-or-theme) {
3938
$density-scale: theming.get-density-config($config-or-theme);
4039

41-
.mat-mdc-list-item {
42-
@include mdc-list.one-line-item-density($density-scale);
43-
@include mdc-list.two-line-item-density($density-scale);
44-
@include mdc-list.three-line-item-density($density-scale);
45-
}
40+
@include mdc-helpers.disable-fallback-declarations {
41+
.mat-mdc-list-item {
42+
@include mdc-list.one-line-item-density($density-scale);
43+
@include mdc-list.two-line-item-density($density-scale);
44+
@include mdc-list.three-line-item-density($density-scale);
45+
}
4646

47-
@include list-option-theme.private-list-option-density-styles($density-scale);
47+
@include list-option-theme.private-list-option-density-styles($density-scale);
48+
}
4849
}
4950

5051
@mixin typography($config-or-theme) {

‎src/material-experimental/mdc-list/list-option.scss

+20-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
@use '@material/checkbox' as mdc-checkbox;
1+
@use 'sass:map';
2+
@use '@material/checkbox/checkbox' as mdc-checkbox;
23
@use '@material/list/evolution-variables' as mdc-list-variables;
34
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
45
@use '../mdc-helpers/mdc-helpers';
56
@use '../../cdk/a11y';
67
@use './list-option-trailing-avatar-compat';
8+
@use '../mdc-checkbox/checkbox-private';
79

810
// For compatibility with the non-MDC list, we support avatars that are shown at the end
911
// of the list option. We create a class similar to MDC's `--trailing-icon` one.
@@ -12,19 +14,31 @@
1214
.mat-mdc-list-option {
1315
// The MDC-based list-option uses the MDC checkbox for the selection indicators.
1416
// We need to ensure that the checkbox styles are not included for the list-option.
15-
@include mdc-checkbox.without-ripple(
16-
$query: mdc-helpers.$mat-base-styles-without-animation-query);
17+
@include mdc-helpers.disable-fallback-declarations {
18+
@include mdc-checkbox.static-styles(
19+
$query: mdc-helpers.$mat-base-styles-without-animation-query);
1720

18-
&:not(._mat-animation-noopable) {
19-
@include mdc-checkbox.without-ripple($query: animation);
21+
&:not(._mat-animation-noopable) {
22+
@include mdc-checkbox.static-styles($query: animation);
23+
}
2024
}
2125

2226
// We can't use the MDC checkbox here directly, because this checkbox is purely
2327
// decorative and including the MDC one will bring in unnecessary JS.
2428
.mdc-checkbox {
29+
$config: map.merge(checkbox-private.$private-checkbox-theme-config, (
30+
// Since this checkbox isn't interactive, we can exclude the focus/hover/press styles.
31+
selected-focus-icon-color: null,
32+
selected-hover-icon-color: null,
33+
selected-pressed-icon-color: null,
34+
unselected-focus-icon-color: null,
35+
unselected-hover-icon-color: null,
36+
unselected-pressed-icon-color: null,
37+
));
38+
2539
// MDC theme styles also include structural styles so we have to include the theme at least
2640
// once here. The values will be overwritten by our own theme file afterwards.
27-
@include mdc-checkbox-theme.theme-styles(mdc-checkbox-theme.$light-theme);
41+
@include mdc-checkbox-theme.theme-styles($config);
2842
}
2943

3044
// The internal checkbox is purely decorative, but because it's an `input`, the user can still

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
@use '../mdc-helpers/mdc-helpers';
33
@use '../../material/core/style/layout-common';
44

5-
@include mdc-list.without-ripple($query: mdc-helpers.$mat-base-styles-query);
5+
@include mdc-helpers.disable-fallback-declarations {
6+
@include mdc-list.without-ripple($query: mdc-helpers.$mat-base-styles-query);
7+
}
68

79
// MDC expects the list element to be a `<ul>`, since we use `<mat-list>` instead we need to
810
// explicitly set `display: block`

0 commit comments

Comments
 (0)