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.

Author: crisbeto

src/cdk/BUILD.bazel

@@ -17,15 +17,7 @@ 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,
@@ -34,20 +26,20 @@ rerootedStyles = [file for target in CDK_ENTRYPOINTS_WITH_STYLES for file in [
 
 # Create genrules which re-root stylesheets from secondary entry-points.
 [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,4 +1,4 @@
-@forward './overlay/overlay' show overlay;
-@forward './a11y/a11y' show a11y-visually-hidden, high-contrast;
-@forward './text-field/text-field' show text-field-autosize, text-field-autofill,
+@forward './overlay' show overlay;
+@forward './a11y' show a11y-visually-hidden, high-contrast;
+@forward './text-field' show text-field-autosize, text-field-autofill,
   text-field-autofill-color;

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

@@ -0,0 +1,10 @@
+@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;
+
+@import '../a11y';

src/cdk/a11y/a11y-prebuilt.scss

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