perf(material-experimental/mdc-table): reduce bundle size (#24309)

Uses a mixin from MDC that excludes some styles we don't need in order to reduce the bundle size. This shaves off ~3.3kb from the bundle and base component styles. (cherry picked from commit ea6fdb9)
angular · Feb 17, 2022 · bd3f39f · bd3f39f
1 parent f6eaa7c
commit bd3f39f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/src/material-experimental/mdc-table/_table-theme.scss b/src/material-experimental/mdc-table/_table-theme.scss
@@ -15,8 +15,6 @@
   $orig-row-hover-fill-color: mdc-data-table-theme.$row-hover-fill-color;
   $orig-header-row-text-color: mdc-data-table-theme.$header-row-text-color;
   $orig-row-text-color: mdc-data-table-theme.$row-text-color;
-  $orig-sort-icon-color: mdc-data-table-theme.$sort-icon-color;
-  $orig-sort-icon-active-color: mdc-data-table-theme.$sort-icon-active-color;
   $orig-stroke-color: mdc-data-table-theme.$stroke-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
@@ -25,12 +23,9 @@
     mdc-data-table-theme.$row-hover-fill-color: rgba(mdc-theme-color.prop-value(on-surface), 0.04);
     mdc-data-table-theme.$header-row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
     mdc-data-table-theme.$row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
-    mdc-data-table-theme.$sort-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
-    mdc-data-table-theme.$sort-icon-active-color:
-        rgba(mdc-theme-color.prop-value(on-surface), 0.87);
     mdc-data-table-theme.$stroke-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12);
 
-    @include mdc-data-table.core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-data-table.table-styles($query: mdc-helpers.$mat-theme-styles-query);
   }
 
   // Restore original values of MDC global variables.
@@ -39,8 +34,6 @@
   mdc-data-table-theme.$row-hover-fill-color: $orig-row-hover-fill-color;
   mdc-data-table-theme.$header-row-text-color: $orig-header-row-text-color;
   mdc-data-table-theme.$row-text-color: $orig-row-text-color;
-  mdc-data-table-theme.$sort-icon-color: $orig-sort-icon-color;
-  mdc-data-table-theme.$sort-icon-active-color: $orig-sort-icon-active-color;
   mdc-data-table-theme.$stroke-color: $orig-stroke-color;
 
   .mat-mdc-table {
@@ -53,7 +46,7 @@
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-data-table.core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-data-table.table-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 

diff --git a/src/material-experimental/mdc-table/table.scss b/src/material-experimental/mdc-table/table.scss
@@ -3,8 +3,11 @@
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/table/table-flex-styles';
 
-@include mdc-data-table.core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include table-flex-styles.private-table-flex-styles();
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-data-table.table-styles(
+    $query: mdc-helpers.$mat-base-styles-without-animation-query);
+  @include table-flex-styles.private-table-flex-styles();
+}
 
 .mat-mdc-table-sticky {
   // Note that the table can either set this class or an inline style to make something sticky.