refactor: switch "dev-app" away from cross-package relative Sass imports

Author: devversion

src/cdk/BUILD.bazel

@@ -40,17 +40,17 @@ prebuiltStyleTargets = ["%s_prebuilt" % file for [
     _,
 ] in prebuiltStyles]
 
-# Makes the public Sass API bundle available in the release output as `angular/cdk`.
 sass_library(
-    name = "sass_index",
+    name = "sass_lib",
     srcs = ["_index.scss"],
+    deps = CDK_SCSS_LIBS,
 )
 
 # Creates the @angular/cdk package published to npm.
 ng_package(
     name = "npm_package",
     srcs = ["package.json"],
-    data = [":sass_index"] + prebuiltStyleTargets + CDK_SCSS_LIBS,
+    data = [":sass_lib"] + prebuiltStyleTargets + CDK_SCSS_LIBS,
     nested_packages = [
         "//src/cdk/schematics:npm_package",
     ],

src/dev-app/BUILD.bazel

@@ -131,8 +131,8 @@ sass_binary(
         "external/npm/node_modules",
     ],
     deps = [
-        "//src/material:theming_bundle",
-        "//src/material-experimental:theming_bundle",
+        "//src/material:sass_lib",
+        "//src/material-experimental:sass_lib",
         "//src/material/core:theming_scss_lib",
     ],
 )

src/dev-app/datepicker/BUILD.bazel

@@ -27,9 +27,7 @@ ng_module(
 sass_binary(
     name = "datepicker_demo_scss",
     src = "datepicker-demo.scss",
-    deps = [
-        "//src/material/datepicker:datepicker_scss_lib",
-    ],
+    deps = ["//src/material:sass_lib"],
 )
 
 sass_binary(

src/dev-app/datepicker/datepicker-demo.scss

@@ -1,4 +1,4 @@
-@use '../../material/datepicker/datepicker-theme';
+@use '@angular/material' as mat;
 
 mat-calendar {
   width: 300px;
@@ -9,5 +9,6 @@ mat-calendar {
 }
 
 .demo-custom-range {
-  @include datepicker-theme.date-range-colors(hotpink, teal, yellow, purple);
+  @include mat.datepicker-date-range-colors(
+    hotpink, teal, yellow, purple);
 }

src/dev-app/input/BUILD.bazel

@@ -28,7 +28,5 @@ ng_module(
 sass_binary(
     name = "input_demo_scss",
     src = "input-demo.scss",
-    deps = [
-        "//src/cdk/text-field:text_field_scss_lib",
-    ],
+    deps = ["//src/cdk:sass_lib"],
 )

src/dev-app/input/input-demo.scss

@@ -1,4 +1,4 @@
-@use '../../cdk/text-field';
+@use '@angular/cdk';
 
 .demo-basic {
   padding: 0;
@@ -33,7 +33,7 @@
 }
 
 .demo-custom-autofill-style {
-  @include text-field.text-field-autofill-color(transparent, red);
+  @include cdk.text-field-autofill-color(transparent, red);
 }
 
 .demo-rows {

src/dev-app/mdc-dialog/BUILD.bazel

@@ -25,5 +25,5 @@ sass_binary(
     name = "mdc_dialog_demo_scss",
     src = "mdc-dialog-demo.scss",
     include_paths = ["external/npm/node_modules"],
-    deps = ["//src/material-experimental/mdc-dialog:mdc_dialog_scss_lib"],
+    deps = ["//src/material-experimental:sass_lib"],
 )

src/dev-app/mdc-dialog/mdc-dialog-demo.scss

@@ -1,4 +1,4 @@
-@use '../../material-experimental/mdc-dialog/dialog-legacy-padding';
+@use '@angular/material-experimental' as experimental;
 
 .demo-dialog-card {
   max-width: 600px;
@@ -24,5 +24,5 @@
 }
 
 .demo-dialog-legacy-padding {
-  @include dialog-legacy-padding.legacy-padding();
+  @include experimental.mdc-dialog-legacy-padding();
 }

src/dev-app/mdc-input/BUILD.bazel

@@ -29,7 +29,5 @@ ng_module(
 sass_binary(
     name = "mdc_input_demo_scss",
     src = "mdc-input-demo.scss",
-    deps = [
-        "//src/cdk/text-field:text_field_scss_lib",
-    ],
+    deps = ["//src/cdk:sass_lib"],
 )

src/dev-app/mdc-input/mdc-input-demo.scss

@@ -1,4 +1,4 @@
-@use '../../cdk/text-field';
+@use '@angular/cdk';
 
 .demo-basic {
   padding: 0;
@@ -41,7 +41,7 @@
 }
 
 .demo-custom-autofill-style {
-  @include text-field.text-field-autofill-color(transparent, red);
+  @include cdk.text-field-autofill-color(transparent, red);
 }
 
 .demo-rows {

src/dev-app/theme.scss

@@ -1,7 +1,5 @@
-@use '../material' as mat;
-@use '../material-experimental' as experimental;
-@use '../material-experimental/mdc-slider/slider-theme' as mdc-slider-theme;
-@use '../material/core/density/private/all-density' as private-all-density;
+@use '@angular/material' as mat;
+@use '@angular/material-experimental' as experimental;
 
 // Plus imports for other components in your app.
 
@@ -59,8 +57,6 @@ $candy-app-theme: mat.define-light-theme((
   @include experimental.all-mdc-component-colors($dark-colors);
   @include experimental.column-resize-color($dark-colors);
   @include experimental.popover-edit-color($dark-colors);
-  // We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
-  @include mdc-slider-theme.color($dark-colors);
 
   // Include the dark theme colors for focus indicators.
   &.demo-strong-focus {
@@ -75,7 +71,7 @@ $candy-app-theme: mat.define-light-theme((
 $density-scales: (-1, -2, minimum, maximum);
 @each $density in $density-scales {
   .demo-density-#{$density} {
-    @include private-all-density.all-component-densities($density);
+    @include mat.private-all-component-densities($density);
     @include experimental.all-mdc-component-densities($density);
   }
 }