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

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 #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 src/cdk/a11y/_index.scsssrc/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';