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)

Author: crisbeto

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",

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)
           ),
       ));
     }

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

@@ -5,7 +5,7 @@
     <div class="mat-mdc-checkbox-touch-target" (click)="_onClick()"></div>
     <input #nativeCheckbox
            type="checkbox"
-           [ngClass]="_classes"
+           class="mdc-checkbox__native-control"
            [attr.aria-checked]="_getAriaChecked()"
            [attr.aria-label]="ariaLabel || null"
            [attr.aria-labelledby]="ariaLabelledby"

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

@@ -1,4 +1,4 @@
-@use '@material/checkbox' as mdc-checkbox;
+@use '@material/checkbox/checkbox' as mdc-checkbox;
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '@material/ripple' as mdc-ripple;
@@ -9,8 +9,10 @@
 @use '../../material/core/style/layout-common';
 @use '../../material/core/style/vendor-prefixes';
 
-@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-base-styles-query);
-@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-checkbox.static-styles($query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
+}
 
 // Apply base styles to the MDC ripple to adjust appearance for state changes (hover, focus, press)
 @mixin _ripple-base-styles() {
@@ -27,7 +29,23 @@
   .mdc-checkbox {
     // MDC theme styles also include structural styles so we have to include the theme at least
     // once here. The values will be overwritten by our own theme file afterwards.
-    @include mdc-checkbox-theme.theme-styles(mdc-checkbox-theme.$light-theme);
+    @include mdc-helpers.disable-fallback-declarations {
+      @include mdc-checkbox-theme.theme-styles(map.merge(mdc-checkbox-theme.$light-theme, (
+        // Exclude all of the ripple-related styles.
+        selected-focus-state-layer-color: null,
+        selected-focus-state-layer-opacity: null,
+        selected-hover-state-layer-color: null,
+        selected-hover-state-layer-opacity: null,
+        selected-pressed-state-layer-color: null,
+        selected-pressed-state-layer-opacity: null,
+        unselected-focus-state-layer-color: null,
+        unselected-focus-state-layer-opacity: null,
+        unselected-hover-state-layer-color: null,
+        unselected-hover-state-layer-opacity: null,
+        unselected-pressed-state-layer-color: null,
+        unselected-pressed-state-layer-opacity: null,
+      )));
+    }
 
     // The MDC checkbox styles related to the hover state are intertwined with the MDC ripple
     // styles. We currently don't use the MDC ripple due to size concerns, therefore we need to

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

@@ -126,6 +126,7 @@ export class MatCheckbox
   }
   set checked(checked: BooleanInput) {
     this._checked = coerceBooleanProperty(checked);
+    this._changeDetectorRef.markForCheck();
   }
   private _checked = false;
 
@@ -192,9 +193,6 @@ export class MatCheckbox
   /** The `MDCCheckboxFoundation` instance for this checkbox. */
   _checkboxFoundation: MDCCheckboxFoundation;
 
-  /** The set of classes that should be applied to the native input. */
-  _classes: {[key: string]: boolean} = {'mdc-checkbox__native-control': true};
-
   /** ControlValueAccessor onChange */
   private _cvaOnChange = (_: boolean) => {};
 
@@ -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.
    *

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],
 })