fix(material/core): reduce the number of module resolutions required …

…for the legacy theming bundle

Currently the legacy `material/theming` bundle is set up to forward a few top-level `.import` files. The problem is that those files have been auto-generated to be backwards-compatible even for deep imports which means that they have a lot of overlapping `@forward` and `@import` statements. This results in a significant increase in build times for consumers still using the old bundle.

These changes address the issue by introducing new shallower `*-legacy-index.scss` files which only export the APIs from the specific package and which in turn are re-exported through the top-level `material/theming` file. The change appears to cut the down the production build time on material.angular.io before the @use migration by more than 60%.

Fixes #22676.

src/material/_theming.scss

@@ -2,7 +2,42 @@
 // Note that we have to forward the `.import` files for backwards-compatibility with
 // projects that don't use Sass modules and include the `mat-`-prefixed mixins.
 
-@forward './core/color/all-color.import';
-@forward './core/density/private/all-density.import';
-@forward './core/theming/all-theme.import';
-@forward './core/typography/all-typography.import';
+@forward '../cdk/a11y/index.import';
+@forward '../cdk/overlay/index.import';
+@forward '../cdk/text-field/index.import';
+
+@forward './core/core-legacy-index';
+@forward './autocomplete/autocomplete-legacy-index';
+@forward './badge/badge-legacy-index';
+@forward './bottom-sheet/bottom-sheet-legacy-index';
+@forward './button-toggle/button-toggle-legacy-index';
+@forward './button/button-legacy-index';
+@forward './card/card-legacy-index';
+@forward './checkbox/checkbox-legacy-index';
+@forward './chips/chips-legacy-index';
+@forward './datepicker/datepicker-legacy-index';
+@forward './dialog/dialog-legacy-index';
+@forward './divider/divider-legacy-index';
+@forward './expansion/expansion-legacy-index';
+@forward './form-field/form-field-legacy-index';
+@forward './grid-list/grid-list-legacy-index';
+@forward './icon/icon-legacy-index';
+@forward './input/input-legacy-index';
+@forward './list/list-legacy-index';
+@forward './menu/menu-legacy-index';
+@forward './paginator/paginator-legacy-index';
+@forward './progress-bar/progress-bar-legacy-index';
+@forward './progress-spinner/progress-spinner-legacy-index';
+@forward './radio/radio-legacy-index';
+@forward './select/select-legacy-index';
+@forward './sidenav/sidenav-legacy-index';
+@forward './slide-toggle/slide-toggle-legacy-index';
+@forward './slider/slider-legacy-index';
+@forward './snack-bar/snack-bar-legacy-index';
+@forward './sort/sort-legacy-index';
+@forward './stepper/stepper-legacy-index';
+@forward './table/table-legacy-index';
+@forward './tabs/tabs-legacy-index';
+@forward './toolbar/toolbar-legacy-index';
+@forward './tooltip/tooltip-legacy-index';
+@forward './tree/tree-legacy-index';

src/material/autocomplete/_autocomplete-legacy-index.scss

@@ -0,0 +1,2 @@
+@forward 'autocomplete-theme' hide color, theme, typography;
+@forward 'autocomplete-theme' as mat-autocomplete-* hide mat-autocomplete-density;

src/material/autocomplete/_autocomplete-theme.import.scss

@@ -1,7 +1,6 @@
 @forward '../core/style/private.import';
 @forward '../core/theming/theming.import';
-@forward 'autocomplete-theme' hide color, theme, typography;
-@forward 'autocomplete-theme' as mat-autocomplete-* hide mat-autocomplete-density;
+@forward './autocomplete-legacy-index';
 
 @import '../core/style/private';
 @import '../core/theming/theming';

src/material/badge/_badge-legacy-index.scss

@@ -0,0 +1,3 @@
+@forward 'badge-theme' hide $default-size, $font-size, $font-weight, $large-size, $small-size,
+color, theme, typography;
+@forward 'badge-theme' as mat-badge-* hide mat-badge-density, mat-badge-size;

src/material/badge/_badge-theme.import.scss

@@ -1,9 +1,7 @@
 @forward '../core/theming/theming.import';
 @forward '../core/typography/typography-utils.import';
 @forward '../../cdk/a11y/index.import';
-@forward 'badge-theme' hide $default-size, $font-size, $font-weight, $large-size, $small-size,
-color, theme, typography;
-@forward 'badge-theme' as mat-badge-* hide mat-badge-density, mat-badge-size;
+@forward './badge-legacy-index';
 
 @import '../core/theming/palette';
 @import '../core/theming/theming';

src/material/bottom-sheet/_bottom-sheet-legacy-index.scss

@@ -0,0 +1,2 @@
+@forward 'bottom-sheet-theme' hide color, theme, typography;
+@forward 'bottom-sheet-theme' as mat-bottom-sheet-* hide mat-bottom-sheet-density;

src/material/bottom-sheet/_bottom-sheet-theme.import.scss

@@ -1,8 +1,7 @@
 @forward '../core/style/private.import';
 @forward '../core/theming/theming.import';
 @forward '../core/typography/typography-utils.import';
-@forward 'bottom-sheet-theme' hide color, theme, typography;
-@forward 'bottom-sheet-theme' as mat-bottom-sheet-* hide mat-bottom-sheet-density;
+@forward './bottom-sheet-legacy-index';
 
 @import '../core/style/private';
 @import '../core/typography/typography-utils';

src/material/button-toggle/_button-toggle-legacy-index.scss

@@ -0,0 +1,2 @@
+@forward 'button-toggle-variables' as mat-button-toggle-*;
+@forward 'button-toggle-theme' as mat-button-toggle-*;

src/material/button-toggle/_button-toggle-theme.import.scss

@@ -1,10 +1,9 @@
 @forward '../core/style/private.import';
 @forward '../core/theming/theming.import';
 @forward '../core/density/private/compatibility.import';
-@forward 'button-toggle-variables' as mat-button-toggle-*;
 @forward '../../cdk/a11y/index.import';
 @forward '../core/typography/typography-utils.import';
-@forward 'button-toggle-theme' as mat-button-toggle-*;
+@forward './button-toggle-legacy-index';
 
 @import '../../cdk/a11y';
 @import '../core/style/private';

src/material/button/_button-base.import.scss

@@ -1,19 +1,6 @@
 @forward '../core/style/private.import';
 @forward '../core/style/button-common.import';
-@forward 'button-base' as mat-* hide $mat-border-radius, $mat-button-border-radius,
-$mat-button-line-height, $mat-button-size, $mat-focus-transition, $mat-line-height, $mat-margin,
-$mat-min-width, $mat-padding, mat-base;
-@forward 'button-base' as mat-button-* hide $mat-button-button-border-radius,
-$mat-button-button-line-height, $mat-button-button-size, $mat-button-fab-border-radius,
-$mat-button-fab-padding, $mat-button-fab-size, $mat-button-mini-fab-padding,
-$mat-button-mini-fab-size, $mat-button-stroked-button-border-width,
-$mat-button-stroked-button-line-height, $mat-button-stroked-button-padding, mat-button-fab,
-mat-button-raised-button;
-@forward 'button-base' as mat-icon-* hide $mat-icon-border-radius, $mat-icon-fab-border-radius,
-$mat-icon-fab-padding, $mat-icon-fab-size, $mat-icon-focus-transition, $mat-icon-line-height,
-$mat-icon-margin, $mat-icon-min-width, $mat-icon-mini-fab-padding, $mat-icon-mini-fab-size,
-$mat-icon-padding, $mat-icon-stroked-button-border-width, $mat-icon-stroked-button-line-height,
-$mat-icon-stroked-button-padding, mat-icon-base, mat-icon-fab, mat-icon-raised-button;
+@forward './button-legacy-index';
 
 @import '../core/style/variables';
 @import '../core/style/elevation';

src/material/button/_button-legacy-index.scss

@@ -0,0 +1,19 @@
+@forward 'button-theme' hide color, theme, typography;
+@forward 'button-theme' as mat-button-* hide $mat-button-ripple-opacity, mat-button-density,
+mat-button-focus-overlay-color, mat-button-ripple-background, mat-button-ripple-color,
+mat-button-theme-property;
+
+@forward 'button-base' as mat-* hide $mat-border-radius, $mat-button-border-radius,
+$mat-button-line-height, $mat-button-size, $mat-focus-transition, $mat-line-height, $mat-margin,
+$mat-min-width, $mat-padding, mat-base;
+@forward 'button-base' as mat-button-* hide $mat-button-button-border-radius,
+$mat-button-button-line-height, $mat-button-button-size, $mat-button-fab-border-radius,
+$mat-button-fab-padding, $mat-button-fab-size, $mat-button-mini-fab-padding,
+$mat-button-mini-fab-size, $mat-button-stroked-button-border-width,
+$mat-button-stroked-button-line-height, $mat-button-stroked-button-padding, mat-button-fab,
+mat-button-raised-button;
+@forward 'button-base' as mat-icon-* hide $mat-icon-border-radius, $mat-icon-fab-border-radius,
+$mat-icon-fab-padding, $mat-icon-fab-size, $mat-icon-focus-transition, $mat-icon-line-height,
+$mat-icon-margin, $mat-icon-min-width, $mat-icon-mini-fab-padding, $mat-icon-mini-fab-size,
+$mat-icon-padding, $mat-icon-stroked-button-border-width, $mat-icon-stroked-button-line-height,
+$mat-icon-stroked-button-padding, mat-icon-base, mat-icon-fab, mat-icon-raised-button;

src/material/button/_button-theme.import.scss

@@ -1,10 +1,7 @@
 @forward '../core/theming/theming.import';
 @forward '../core/style/private.import';
 @forward '../core/typography/typography-utils.import';
-@forward 'button-theme' hide color, theme, typography;
-@forward 'button-theme' as mat-button-* hide $mat-button-ripple-opacity, mat-button-density,
-mat-button-focus-overlay-color, mat-button-ripple-background, mat-button-ripple-color,
-mat-button-theme-property;
+@forward './button-legacy-index';
 
 @import '../core/theming/theming';
 @import '../core/style/private';

src/material/card/_card-legacy-index.scss

@@ -0,0 +1,2 @@
+@forward 'card-theme' hide color, theme, typography;
+@forward 'card-theme' as mat-card-* hide mat-card-density;

src/material/card/_card-theme.import.scss

@@ -1,8 +1,7 @@
 @forward '../core/theming/theming.import';
 @forward '../core/style/private.import';
 @forward '../core/typography/typography-utils.import';
-@forward 'card-theme' hide color, theme, typography;
-@forward 'card-theme' as mat-card-* hide mat-card-density;
+@forward './card-legacy-index';
 
 @import '../core/theming/palette';
 @import '../core/theming/theming';

src/material/checkbox/_checkbox-legacy-index.scss

@@ -0,0 +1,2 @@
+@forward 'checkbox-theme' hide color, theme, typography;
+@forward 'checkbox-theme' as mat-checkbox-* hide mat-checkbox-density;

src/material/checkbox/_checkbox-theme.import.scss

@@ -1,7 +1,6 @@
 @forward '../core/theming/theming.import';
 @forward '../core/typography/typography-utils.import';
-@forward 'checkbox-theme' hide color, theme, typography;
-@forward 'checkbox-theme' as mat-checkbox-* hide mat-checkbox-density;
+@forward './checkbox-legacy-index';
 
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';

src/material/chips/_chips-legacy-index.scss

@@ -0,0 +1,6 @@
+@forward 'chips-theme' hide $chip-remove-font-size, color, theme, typography;
+@forward 'chips-theme' as mat-* hide mat-chip-element-color, mat-chip-theme-color, mat-color,
+mat-density, mat-ripple-background, mat-theme, mat-typography;
+@forward 'chips-theme' as mat-chips-* hide $mat-chips-chip-remove-font-size,
+mat-chips-chip-element-color, mat-chips-chip-theme-color, mat-chips-density,
+mat-chips-ripple-background;

src/material/chips/_chips-theme.import.scss

@@ -1,12 +1,7 @@
 @forward '../core/style/private.import';
 @forward '../core/theming/theming.import';
 @forward '../core/typography/typography-utils.import';
-@forward 'chips-theme' hide $chip-remove-font-size, color, theme, typography;
-@forward 'chips-theme' as mat-* hide mat-chip-element-color, mat-chip-theme-color, mat-color,
-mat-density, mat-ripple-background, mat-theme, mat-typography;
-@forward 'chips-theme' as mat-chips-* hide $mat-chips-chip-remove-font-size,
-mat-chips-chip-element-color, mat-chips-chip-theme-color, mat-chips-density,
-mat-chips-ripple-background;
+@forward './chips-legacy-index';
 
 @import '../core/style/private';
 @import '../core/theming/palette';

src/material/core/_core-legacy-index.scss

@@ -0,0 +1,18 @@
+@forward 'core' hide core;
+@forward 'core-theme' hide color, theme;
+@forward 'core' as mat-* hide mat-mdc-core, mat-mdc-strong-focus-indicators-positioning;
+@forward 'core-theme' as mat-* hide mat-color, mat-theme;
+@forward 'core' as mat-core-* hide mat-core-mdc-core,
+mat-core-mdc-strong-focus-indicators-positioning;
+@forward 'core-theme' as mat-core-*;
+
+@forward './theming/all-theme';
+@forward './color/color-legacy-index';
+@forward './density/private/density-legacy-index';
+@forward './focus-indicators/focus-indicators-legacy-index';
+@forward './option/option-legacy-index';
+@forward './ripple/ripple-legacy-index';
+@forward './selection/pseudo-checkbox/pseudo-checkbox-legacy-index';
+@forward './style/style-legacy-index';
+@forward './theming/theming-legacy-index';
+@forward './typography/typography-legacy-index';

src/material/core/_core.import.scss

@@ -41,13 +41,7 @@
 @forward '../sort/sort-theme.import';
 @forward '../tabs/tabs-theme.import';
 @forward 'typography/all-typography';
-@forward 'core' hide core;
-@forward 'core-theme' hide color, theme;
-@forward 'core' as mat-* hide mat-mdc-core, mat-mdc-strong-focus-indicators-positioning;
-@forward 'core-theme' as mat-* hide mat-color, mat-theme;
-@forward 'core' as mat-core-* hide mat-core-mdc-core,
-mat-core-mdc-strong-focus-indicators-positioning;
-@forward 'core-theme' as mat-core-*;
+@forward './core-legacy-index';
 
 @import '../../cdk/overlay';
 @import '../../cdk/a11y';

src/material/core/color/_all-color.import.scss

@@ -47,7 +47,7 @@
 @forward '../core' as mat-core-* hide mat-core-core;
 @forward '../core-theme' as mat-core-*;
 @forward '../theming/all-theme';
-@forward 'all-color';
+@forward './color-legacy-index';
 
 @import '../theming/all-theme';
 @import '../theming/theming';

src/material/core/color/_color-legacy-index.scss

@@ -0,0 +1 @@
+@forward 'all-color';

src/material/core/density/private/_all-density.import.scss

@@ -5,7 +5,7 @@
 @forward '../../../tree/tree-theme.import';
 @forward '../../../paginator/paginator-theme.import';
 @forward '../../../form-field/form-field-theme.import';
-@forward 'all-density' hide all-component-densities;
+@forward './density-legacy-index';
 
 @import '../../theming/theming';
 @import '../../../expansion/expansion-theme';

src/material/core/density/private/_compatibility.import.scss

@@ -1,4 +1 @@
-@forward 'compatibility' hide $private-density-generate-at-root, $private-density-generate-styles,
-private-density-legacy-compatibility, private-density-prop-value;
-@forward 'compatibility' as mat-* hide $mat-default-scale, $mat-interval, $mat-maximum-scale,
-$mat-minimum-scale, $mat-supported-scales;
+@forward './density-legacy-index';

src/material/core/density/private/_density-legacy-index.scss

@@ -0,0 +1,5 @@
+@forward 'all-density' hide all-component-densities;
+@forward 'compatibility' hide $private-density-generate-at-root, $private-density-generate-styles,
+private-density-legacy-compatibility, private-density-prop-value;
+@forward 'compatibility' as mat-* hide $mat-default-scale, $mat-interval, $mat-maximum-scale,
+$mat-minimum-scale, $mat-supported-scales;

src/material/core/focus-indicators/_focus-indicators-legacy-index.scss

@@ -0,0 +1,5 @@
+@forward 'focus-indicators' hide private-strong-focus-indicators-positioning,
+strong-focus-indicators;
+@forward 'focus-indicators-theme' hide color, theme;
+@forward 'focus-indicators' as mat-*;
+@forward 'focus-indicators-theme' as mat-strong-focus-indicators-*;

src/material/core/focus-indicators/_focus-indicators.import.scss

@@ -12,11 +12,7 @@ $mat-white-6-opacity, $mat-white-87-opacity;
 @forward '../density/private/compatibility' as mat-*;
 @forward '../theming/theming' as mat-*;
 @forward '../style/layout-common' as mat-*;
-@forward 'focus-indicators' hide private-strong-focus-indicators-positioning,
-strong-focus-indicators;
-@forward 'focus-indicators-theme' hide color, theme;
-@forward 'focus-indicators' as mat-*;
-@forward 'focus-indicators-theme' as mat-strong-focus-indicators-*;
+@forward './focus-indicators-legacy-index';
 
 @import '../theming/theming';
 @import '../style/layout-common';

src/material/core/option/_optgroup-theme.import.scss

@@ -19,8 +19,7 @@ mat-line-typography-level;
 @forward '../typography/typography-utils' as mat-typography-* hide mat-typography-font-family,
 mat-typography-font-size, mat-typography-font-weight, mat-typography-height,
 mat-typography-letter-spacing;
-@forward 'optgroup-theme' hide color, theme, typography;
-@forward 'optgroup-theme' as mat-optgroup-* hide mat-optgroup-density;
+@forward './option-legacy-index';
 
 @import '../theming/palette';
 @import '../theming/theming';

src/material/core/option/_option-legacy-index.scss

@@ -0,0 +1,5 @@
+@forward 'option-theme' hide color, theme, typography;
+@forward 'option-theme' as mat-option-* hide mat-option-density;
+
+@forward 'optgroup-theme' hide color, theme, typography;
+@forward 'optgroup-theme' as mat-optgroup-* hide mat-optgroup-density;

src/material/core/option/_option-theme.import.scss

@@ -19,8 +19,7 @@ mat-line-typography-level;
 @forward '../typography/typography-utils' as mat-typography-* hide mat-typography-font-family,
 mat-typography-font-size, mat-typography-font-weight, mat-typography-height,
 mat-typography-letter-spacing;
-@forward 'option-theme' hide color, theme, typography;
-@forward 'option-theme' as mat-option-* hide mat-option-density;
+@forward './option-legacy-index';
 
 @import '../theming/palette';
 @import '../theming/theming';

src/material/core/ripple/_ripple-legacy-index.scss

@@ -0,0 +1,3 @@
+@forward 'ripple' as mat-* hide $mat-color-opacity;
+@forward 'ripple' as mat-ripple-* hide mat-ripple-ripple;
+@forward 'ripple-theme' as mat-ripple-*;

src/material/core/ripple/_ripple.import.scss

@@ -12,9 +12,7 @@ $mat-white-6-opacity, $mat-white-87-opacity;
 @forward '../density/private/compatibility' as mat-*;
 @forward '../theming/theming' as mat-*;
 @forward '../../../cdk/a11y/index.import';
-@forward 'ripple' as mat-* hide $mat-color-opacity;
-@forward 'ripple' as mat-ripple-* hide mat-ripple-ripple;
-@forward 'ripple-theme' as mat-ripple-*;
+@forward './ripple-legacy-index';
 
 @import '../theming/theming';
 @import '../../../cdk/a11y';

src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-legacy-index.scss

@@ -0,0 +1,2 @@
+@forward 'pseudo-checkbox-theme' hide color, theme, typography;
+@forward 'pseudo-checkbox-theme' as mat-pseudo-checkbox-* hide mat-pseudo-checkbox-density;

src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.import.scss

@@ -11,7 +11,6 @@ $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-whi
 $mat-white-6-opacity, $mat-white-87-opacity;
 @forward '../../density/private/compatibility' as mat-*;
 @forward '../../theming/theming' as mat-*;
-@forward 'pseudo-checkbox-theme' hide color, theme, typography;
-@forward 'pseudo-checkbox-theme' as mat-pseudo-checkbox-* hide mat-pseudo-checkbox-density;
+@forward './pseudo-checkbox-legacy-index';
 
 @import '../../theming/theming';

src/material/core/style/_button-common.import.scss

@@ -1,4 +1,3 @@
-@forward 'vendor-prefixes';
-@forward 'button-common' as mat-button-*;
+@forward './style-legacy-index';
 
 @import './vendor-prefixes';

src/material/core/style/_checkbox-common.import.scss

@@ -1,11 +1,3 @@
-@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function,
-$linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall;
-@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in,
-$mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration,
-$mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out,
-$mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear,
-$mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer,
-$mat-z-index-fab;
-@forward 'checkbox-common' as mat-checkbox-*;
+@forward './style-legacy-index';
 
 @import './variables';

src/material/core/style/_elevation.import.scss

@@ -1,17 +1,3 @@
-@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function,
-$linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall;
-@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in,
-$mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration,
-$mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out,
-$mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear,
-$mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer,
-$mat-z-index-fab;
-@forward 'elevation' hide $color, $opacity, $prefix, $transition-duration,
-$transition-timing-function, elevation, overridable-elevation, elevation-transition,
-private-transition-property-value;
-@forward 'elevation' as mat-* hide $mat-color, $mat-opacity, $mat-prefix, $mat-transition-duration,
-$mat-transition-timing-function, mat-get-ambient-map, mat-get-penumbra-map, mat-get-umbra-map;
-@forward 'elevation' as mat-elevation-* hide mat-elevation-elevation, mat-elevation-get-ambient-map,
-mat-elevation-get-penumbra-map, mat-elevation-get-umbra-map, mat-elevation-overridable-elevation;
+@forward './style-legacy-index';
 
 @import 'variables';

src/material/core/style/_form-common.import.scss

@@ -11,6 +11,6 @@ $mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-whi
 $mat-white-6-opacity, $mat-white-87-opacity;
 @forward '../density/private/compatibility' as mat-*;
 @forward '../theming/theming' as mat-*;
-@forward 'form-common' as mat-*;
+@forward './style-legacy-index';
 
 @import '../theming/theming';

src/material/core/style/_layout-common.import.scss

@@ -1 +1 @@
-@forward 'layout-common' as mat-*;
+@forward './style-legacy-index';

src/material/core/style/_list-common.import.scss

@@ -1,2 +1 @@
-@forward 'list-common' as mat-* hide mat-base, mat-wrapper-base;
-@forward 'list-common' as mat-line-* hide mat-line-normalize-text, mat-line-truncate-line;
+@forward './style-legacy-index';