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

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.

Author: crisbeto

package.json

@@ -61,7 +61,7 @@
     "@types/google.maps": "^3.47.3",
     "@types/youtube": "^0.0.46",
     "core-js-bundle": "^3.20.3",
-    "material-components-web": "14.0.0-canary.c047f7c19.0",
+    "material-components-web": "14.0.0-canary.9f9d928b2.0",
     "rxjs": "^6.6.7",
     "rxjs-tslint-rules": "^4.34.8",
     "tslib": "^2.3.1",
@@ -93,53 +93,53 @@
     "@bazel/terser": "4.4.5",
     "@bazel/typescript": "4.4.5",
     "@firebase/app-types": "^0.7.0",
-    "@material/animation": "14.0.0-canary.c047f7c19.0",
-    "@material/auto-init": "14.0.0-canary.c047f7c19.0",
-    "@material/banner": "14.0.0-canary.c047f7c19.0",
-    "@material/base": "14.0.0-canary.c047f7c19.0",
-    "@material/button": "14.0.0-canary.c047f7c19.0",
-    "@material/card": "14.0.0-canary.c047f7c19.0",
-    "@material/checkbox": "14.0.0-canary.c047f7c19.0",
-    "@material/chips": "14.0.0-canary.c047f7c19.0",
-    "@material/circular-progress": "14.0.0-canary.c047f7c19.0",
-    "@material/data-table": "14.0.0-canary.c047f7c19.0",
-    "@material/density": "14.0.0-canary.c047f7c19.0",
-    "@material/dialog": "14.0.0-canary.c047f7c19.0",
-    "@material/dom": "14.0.0-canary.c047f7c19.0",
-    "@material/drawer": "14.0.0-canary.c047f7c19.0",
-    "@material/elevation": "14.0.0-canary.c047f7c19.0",
-    "@material/fab": "14.0.0-canary.c047f7c19.0",
-    "@material/feature-targeting": "14.0.0-canary.c047f7c19.0",
-    "@material/floating-label": "14.0.0-canary.c047f7c19.0",
-    "@material/form-field": "14.0.0-canary.c047f7c19.0",
-    "@material/icon-button": "14.0.0-canary.c047f7c19.0",
-    "@material/image-list": "14.0.0-canary.c047f7c19.0",
-    "@material/layout-grid": "14.0.0-canary.c047f7c19.0",
-    "@material/line-ripple": "14.0.0-canary.c047f7c19.0",
-    "@material/linear-progress": "14.0.0-canary.c047f7c19.0",
-    "@material/list": "14.0.0-canary.c047f7c19.0",
-    "@material/menu": "14.0.0-canary.c047f7c19.0",
-    "@material/menu-surface": "14.0.0-canary.c047f7c19.0",
-    "@material/notched-outline": "14.0.0-canary.c047f7c19.0",
-    "@material/radio": "14.0.0-canary.c047f7c19.0",
-    "@material/ripple": "14.0.0-canary.c047f7c19.0",
-    "@material/rtl": "14.0.0-canary.c047f7c19.0",
-    "@material/segmented-button": "14.0.0-canary.c047f7c19.0",
-    "@material/select": "14.0.0-canary.c047f7c19.0",
-    "@material/shape": "14.0.0-canary.c047f7c19.0",
-    "@material/slider": "14.0.0-canary.c047f7c19.0",
-    "@material/snackbar": "14.0.0-canary.c047f7c19.0",
-    "@material/switch": "14.0.0-canary.c047f7c19.0",
-    "@material/tab": "14.0.0-canary.c047f7c19.0",
-    "@material/tab-bar": "14.0.0-canary.c047f7c19.0",
-    "@material/tab-indicator": "14.0.0-canary.c047f7c19.0",
-    "@material/tab-scroller": "14.0.0-canary.c047f7c19.0",
-    "@material/textfield": "14.0.0-canary.c047f7c19.0",
-    "@material/theme": "14.0.0-canary.c047f7c19.0",
-    "@material/tooltip": "14.0.0-canary.c047f7c19.0",
-    "@material/top-app-bar": "14.0.0-canary.c047f7c19.0",
-    "@material/touch-target": "14.0.0-canary.c047f7c19.0",
-    "@material/typography": "14.0.0-canary.c047f7c19.0",
+    "@material/animation": "14.0.0-canary.9f9d928b2.0",
+    "@material/auto-init": "14.0.0-canary.9f9d928b2.0",
+    "@material/banner": "14.0.0-canary.9f9d928b2.0",
+    "@material/base": "14.0.0-canary.9f9d928b2.0",
+    "@material/button": "14.0.0-canary.9f9d928b2.0",
+    "@material/card": "14.0.0-canary.9f9d928b2.0",
+    "@material/checkbox": "14.0.0-canary.9f9d928b2.0",
+    "@material/chips": "14.0.0-canary.9f9d928b2.0",
+    "@material/circular-progress": "14.0.0-canary.9f9d928b2.0",
+    "@material/data-table": "14.0.0-canary.9f9d928b2.0",
+    "@material/density": "14.0.0-canary.9f9d928b2.0",
+    "@material/dialog": "14.0.0-canary.9f9d928b2.0",
+    "@material/dom": "14.0.0-canary.9f9d928b2.0",
+    "@material/drawer": "14.0.0-canary.9f9d928b2.0",
+    "@material/elevation": "14.0.0-canary.9f9d928b2.0",
+    "@material/fab": "14.0.0-canary.9f9d928b2.0",
+    "@material/feature-targeting": "14.0.0-canary.9f9d928b2.0",
+    "@material/floating-label": "14.0.0-canary.9f9d928b2.0",
+    "@material/form-field": "14.0.0-canary.9f9d928b2.0",
+    "@material/icon-button": "14.0.0-canary.9f9d928b2.0",
+    "@material/image-list": "14.0.0-canary.9f9d928b2.0",
+    "@material/layout-grid": "14.0.0-canary.9f9d928b2.0",
+    "@material/line-ripple": "14.0.0-canary.9f9d928b2.0",
+    "@material/linear-progress": "14.0.0-canary.9f9d928b2.0",
+    "@material/list": "14.0.0-canary.9f9d928b2.0",
+    "@material/menu": "14.0.0-canary.9f9d928b2.0",
+    "@material/menu-surface": "14.0.0-canary.9f9d928b2.0",
+    "@material/notched-outline": "14.0.0-canary.9f9d928b2.0",
+    "@material/radio": "14.0.0-canary.9f9d928b2.0",
+    "@material/ripple": "14.0.0-canary.9f9d928b2.0",
+    "@material/rtl": "14.0.0-canary.9f9d928b2.0",
+    "@material/segmented-button": "14.0.0-canary.9f9d928b2.0",
+    "@material/select": "14.0.0-canary.9f9d928b2.0",
+    "@material/shape": "14.0.0-canary.9f9d928b2.0",
+    "@material/slider": "14.0.0-canary.9f9d928b2.0",
+    "@material/snackbar": "14.0.0-canary.9f9d928b2.0",
+    "@material/switch": "14.0.0-canary.9f9d928b2.0",
+    "@material/tab": "14.0.0-canary.9f9d928b2.0",
+    "@material/tab-bar": "14.0.0-canary.9f9d928b2.0",
+    "@material/tab-indicator": "14.0.0-canary.9f9d928b2.0",
+    "@material/tab-scroller": "14.0.0-canary.9f9d928b2.0",
+    "@material/textfield": "14.0.0-canary.9f9d928b2.0",
+    "@material/theme": "14.0.0-canary.9f9d928b2.0",
+    "@material/tooltip": "14.0.0-canary.9f9d928b2.0",
+    "@material/top-app-bar": "14.0.0-canary.9f9d928b2.0",
+    "@material/touch-target": "14.0.0-canary.9f9d928b2.0",
+    "@material/typography": "14.0.0-canary.9f9d928b2.0",
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",

packages.bzl

@@ -2,7 +2,7 @@
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^13.0.0 || ^14.0.0-0"
-MDC_PACKAGE_VERSION = "14.0.0-canary.7d8ea4624.0"
+MDC_PACKAGE_VERSION = "14.0.0-canary.9f9d928b2.0"
 TSLIB_PACKAGE_VERSION = "^2.3.0"
 RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"
 

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

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

@@ -3,8 +3,10 @@
 @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.