fix(material-experimental/theming): avoid re-emitting the same tokens…

… from the backwards-compatibility styles Currently the color variant backwards-compatibility styles emit all tokens, even though they were likely emitted already by the theme. This ends up increasing the theme size by about 50kb. These changes add a `emit-overrides-only` parameter to the token utilities and use it to only emit the palette-specific styles from the backwards-compatibility mixin.
angular · Mar 26, 2024 · 5a9918e · 5a9918e
1 parent d38798a
commit 5a9918e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 26 deletions.
diff --git a/src/material-experimental/theming/_color-api-back-compat.scss b/src/material-experimental/theming/_color-api-back-compat.scss
@@ -1,75 +1,85 @@
 @use '@angular/material' as mat;
 
+// We want to emit only the overrides, because the backwards compatibility styles are usually
+// emitted after all the tokens have been included once already. This allows us to save ~50kb
+// from the bundle.
+$_overrides-only: true;
+
 @mixin color-variant-styles($theme, $color-variant) {
+  $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only);
+
   // Some components use the secondary color rather than primary color for `.mat-primary`.
   // Those components should use the $secondary-color-variant.
-  $secondary-color-variant: if($color-variant == primary, secondary, $color-variant);
+  $secondary-options: (
+    color-variant: if($color-variant == primary, secondary, $color-variant),
+    emit-overrides-only: $_overrides-only
+  );
 
-  @include mat.option-color($theme, $color-variant: $secondary-color-variant);
-  @include mat.progress-spinner-color($theme, $color-variant: $color-variant);
-  @include mat.pseudo-checkbox-color($theme, $color-variant: $color-variant);
-  @include mat.stepper-color($theme, $color-variant: $color-variant);
+  @include mat.option-color($theme, $secondary-options...);
+  @include mat.progress-spinner-color($theme, $primary-options...);
+  @include mat.pseudo-checkbox-color($theme, $primary-options...);
+  @include mat.stepper-color($theme, $primary-options...);
 
   &.mat-icon {
-    @include mat.icon-color($theme, $color-variant: $color-variant);
+    @include mat.icon-color($theme, $primary-options...);
   }
 
   &.mat-mdc-checkbox {
-    @include mat.checkbox-color($theme, $color-variant: $color-variant);
+    @include mat.checkbox-color($theme, $primary-options...);
   }
 
   &.mat-mdc-slider {
-    @include mat.slider-color($theme, $color-variant: $color-variant);
+    @include mat.slider-color($theme, $primary-options...);
   }
 
   &.mat-mdc-tab-group,
   &.mat-mdc-tab-nav-bar {
-    @include mat.tabs-color($theme, $color-variant: $color-variant);
+    @include mat.tabs-color($theme, $primary-options...);
   }
 
   &.mat-mdc-slide-toggle {
-    @include mat.slide-toggle-color($theme, $color-variant: $color-variant);
+    @include mat.slide-toggle-color($theme, $primary-options...);
   }
 
   &.mat-mdc-form-field {
-    @include mat.select-color($theme, $color-variant: $color-variant);
+    @include mat.select-color($theme, $primary-options...);
   }
 
   &.mat-mdc-radio-button {
-    @include mat.radio-color($theme, $color-variant: $color-variant);
+    @include mat.radio-color($theme, $primary-options...);
   }
 
   &.mat-mdc-progress-bar {
-    @include mat.progress-bar-color($theme, $color-variant: $color-variant);
+    @include mat.progress-bar-color($theme, $primary-options...);
   }
 
   &.mat-mdc-form-field {
-    @include mat.form-field-color($theme, $color-variant: $color-variant);
+    @include mat.form-field-color($theme, $primary-options...);
   }
 
   &.mat-datepicker-content {
-    @include mat.datepicker-color($theme, $color-variant: $color-variant);
+    @include mat.datepicker-color($theme, $primary-options...);
   }
 
   &.mat-mdc-button-base {
-    @include mat.button-color($theme, $color-variant: $color-variant);
+    @include mat.button-color($theme, $primary-options...);
   }
 
   &.mat-mdc-standard-chip {
-    @include mat.chips-color($theme, $color-variant: $secondary-color-variant);
+    @include mat.chips-color($theme, $secondary-options...);
   }
 
   .mdc-list-item__start,
   .mdc-list-item__end {
-    @include mat.checkbox-color($theme, $color-variant: $color-variant);
-    @include mat.radio-color($theme, $color-variant: $color-variant);
+    @include mat.checkbox-color($theme, $primary-options...);
+    @include mat.radio-color($theme, $primary-options...);
   }
 
   // M3 dropped support for warn/error color FABs.
   @if $color-variant != error {
     &.mat-mdc-fab,
     &.mat-mdc-mini-fab {
-      @include mat.fab-color($theme, $color-variant: $color-variant);
+      @include mat.fab-color($theme, $primary-options...);
     }
   }
 }
@@ -79,20 +89,23 @@
     @include color-variant-styles($theme, primary);
   }
   .mat-badge {
-    @include mat.badge-color($theme, $color-variant: primary);
+    @include mat.badge-color($theme, $color-variant: primary,
+      $emit-overrides-only: $_overrides-only);
   }
 
   .mat-accent {
     @include color-variant-styles($theme, tertiary);
   }
   .mat-badge-accent {
-    @include mat.badge-color($theme, $color-variant: tertiary);
+    @include mat.badge-color($theme, $color-variant: tertiary,
+      $emit-overrides-only: $_overrides-only);
   }
 
   .mat-warn {
     @include color-variant-styles($theme, error);
   }
   .mat-badge-warn {
-    @include mat.badge-color($theme, $color-variant: error);
+    @include mat.badge-color($theme, $color-variant: error,
+      $emit-overrides-only: $_overrides-only);
   }
 }
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
@@ -185,16 +185,19 @@ $_component-prefix: null;
 /// @param {List} $prefix The component prefix to get the token values for.
 /// @param {ArgList} Any additional options
 ///   Currently the additional supported options are:
-//     - $color-variant (The color variant to use for the component)
+//     - $color-variant - The color variant to use for the component
+//     - $emit-overrides-only - Whether to emit *only* the overrides for the
+//                              specific color variant, or all color styles. Defaults to false.
 /// @throws If given options are invalid
 /// @return {Map} The token values for the requested component.
 @function get-tokens-for($tokens, $prefix, $options...) {
-  $options: sass-utils.validate-keyword-args($options, (color-variant));
+  $options: sass-utils.validate-keyword-args($options, (color-variant, emit-overrides-only));
   @if $tokens == () {
     @return ();
   }
   $values: map.get($tokens, $prefix);
   $color-variant: map.get($options, color-variant);
+  $emit-overrides-only: map.get($options, emit-overrides-only);
   @if $color-variant == null {
     @return $values;
   }
@@ -204,5 +207,5 @@ $_component-prefix: null;
       _supported-color-variants($tokens, $prefix)
     }#{'.'};
   }
-  @return map.merge($values, $overrides);
+  @return if($emit-overrides-only, $overrides, map.merge($values, $overrides));
 }