Skip to content

Commit 1ce3e5e

Browse files
crisbetocrisbeto
committed
perf(material-experimental/mdc-checkbox): reduce bundle size (#24256)
Reduces the bundle size of the MDC-based checkbox by: * Excluding the ripple styles since we weren't using them. * Disabling CSS variable fallbacks. * Using the non-deprecated `static-styles` mixin instead of `core-styles`. I've also reworked the checkbox not to depend on `@angular/common`. This likely won't have an effect on bundles since most apps include it, but we were barely using it. These changes reduced the base component styles by about 14kb and the dev app theme styles by 4kb. (cherry picked from commit 84d90c6)
1 parent 152c60b commit 1ce3e5e

File tree

6 files changed

+31
-30
lines changed

6 files changed

+31
-30
lines changed

‎src/material-experimental/mdc-checkbox/BUILD.bazel‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ ng_module(
2525
"//src/material-experimental/mdc-core",
2626
"//src/material/checkbox",
2727
"@npm//@angular/animations",
28-
"@npm//@angular/common",
2928
"@npm//@angular/core",
3029
"@npm//@angular/forms",
3130
"@npm//@material/checkbox",

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

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,21 @@
1313

1414
// Mixin that includes the checkbox theme styles with a given palette.
1515
// By default, the MDC checkbox always uses the `secondary` palette.
16-
@mixin private-checkbox-styles-with-color($color, $mdcColor) {
16+
@mixin private-checkbox-styles-with-color($color, $mdc-color) {
1717
$on-surface: mdc-theme-color.prop-value(on-surface);
1818
$border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color));
1919
$disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color));
2020

2121
@include mdc-checkbox-theme.theme((
22-
selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdcColor}),
22+
selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}),
2323

2424
selected-focus-icon-color: $color,
2525
selected-hover-icon-color: $color,
26-
selected-hover-state-layer-color: $color,
2726
selected-icon-color: $color,
2827
selected-pressed-icon-color: $color,
2928
unselected-focus-icon-color: $color,
3029
unselected-hover-icon-color: $color,
3130

32-
selected-focus-state-layer-color: $on-surface,
33-
selected-pressed-state-layer-color: $on-surface,
34-
unselected-focus-state-layer-color: $on-surface,
35-
unselected-hover-state-layer-color: $on-surface,
36-
unselected-pressed-state-layer-color: $on-surface,
37-
3831
disabled-selected-icon-color: $disabled-color,
3932
disabled-unselected-icon-color: $disabled-color,
4033

@@ -45,12 +38,12 @@
4538

4639
// Apply ripple colors to the MatRipple element and the MDC ripple element when the
4740
// checkbox is selected.
48-
@mixin _selected-ripple-colors($theme, $mdcColor) {
41+
@mixin _selected-ripple-colors($theme, $mdc-color) {
4942
.mdc-checkbox--selected ~ {
5043
.mat-mdc-checkbox-ripple {
5144
@include ripple-theme.color((
5245
foreground: (
53-
base: mdc-theme-color.prop-value($mdcColor)
46+
base: mdc-theme-color.prop-value($mdc-color)
5447
),
5548
));
5649
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="mat-mdc-checkbox-touch-target" (click)="_onClick()"></div>
66
<input #nativeCheckbox
77
type="checkbox"
8-
[ngClass]="_classes"
8+
class="mdc-checkbox__native-control"
99
[attr.aria-checked]="_getAriaChecked()"
1010
[attr.aria-label]="ariaLabel || null"
1111
[attr.aria-labelledby]="ariaLabelledby"

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use '@material/checkbox' as mdc-checkbox;
1+
@use '@material/checkbox/checkbox' as mdc-checkbox;
22
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
33
@use '@material/form-field' as mdc-form-field;
44
@use '@material/ripple' as mdc-ripple;
@@ -9,8 +9,10 @@
99
@use '../../material/core/style/layout-common';
1010
@use '../../material/core/style/vendor-prefixes';
1111

12-
@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-base-styles-query);
13-
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
12+
@include mdc-helpers.disable-fallback-declarations {
13+
@include mdc-checkbox.static-styles($query: mdc-helpers.$mat-base-styles-query);
14+
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
15+
}
1416

1517
// Apply base styles to the MDC ripple to adjust appearance for state changes (hover, focus, press)
1618
@mixin _ripple-base-styles() {
@@ -27,7 +29,23 @@
2729
.mdc-checkbox {
2830
// MDC theme styles also include structural styles so we have to include the theme at least
2931
// once here. The values will be overwritten by our own theme file afterwards.
30-
@include mdc-checkbox-theme.theme-styles(mdc-checkbox-theme.$light-theme);
32+
@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+
)));
48+
}
3149

3250
// The MDC checkbox styles related to the hover state are intertwined with the MDC ripple
3351
// styles. We currently don't use the MDC ripple due to size concerns, therefore we need to

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ export class MatCheckbox
126126
}
127127
set checked(checked: BooleanInput) {
128128
this._checked = coerceBooleanProperty(checked);
129+
this._changeDetectorRef.markForCheck();
129130
}
130131
private _checked = false;
131132

@@ -192,9 +193,6 @@ export class MatCheckbox
192193
/** The `MDCCheckboxFoundation` instance for this checkbox. */
193194
_checkboxFoundation: MDCCheckboxFoundation;
194195

195-
/** The set of classes that should be applied to the native input. */
196-
_classes: {[key: string]: boolean} = {'mdc-checkbox__native-control': true};
197-
198196
/** ControlValueAccessor onChange */
199197
private _cvaOnChange = (_: boolean) => {};
200198

@@ -211,8 +209,8 @@ export class MatCheckbox
211209

212210
/** The `MDCCheckboxAdapter` instance for this checkbox. */
213211
private _checkboxAdapter: MDCCheckboxAdapter = {
214-
addClass: className => this._setClass(className, true),
215-
removeClass: className => this._setClass(className, false),
212+
addClass: className => this._nativeCheckbox.nativeElement.classList.add(className),
213+
removeClass: className => this._nativeCheckbox.nativeElement.classList.remove(className),
216214
forceLayout: () => this._checkbox.nativeElement.offsetWidth,
217215
hasNativeControl: () => !!this._nativeCheckbox,
218216
isAttachedToDOM: () => !!this._checkbox.nativeElement.parentNode,
@@ -371,12 +369,6 @@ export class MatCheckbox
371369
return this.indeterminate ? 'mixed' : 'false';
372370
}
373371

374-
/** Sets whether the given CSS class should be applied to the native input. */
375-
private _setClass(cssClass: string, active: boolean) {
376-
this._classes[cssClass] = active;
377-
this._changeDetectorRef.markForCheck();
378-
}
379-
380372
/**
381373
* Syncs the indeterminate value with the checkbox DOM node.
382374
*

‎src/material-experimental/mdc-checkbox/module.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,13 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {CommonModule} from '@angular/common';
109
import {NgModule} from '@angular/core';
1110
import {_MatCheckboxRequiredValidatorModule} from '@angular/material/checkbox';
1211
import {MatCommonModule, MatRippleModule} from '@angular/material-experimental/mdc-core';
1312
import {MatCheckbox} from './checkbox';
1413

1514
@NgModule({
16-
imports: [MatCommonModule, MatRippleModule, CommonModule, _MatCheckboxRequiredValidatorModule],
15+
imports: [MatCommonModule, MatRippleModule, _MatCheckboxRequiredValidatorModule],
1716
exports: [MatCheckbox, MatCommonModule, _MatCheckboxRequiredValidatorModule],
1817
declarations: [MatCheckbox],
1918
})

0 commit comments

Comments
 (0)