refactor(cdk/overlay): use index files for public Sass API instead of copying files out

Currently we copy out a few of the CDK .scss files to the root of the `cdk` package so that they're more convenient to consume. The problem with this is that it prevents us from importing other Sass files, because the import path will be wrong after the files are copied (see angular#22043).

These changes rename the files to `_index.scss` which will allow users to maintain the same import paths while allowing us to remove the file copying logic and not having to worry about import paths.

BREAKING CHANGES:
Deep imports to the following CDK .scss files need to be updated:
* `@import '~@angular/cdk/overlay/overlay'` -> `@import ~@angular/cdk/overlay`
* `@import '~@angular/cdk/a11y/a11y'` -> `@import ~@angular/cdk/a11y`
* `@import '~@angular/cdk/text-field/text-field'` -> `@import ~@angular/cdk/text-field`

Author: crisbeto

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",

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.

src/cdk/a11y/_a11y.import.scss

@@ -0,0 +1,2 @@
+@forward 'index' hide a11y, high-contrast;
+@forward 'index' as cdk-* hide cdk-optionally-nest-content;

src/cdk/a11y/_index.import.scss

@@ -1,3 +1,3 @@
-@use './a11y';
+@use './index' as a11y;
 
 @include a11y.a11y-visually-hidden();

src/cdk/a11y/_a11y.scss renamed to src/cdk/a11y/_index.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;

src/cdk/a11y/a11y-prebuilt.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';

src/cdk/overlay/_overlay-deprecated.scss renamed to src/cdk/overlay/_index-deprecated.scss

@@ -1,3 +1,3 @@
-@use './overlay';
+@use './index' as overlay;
 
 @include overlay.overlay();

src/cdk/overlay/_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;

src/cdk/overlay/_overlay.scss renamed to src/cdk/overlay/_index.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();

src/cdk/overlay/_overlay.import.scss

@@ -1,4 +1,4 @@
-@use '../../cdk/text-field/text-field';
+@use '../../cdk/text-field';
 
 .demo-basic {
   padding: 0;

src/cdk/overlay/overlay-prebuilt.scss

@@ -1,4 +1,4 @@
-@use '../../cdk/text-field/text-field';
+@use '../../cdk/text-field';
 
 .demo-basic {
   padding: 0;

src/cdk/text-field/_index.import.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);

src/cdk/text-field/_text-field.scss renamed to src/cdk/text-field/_index.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';
 
 

src/cdk/text-field/_text-field.import.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';
 

src/cdk/text-field/text-field-prebuilt.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);

src/dev-app/input/input-demo.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 {

src/dev-app/mdc-input/mdc-input-demo.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.

src/material-experimental/mdc-autocomplete/autocomplete.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';

src/material-experimental/mdc-button/button.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.

src/material-experimental/mdc-checkbox/checkbox.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;
 

src/material-experimental/mdc-chips/chips.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';

src/material-experimental/mdc-core/option/option.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

src/material-experimental/mdc-dialog/dialog.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);

src/material-experimental/mdc-form-field/_form-field-native-select.import.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;

src/material-experimental/mdc-form-field/_form-field-native-select.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);

src/material-experimental/mdc-form-field/_form-field-theme.import.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;

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.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);

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.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;

src/material-experimental/mdc-menu/menu.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);
 

src/material-experimental/mdc-paginator/paginator.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';

src/material-experimental/mdc-radio/radio.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;

src/material-experimental/mdc-select/select.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';

src/material-experimental/mdc-slide-toggle/slide-toggle.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';

src/material-experimental/mdc-slider/slider.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;

src/material-experimental/mdc-snack-bar/snack-bar-container.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';

src/material-experimental/mdc-tabs/_tabs-common.import.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;

src/material-experimental/mdc-tabs/_tabs-common.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:

src/material-experimental/popover-edit/_popover-edit-theme.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';

src/material-experimental/popover-edit/_popover-edit.import.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';