From 2e5b6831aaf1f677b939c424ba5cf31f5df5801b Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 25 Jan 2022 17:22:11 +0100 Subject: [PATCH] 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 84d90c6aff8510f0f2c575cf8099e2833e2912ad) --- .../mdc-checkbox/BUILD.bazel | 1 - .../mdc-checkbox/_checkbox-theme.scss | 15 +++-------- .../mdc-checkbox/checkbox.html | 2 +- .../mdc-checkbox/checkbox.scss | 26 ++++++++++++++++--- .../mdc-checkbox/checkbox.ts | 14 +++------- .../mdc-checkbox/module.ts | 3 +-- 6 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/material-experimental/mdc-checkbox/BUILD.bazel b/src/material-experimental/mdc-checkbox/BUILD.bazel index 2a3a07b54bbd..212185b79367 100644 --- a/src/material-experimental/mdc-checkbox/BUILD.bazel +++ b/src/material-experimental/mdc-checkbox/BUILD.bazel @@ -25,7 +25,6 @@ ng_module( "//src/material-experimental/mdc-core", "//src/material/checkbox", "@npm//@angular/animations", - "@npm//@angular/common", "@npm//@angular/core", "@npm//@angular/forms", "@npm//@material/checkbox", diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss index df37eb68d705..d5a8cd8999bd 100644 --- a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss +++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss @@ -13,28 +13,21 @@ // Mixin that includes the checkbox theme styles with a given palette. // By default, the MDC checkbox always uses the `secondary` palette. -@mixin private-checkbox-styles-with-color($color, $mdcColor) { +@mixin private-checkbox-styles-with-color($color, $mdc-color) { $on-surface: mdc-theme-color.prop-value(on-surface); $border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color)); $disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color)); @include mdc-checkbox-theme.theme(( - selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdcColor}), + selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}), selected-focus-icon-color: $color, selected-hover-icon-color: $color, - selected-hover-state-layer-color: $color, selected-icon-color: $color, selected-pressed-icon-color: $color, unselected-focus-icon-color: $color, unselected-hover-icon-color: $color, - selected-focus-state-layer-color: $on-surface, - selected-pressed-state-layer-color: $on-surface, - unselected-focus-state-layer-color: $on-surface, - unselected-hover-state-layer-color: $on-surface, - unselected-pressed-state-layer-color: $on-surface, - disabled-selected-icon-color: $disabled-color, disabled-unselected-icon-color: $disabled-color, @@ -45,12 +38,12 @@ // Apply ripple colors to the MatRipple element and the MDC ripple element when the // checkbox is selected. -@mixin _selected-ripple-colors($theme, $mdcColor) { +@mixin _selected-ripple-colors($theme, $mdc-color) { .mdc-checkbox--selected ~ { .mat-mdc-checkbox-ripple { @include ripple-theme.color(( foreground: ( - base: mdc-theme-color.prop-value($mdcColor) + base: mdc-theme-color.prop-value($mdc-color) ), )); } diff --git a/src/material-experimental/mdc-checkbox/checkbox.html b/src/material-experimental/mdc-checkbox/checkbox.html index d435598c4b85..7e28c481479f 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.html +++ b/src/material-experimental/mdc-checkbox/checkbox.html @@ -5,7 +5,7 @@
{}; @@ -211,8 +209,8 @@ export class MatCheckbox /** The `MDCCheckboxAdapter` instance for this checkbox. */ private _checkboxAdapter: MDCCheckboxAdapter = { - addClass: className => this._setClass(className, true), - removeClass: className => this._setClass(className, false), + addClass: className => this._nativeCheckbox.nativeElement.classList.add(className), + removeClass: className => this._nativeCheckbox.nativeElement.classList.remove(className), forceLayout: () => this._checkbox.nativeElement.offsetWidth, hasNativeControl: () => !!this._nativeCheckbox, isAttachedToDOM: () => !!this._checkbox.nativeElement.parentNode, @@ -371,12 +369,6 @@ export class MatCheckbox return this.indeterminate ? 'mixed' : 'false'; } - /** Sets whether the given CSS class should be applied to the native input. */ - private _setClass(cssClass: string, active: boolean) { - this._classes[cssClass] = active; - this._changeDetectorRef.markForCheck(); - } - /** * Syncs the indeterminate value with the checkbox DOM node. * diff --git a/src/material-experimental/mdc-checkbox/module.ts b/src/material-experimental/mdc-checkbox/module.ts index 19685141b76a..8682b40d169c 100644 --- a/src/material-experimental/mdc-checkbox/module.ts +++ b/src/material-experimental/mdc-checkbox/module.ts @@ -6,14 +6,13 @@ * found in the LICENSE file at https://angular.io/license */ -import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {_MatCheckboxRequiredValidatorModule} from '@angular/material/checkbox'; import {MatCommonModule, MatRippleModule} from '@angular/material-experimental/mdc-core'; import {MatCheckbox} from './checkbox'; @NgModule({ - imports: [MatCommonModule, MatRippleModule, CommonModule, _MatCheckboxRequiredValidatorModule], + imports: [MatCommonModule, MatRippleModule, _MatCheckboxRequiredValidatorModule], exports: [MatCheckbox, MatCommonModule, _MatCheckboxRequiredValidatorModule], declarations: [MatCheckbox], })