Skip to content

Commit bd3f39f

Browse files
crisbetoandrewseguin
authored andcommitted
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)
1 parent f6eaa7c commit bd3f39f

File tree

2 files changed

+7
-11
lines changed

2 files changed

+7
-11
lines changed

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@
1515
$orig-row-hover-fill-color: mdc-data-table-theme.$row-hover-fill-color;
1616
$orig-header-row-text-color: mdc-data-table-theme.$header-row-text-color;
1717
$orig-row-text-color: mdc-data-table-theme.$row-text-color;
18-
$orig-sort-icon-color: mdc-data-table-theme.$sort-icon-color;
19-
$orig-sort-icon-active-color: mdc-data-table-theme.$sort-icon-active-color;
2018
$orig-stroke-color: mdc-data-table-theme.$stroke-color;
2119

2220
@include mdc-helpers.mat-using-mdc-theme($config) {
@@ -25,12 +23,9 @@
2523
mdc-data-table-theme.$row-hover-fill-color: rgba(mdc-theme-color.prop-value(on-surface), 0.04);
2624
mdc-data-table-theme.$header-row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
2725
mdc-data-table-theme.$row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
28-
mdc-data-table-theme.$sort-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
29-
mdc-data-table-theme.$sort-icon-active-color:
30-
rgba(mdc-theme-color.prop-value(on-surface), 0.87);
3126
mdc-data-table-theme.$stroke-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12);
3227

33-
@include mdc-data-table.core-styles($query: mdc-helpers.$mat-theme-styles-query);
28+
@include mdc-data-table.table-styles($query: mdc-helpers.$mat-theme-styles-query);
3429
}
3530

3631
// Restore original values of MDC global variables.
@@ -39,8 +34,6 @@
3934
mdc-data-table-theme.$row-hover-fill-color: $orig-row-hover-fill-color;
4035
mdc-data-table-theme.$header-row-text-color: $orig-header-row-text-color;
4136
mdc-data-table-theme.$row-text-color: $orig-row-text-color;
42-
mdc-data-table-theme.$sort-icon-color: $orig-sort-icon-color;
43-
mdc-data-table-theme.$sort-icon-active-color: $orig-sort-icon-active-color;
4437
mdc-data-table-theme.$stroke-color: $orig-stroke-color;
4538

4639
.mat-mdc-table {
@@ -53,7 +46,7 @@
5346
$config: typography.private-typography-to-2018-config(
5447
theming.get-typography-config($config-or-theme));
5548
@include mdc-helpers.mat-using-mdc-typography($config) {
56-
@include mdc-data-table.core-styles($query: mdc-helpers.$mat-typography-styles-query);
49+
@include mdc-data-table.table-styles($query: mdc-helpers.$mat-typography-styles-query);
5750
}
5851
}
5952

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
@use '../mdc-helpers/mdc-helpers';
44
@use '../../material/table/table-flex-styles';
55

6-
@include mdc-data-table.core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
7-
@include table-flex-styles.private-table-flex-styles();
6+
@include mdc-helpers.disable-fallback-declarations {
7+
@include mdc-data-table.table-styles(
8+
$query: mdc-helpers.$mat-base-styles-without-animation-query);
9+
@include table-flex-styles.private-table-flex-styles();
10+
}
811

912
.mat-mdc-table-sticky {
1013
// Note that the table can either set this class or an inline style to make something sticky.

0 commit comments

Comments
 (0)