perf(multiple): don't emit fallbacks for CSS variables in experimenta…

…l components (#23912) Reworks the theming for the MDC-based components so that it doesn't emit fallback values for CSS variables. This trims ~27kb from the dev app theme. Also wraps the structural styles of the MDC-based radio button and slide toggle who have been converted to the new MDC theming API. (cherry picked from commit 4350552)
angular · Nov 15, 2021 · e5c589d · e5c589d
1 parent f05b7b5
commit e5c589d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 14 deletions.
diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss
@@ -5,6 +5,7 @@
 @use '@material/feature-targeting' as mdc-feature-targeting;
 @use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/theme/css' as mdc-theme-css;
 @use 'sass:map';
 @use '../../material/core/theming/theming';
 @use '../../material/core/typography/typography';
@@ -169,7 +170,9 @@ $mat-typography-mdc-level-mappings: (
   );
 
   // Apply given rules.
-  @content;
+  @include disable-fallback-declarations {
+    @content;
+  }
 
   // Reset the original values.
   mdc-theme-color.$primary: $orig-primary;
@@ -196,8 +199,18 @@ $mat-typography-mdc-level-mappings: (
   }
 
   // Apply given rules.
-  @content;
+  @include disable-fallback-declarations {
+    @content;
+  }
 
   // Reset the original values.
   mdc-typography.$styles: $orig-mdc-typography-styles;
 }
+
+// Disables MDC's CSS custom property fallbacks for the specified mixin content.
+@mixin disable-fallback-declarations {
+  $previous-value: mdc-theme-css.$enable-fallback-declarations;
+  mdc-theme-css.$enable-fallback-declarations: false;
+  @content;
+  mdc-theme-css.$enable-fallback-declarations: $previous-value;
+}
diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss
@@ -6,18 +6,24 @@
 @use '../../cdk/a11y';
 @use '../../material/core/style/layout-common';
 
-@include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query);
+  @include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
+}
 
 .mat-mdc-radio-button {
   &:not(._mat-animation-noopable) {
-    @include mdc-radio.without-ripple($query: animation);
+    @include mdc-helpers.disable-fallback-declarations {
+      @include mdc-radio.without-ripple($query: animation);
+    }
   }
 
   .mdc-radio {
     // 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-radio-theme.theme-styles(mdc-radio-theme.$light-theme);
+    @include mdc-helpers.disable-fallback-declarations {
+      @include mdc-radio-theme.theme-styles(mdc-radio-theme.$light-theme);
+    }
   }
 
   // This is necessary because we do not depend on MDC's ripple, but have our own that should be
@@ -35,9 +41,11 @@
 
 // Element used to provide a larger tap target for users on touch devices.
 .mat-mdc-radio-touch-target {
-  @include mdc-touch-target.touch-target(
-    $set-width: true,
-    $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-helpers.disable-fallback-declarations {
+    @include mdc-touch-target.touch-target(
+      $set-width: true,
+      $query: mdc-helpers.$mat-base-styles-query);
+  }
 
   [dir='rtl'] & {
     left: 0;

diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
@@ -8,8 +8,10 @@
 @use '../../material/core/style/layout-common';
 @use '../../cdk/a11y';
 
-@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
-@include mdc-switch.static-styles-without-ripple;
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-switch.static-styles-without-ripple;
+}
 
 .mat-mdc-slide-toggle {
   display: inline-block;
@@ -20,7 +22,9 @@
   .mdc-switch {
     // 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-switch-theme.theme-styles(mdc-switch-theme.$light-theme);
+    @include mdc-helpers.disable-fallback-declarations {
+      @include mdc-switch-theme.theme-styles(mdc-switch-theme.$light-theme);
+    }
   }
 
   // The ripple needs extra specificity so the base ripple styling doesn't override its `position`.

diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss
@@ -10,8 +10,10 @@ $mat-tab-animation-duration: 500ms !default;
 
 // Combines the various structural styles we need for the tab group and tab nav bar.
 @mixin structural-styles {
-  @include mdc-tab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
-  @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-helpers.disable-fallback-declarations {
+    @include mdc-tab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-base-styles-query);
+  }
 
   .mat-mdc-tab-ripple {
     position: absolute;