angular · annieyw · Apr 7, 2021 · Mar 30, 2021
diff --git a/src/cdk/BUILD.bazel b/src/cdk/BUILD.bazel
@@ -17,37 +17,29 @@ ts_library(
 # to make it easier for developers to import these styles without needing to know about
 # deep imports in the release output. Note that this is done for backwards compatibility
 # with the Gulp release output. TODO(devversion): consider removing this in the future.
-rerootedStyles = [file for target in CDK_ENTRYPOINTS_WITH_STYLES for file in [
-    [
-        "_%s.scss" % target,
-        target,
-    ],
-    [
-        "_%s.import.scss" % target,
-        target,
-    ],
+prebuiltStyles = [file for target in CDK_ENTRYPOINTS_WITH_STYLES for file in [
     [
         "%s-prebuilt.css" % target,
         target,
     ],
 ]]
 
-# Create genrules which re-root stylesheets from secondary entry-points.
+# Create genrules that output prebuilt stylesheets for secondary entry-points with styles.
 [genrule(
-    name = "%s_rerooted" % file,
+    name = "%s_prebuilt" % file,
     srcs = ["//src/cdk/%s:%s" % (target, file)],
     outs = [file],
     cmd = "cp $< $@",
 ) for [
     file,
     target,
-] in rerootedStyles]
+] in prebuiltStyles]
 
 # List of targets which generate the re-rooted stylesheet files.
-rerootedStyleTargets = ["%s_rerooted" % file for [
+prebuiltStyleTargets = ["%s_prebuilt" % file for [
     file,
     _,
-] in rerootedStyles]
+] in prebuiltStyles]
 
 # Makes the public Sass API bundle available in the release output as `angular/cdk`.
 sass_library(
@@ -59,7 +51,7 @@ sass_library(
 ng_package(
     name = "npm_package",
     srcs = ["package.json"],
-    data = [":sass_index"] + rerootedStyleTargets + CDK_SCSS_LIBS,
+    data = [":sass_index"] + prebuiltStyleTargets + CDK_SCSS_LIBS,
     entry_point = ":public-api.ts",
     nested_packages = [
         "//src/cdk/schematics:npm_package",

diff --git a/src/cdk/_index.scss b/src/cdk/_index.scss
@@ -1,7 +1,7 @@
-@forward './overlay/overlay' show overlay, $overlay-container-z-index, $overlay-z-index,
+@forward './overlay' show overlay, $overlay-container-z-index, $overlay-z-index,
   $overlay-backdrop-z-index, $overlay-backdrop-color;
-@forward './a11y/a11y' show a11y-visually-hidden, high-contrast;
-@forward './text-field/text-field' show text-field-autosize, text-field-autofill,
+@forward './a11y' show a11y-visually-hidden, high-contrast;
+@forward './text-field' show text-field-autosize, text-field-autofill,
   text-field-autofill-color,
   // `text-field` is deprecated, but we have to export it
   // here in order for the theming API schematic to work.

diff --git a/src/cdk/a11y/_a11y.import.scss b/src/cdk/a11y/_a11y.import.scss
diff --git a/src/cdk/a11y/_index.import.scss b/src/cdk/a11y/_index.import.scss
@@ -0,0 +1,2 @@
+@forward 'index' hide a11y, high-contrast;
+@forward 'index' as cdk-* hide cdk-optionally-nest-content;
diff --git a/src/cdk/a11y/_a11y.scss → src/cdk/a11y/_index.scss b/src/cdk/a11y/_a11y.scss → src/cdk/a11y/_index.scss
diff --git a/src/cdk/a11y/a11y-prebuilt.scss b/src/cdk/a11y/a11y-prebuilt.scss
@@ -1,3 +1,3 @@
-@use './a11y';
+@use './index' as a11y;
 
 @include a11y.a11y-visually-hidden();
diff --git a/src/cdk/overlay/_overlay-deprecated.scss → src/cdk/overlay/_index-deprecated.scss b/src/cdk/overlay/_overlay-deprecated.scss → src/cdk/overlay/_index-deprecated.scss
@@ -1,4 +1,4 @@
-@use './overlay';
+@use './index' as overlay;
 
 // @deprecated Use `$overlay-container-z-index`.
 $z-index-overlay-container: overlay.$overlay-container-z-index;

diff --git a/src/cdk/overlay/_index.import.scss b/src/cdk/overlay/_index.import.scss
@@ -0,0 +1,13 @@
+@forward '../a11y' as cdk-*;
+@forward 'index' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop,
+  $z-index-overlay-container, overlay;
+@forward 'index' as cdk-* hide $cdk-backdrop-animation-duration,
+  $cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background;
+@forward 'index' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration,
+  $cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay,
+  $cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container,
+  cdk-overlay-overlay;
+@forward './index-deprecated' as cdk-*;
+@forward './index-deprecated' as cdk-overlay-*;
+
+@import '../a11y';
diff --git a/src/cdk/overlay/_overlay.scss → src/cdk/overlay/_index.scss b/src/cdk/overlay/_overlay.scss → src/cdk/overlay/_index.scss
diff --git a/src/cdk/overlay/_overlay.import.scss b/src/cdk/overlay/_overlay.import.scss
diff --git a/src/cdk/overlay/overlay-prebuilt.scss b/src/cdk/overlay/overlay-prebuilt.scss
@@ -1,3 +1,3 @@
-@use './overlay';
+@use './index' as overlay;
 
 @include overlay.overlay();
diff --git a/src/cdk/text-field/_index.import.scss b/src/cdk/text-field/_index.import.scss
@@ -0,0 +1,2 @@
+@forward 'index' as cdk-* show cdk-text-field-autofill, cdk-text-field-autofill-color,
+cdk-text-field-autosize, cdk-text-field;
diff --git a/src/cdk/text-field/_text-field.scss → src/cdk/text-field/_index.scss b/src/cdk/text-field/_text-field.scss → src/cdk/text-field/_index.scss
diff --git a/src/cdk/text-field/_text-field.import.scss b/src/cdk/text-field/_text-field.import.scss
diff --git a/src/cdk/text-field/text-field-prebuilt.scss b/src/cdk/text-field/text-field-prebuilt.scss
@@ -1,4 +1,4 @@
-@use 'text-field';
+@use 'index' as text-field;
 
 @include text-field.text-field-autosize();
 @include text-field.text-field-autofill();
diff --git a/src/dev-app/input/input-demo.scss b/src/dev-app/input/input-demo.scss
@@ -1,4 +1,4 @@
-@use '../../cdk/text-field/text-field';
+@use '../../cdk/text-field';
 
 .demo-basic {
   padding: 0;

diff --git a/src/dev-app/mdc-input/mdc-input-demo.scss b/src/dev-app/mdc-input/mdc-input-demo.scss
@@ -1,4 +1,4 @@
-@use '../../cdk/text-field/text-field';
+@use '../../cdk/text-field';
 
 .demo-basic {
   padding: 0;

diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.scss b/src/material-experimental/mdc-autocomplete/autocomplete.scss
@@ -1,6 +1,6 @@
 @use '@material/menu-surface/mixins' as mdc-menu-surface;
 @use '@material/list/mixins' as mdc-list;
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 @use '../mdc-helpers/mdc-helpers';
 
 @include mdc-menu-surface.core-styles($query: structure);

diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss
@@ -1,7 +1,7 @@
 @use '@material/button/button' as mdc-button;
 @use '@material/button/variables' as mdc-button-variables;
 @use '../mdc-helpers/mdc-helpers';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 @use '_button-base';
 
 

diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/src/material-experimental/mdc-checkbox/checkbox.scss
@@ -3,7 +3,7 @@
 @use '@material/form-field' as mdc-form-field;
 @use '@material/ripple' as mdc-ripple;
 @use 'sass:map';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/_layout-common.scss';
 

diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss
@@ -1,7 +1,7 @@
 @use '@material/chips/deprecated' as mdc-chips;
 @use '@material/ripple' as mdc-ripple;
 @use '../../material/core/style/layout-common';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 @use '../mdc-helpers/mdc-helpers';
 
 @include mdc-chips.without-ripple($query: mdc-helpers.$mat-base-styles-query);

diff --git a/src/material-experimental/mdc-core/option/option.scss b/src/material-experimental/mdc-core/option/option.scss
@@ -2,7 +2,7 @@
 @use 'sass:map';
 @use '../../mdc-helpers/mdc-helpers';
 @use '../../../material/core/style/vendor-prefixes';
-@use '../../../cdk/a11y/a11y';
+@use '../../../cdk/a11y';
 @use '../../../material/core/style/layout-common';
 
 .mat-mdc-option {

diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss
@@ -1,7 +1,7 @@
 @use '@material/dialog' as mdc-dialog;
 @use '../mdc-helpers/mdc-helpers';
 @use './mdc-dialog-structure-overrides';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 
 // Dialog content max height. This has been copied from the standard dialog
 // and is needed to make the dialog content scrollable.

diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.import.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.import.scss
@@ -1,9 +1,9 @@
 @forward '../../material/core/theming/theming.import';
-@forward '../../cdk/a11y/a11y.import';
+@forward '../../cdk/a11y/index.import';
 @forward 'form-field-native-select' hide private-form-field-native-select,
 private-form-field-native-select-color;
 @forward 'form-field-native-select' as mat-mdc-* hide $mat-mdc-mat-form-field-select-arrow-height,
 $mat-mdc-mat-form-field-select-arrow-width, $mat-mdc-mat-form-field-select-horizontal-end-padding;
 
 @import '../../material/core/theming/theming';
-@import '../../cdk/a11y/a11y';
+@import '../../cdk/a11y';
diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../../material/core/theming/theming';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 @use '../../material/core/theming/palette';
 
 // Width of the Material Design form-field select arrow.

diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.import.scss b/src/material-experimental/mdc-form-field/_form-field-theme.import.scss
@@ -20,7 +20,7 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward 'form-field-density' as mat-mdc-*;
 @forward 'form-field-subscript' as mat-mdc-*;
 @forward 'form-field-focus-overlay' as mat-mdc-*;
-@forward '../../cdk/a11y/a11y.import';
+@forward '../../cdk/a11y/index.import';
 @forward 'form-field-theme' hide color, density, theme, typography;
 @forward 'form-field-theme' as mat-mdc-form-field-* hide mat-mdc-form-field-text-field-color-styles;
 

diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.scss
@@ -1,6 +1,6 @@
 @forward 'form-field-sizing';
-@forward '../../cdk/a11y/a11y.import';
+@forward '../../cdk/a11y/index.import';
 @forward 'mdc-text-field-structure-overrides' as mat-mdc-*;
 
 @import 'form-field-sizing';
-@import '../../cdk/a11y/a11y';
+@import '../../cdk/a11y';
diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss
@@ -1,5 +1,5 @@
 @use 'form-field-sizing';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 
 // Mixin that can be included to override the default MDC text-field
 // styles to fit our needs. See individual comments for context on why

diff --git a/src/material-experimental/mdc-menu/menu.scss b/src/material-experimental/mdc-menu/menu.scss
@@ -3,7 +3,7 @@
 @use '@material/list' as mdc-list;
 @use '../../material/core/style/menu-common';
 @use '../../material/core/style/button-common';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 @use '../mdc-helpers/mdc-helpers';
 
 @include mdc-menu-surface.core-styles($query: structure);

diff --git a/src/material-experimental/mdc-paginator/paginator.scss b/src/material-experimental/mdc-paginator/paginator.scss
@@ -1,5 +1,5 @@
 @use '../mdc-form-field/form-field-theme';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 
 $padding: 0 8px;
 $page-size-margin-right: 8px;

diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss
@@ -2,7 +2,7 @@
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '../mdc-helpers/mdc-helpers';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 @use '../../material/core/style/layout-common';
 
 @include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-query);

diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
@@ -2,7 +2,7 @@
 @use '@material/list' as mdc-list;
 @use '../../material/core/style/variables';
 @use '../../material/core/style/vendor-prefixes';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;

diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
@@ -4,7 +4,7 @@
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/layout-common';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 
 @include mdc-switch.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 @include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);

diff --git a/src/material-experimental/mdc-slider/slider.scss b/src/material-experimental/mdc-slider/slider.scss
@@ -1,7 +1,7 @@
 // TODO: disabled until we implement the new MDC slider.
 // @use '@material/slider' as mdc-slider;
 @use '../mdc-helpers/mdc-helpers';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 
 $mat-slider-min-size: 128px !default;
 $mat-slider-horizontal-margin: 8px !default;

diff --git a/src/material-experimental/mdc-snack-bar/snack-bar-container.scss b/src/material-experimental/mdc-snack-bar/snack-bar-container.scss
@@ -1,6 +1,6 @@
 @use '@material/snackbar' as mdc-snackbar;
 @use '../mdc-helpers/mdc-helpers';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 
 @include mdc-snackbar.core-styles($query: mdc-helpers.$mat-base-styles-query);
 

diff --git a/src/material-experimental/mdc-tabs/_tabs-common.import.scss b/src/material-experimental/mdc-tabs/_tabs-common.import.scss
@@ -2,13 +2,13 @@
 @forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
 @forward '../../material/core/style/vendor-prefixes.import';
-@forward '../../cdk/a11y/a11y.import';
+@forward '../../cdk/a11y/index.import';
 @forward 'tabs-common' hide paginated-tab-header, paginated-tab-header-container,
 paginated-tab-header-item-wrapper, tab, tab-ripple;
 @forward 'tabs-common' as mat-mdc-* hide $mat-mdc-mat-tab-animation-duration;
 
 @import '../../material/core/style/variables';
 @import '../../material/core/style/private';
 @import '../../material/core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@import '../../cdk/a11y';
 @import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss
@@ -4,7 +4,7 @@
 @use '../../material/core/style/variables';
 @use '../../material/core/style/private';
 @use '../../material/core/style/vendor-prefixes';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 @use '../mdc-helpers/mdc-helpers';
 
 $mat-tab-animation-duration: 500ms !default;

diff --git a/src/material-experimental/popover-edit/_popover-edit-theme.scss b/src/material-experimental/popover-edit/_popover-edit-theme.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 @use '../../material/core/style/variables';
 @use '../../material/core/style/private';
 @use '../../material/core/theming/palette';

diff --git a/src/material-experimental/popover-edit/_popover-edit.import.scss b/src/material-experimental/popover-edit/_popover-edit.import.scss
@@ -1,11 +1,11 @@
 @forward '../../material/core/style/private.import';
 @forward '../../material/core/theming/theming.import';
-@forward '../../cdk/a11y/a11y.import';
+@forward '../../cdk/a11y/index.import';
 @forward '../../material/core/typography/typography-utils.import';
 @forward 'popover-edit-theme' hide color, density, theme, typography;
 @forward 'popover-edit-theme' as mat-popover-edit-*;
 
-@import '../../cdk/a11y/a11y';
+@import '../../cdk/a11y';
 @import '../../material/core/style/variables';
 @import '../../material/core/style/private';
 @import '../../material/core/theming/palette';

diff --git a/src/material/autocomplete/autocomplete.scss b/src/material/autocomplete/autocomplete.scss
@@ -1,5 +1,5 @@
 @use '../core/style/menu-common';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 
 // The max-height of the panel, currently matching mat-select value.
 $panel-max-height: 256px !default;

diff --git a/src/material/badge/_badge-theme.import.scss b/src/material/badge/_badge-theme.import.scss
@@ -1,11 +1,11 @@
 @forward '../core/theming/theming.import';
 @forward '../core/typography/typography-utils.import';
-@forward '../../cdk/a11y/a11y.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;
 
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
-@import '../../cdk/a11y/a11y';
+@import '../../cdk/a11y';
diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
@@ -8,7 +8,7 @@
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 
 $font-size: 12px;
 $font-weight: 600;

diff --git a/src/material/bottom-sheet/bottom-sheet-container.scss b/src/material/bottom-sheet/bottom-sheet-container.scss
@@ -1,4 +1,4 @@
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 
 // The bottom sheet minimum width on larger screen sizes is based
 // on increments of the toolbar, according to the spec. See:

diff --git a/src/material/button-toggle/_button-toggle-theme.import.scss b/src/material/button-toggle/_button-toggle-theme.import.scss
@@ -2,11 +2,11 @@
 @forward '../core/theming/theming.import';
 @forward '../core/density/private/compatibility.import';
 @forward 'button-toggle-variables' as mat-button-toggle-*;
-@forward '../../cdk/a11y/a11y.import';
+@forward '../../cdk/a11y/index.import';
 @forward '../core/typography/typography-utils.import';
 @forward 'button-toggle-theme' as mat-button-toggle-*;
 
-@import '../../cdk/a11y/a11y';
+@import '../../cdk/a11y';
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';

diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../../cdk/a11y/a11y';
+@use '../../cdk/a11y';
 @use '../core/style/private';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@forward 'index' hide a11y, high-contrast;
		@forward 'index' as cdk-* hide cdk-optionally-nest-content;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@forward 'index' as cdk-* show cdk-text-field-autofill, cdk-text-field-autofill-color,
		cdk-text-field-autosize, cdk-text-field;