build: properly publish sass files in release packages

Currently with Gulp we have a **hacky** script that fixes up
relative imports in sass files. This is something we cannot
easily do with Bazel when we assemble the release package.

Primarily because of that limitation/complexity with Bazel and
the general preference to avoid such hacky rewrites, we now
ship all individual "scss_lib" files to the release output.

This way all relative style references remain *correct* when
the release packages are assembled. This means that we no
longer need a hacky script to rewrite the imports.

For backwards compatibility, the `_theming.scss` entry-point
at the root of the Material package is still created. It just isn't
a sass bundle anymore, but the functionality remains the same
(making it a bundle means we repeat a *lot* of code; also there
no real big benefit as we don't have too deep dependencies)

Same has been done for the CDK sass files (overlay, a11y, text-field),
where we still expose the prebuilt css and sass files at the top-level
of the release output.

In the future, we can consider removing these backwards-compatibility
changes in favor of a less convoluted bazel setup.

Author: devversion

packages.bzl

@@ -33,6 +33,11 @@ CDK_TARGETS_WITH_STYLES = [
     "text-field",
 ]
 
+CDK_SCSS_LIBS = [
+    "//src/cdk/%s:%s_scss_lib" % (p, p.replace("-", "_"))
+    for p in CDK_TARGETS_WITH_STYLES
+]
+
 CDK_TARGETS = ["//src/cdk"] + ["//src/cdk/%s" % p for p in CDK_PACKAGES]
 
 CDK_EXPERIMENTAL_PACKAGES = [

src/cdk/BUILD.bazel

@@ -1,6 +1,6 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//:packages.bzl", "CDK_PACKAGES", "CDK_TARGETS", "CDK_TARGETS_WITH_STYLES", "ROLLUP_GLOBALS")
+load("//:packages.bzl", "CDK_PACKAGES", "CDK_SCSS_LIBS", "CDK_TARGETS", "CDK_TARGETS_WITH_STYLES", "ROLLUP_GLOBALS")
 load("//tools:defaults.bzl", "ng_module", "ng_package")
 
 # Root "@angular/cdk" entry-point that does not re-export individual entry-points.
@@ -56,10 +56,7 @@ rerootedStyleTargets = ["%s_rerooted" % file for [
 ng_package(
     name = "npm_package",
     srcs = ["package.json"],
-    data = ["%s_rerooted" % file for [
-        file,
-        _,
-    ] in rerootedStyles],
+    data = rerootedStyleTargets + CDK_SCSS_LIBS,
     entry_point = ":public-api.ts",
     globals = ROLLUP_GLOBALS,
     packages = [

src/dev-app/BUILD.bazel

@@ -88,7 +88,7 @@ sass_binary(
         "//src/material-experimental/mdc-theming:all_themes",
         "//src/material-experimental/mdc-typography:all_typography",
         "//src/material-experimental/popover-edit:popover_edit_scss_lib",
-        "//src/material/core:all_themes",
+        "//src/material/core:theming_scss_lib",
     ],
 )
 

src/e2e-app/BUILD.bazel

@@ -81,7 +81,7 @@ sass_binary(
         "//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
         "//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
-        "//src/material/core:all_themes",
+        "//src/material/core:theming_scss_lib",
     ],
 )
 

src/material-experimental/BUILD.bazel

@@ -1,6 +1,6 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//:packages.bzl", "MATERIAL_EXPERIMENTAL_TARGETS", "ROLLUP_GLOBALS")
+load("//:packages.bzl", "MATERIAL_EXPERIMENTAL_SCSS_LIBS", "MATERIAL_EXPERIMENTAL_TARGETS", "ROLLUP_GLOBALS")
 load("//tools:defaults.bzl", "ng_module", "ng_package")
 
 exports_files(["mdc_require_config.js"])
@@ -20,6 +20,7 @@ ng_module(
 ng_package(
     name = "npm_package",
     srcs = ["package.json"],
+    data = MATERIAL_EXPERIMENTAL_SCSS_LIBS,
     entry_point = ":public-api.ts",
     globals = ROLLUP_GLOBALS,
     tags = ["release-package"],

src/material-experimental/mdc-autocomplete/BUILD.bazel

@@ -26,8 +26,6 @@ sass_library(
     srcs = glob(["**/_*.scss"]),
     deps = [
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
-        "//src/material/core:core_scss_lib",
     ],
 )
 
@@ -37,11 +35,7 @@ sass_binary(
     include_paths = [
         "external/npm/node_modules",
     ],
-    deps = [
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
-        "//src/material/core:all_themes",
-    ],
+    deps = [],
 )
 
 ng_e2e_test_library(

src/material-experimental/mdc-select/BUILD.bazel

@@ -38,8 +38,6 @@ sass_library(
     srcs = glob(["**/_*.scss"]),
     deps = [
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
-        "//src/material/core:core_scss_lib",
     ],
 )
 
@@ -49,11 +47,7 @@ sass_binary(
     include_paths = [
         "external/npm/node_modules",
     ],
-    deps = [
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
-        "//src/material/core:all_themes",
-    ],
+    deps = [],
 )
 
 ng_test_library(

src/material/BUILD.bazel

@@ -8,24 +8,12 @@ load(
     "ROLLUP_GLOBALS",
 )
 load("//tools:defaults.bzl", "ng_package", "ts_library")
-load("//tools:sass_bundle.bzl", "sass_bundle")
 
 ts_library(
     name = "material",
     srcs = ["index.ts"],
 )
 
-sass_bundle(
-    name = "theming_bundle",
-    srcs = [
-        "//src/cdk/a11y:a11y_scss_lib",
-        "//src/cdk/overlay:overlay_scss_lib",
-        "//src/cdk/text-field:text_field_scss_lib",
-    ] + MATERIAL_SCSS_LIBS,
-    entry_point = "//src/material/core:theming/_all-theme.scss",
-    output_name = "_theming.scss",
-)
-
 filegroup(
     name = "overviews",
     srcs = ["//src/material/%s:overview" % name for name in MATERIAL_PACKAGES],
@@ -34,14 +22,17 @@ filegroup(
 # Creates the @angular/material package published to npm.
 ng_package(
     name = "npm_package",
-    srcs = ["package.json"],
+    srcs = [
+        "_theming.scss",
+        "package.json",
+    ],
     data = [
-        ":theming_bundle",
+        "//src/material/core:theming_scss_lib",
         "//src/material/prebuilt-themes:deeppurple-amber",
         "//src/material/prebuilt-themes:indigo-pink",
         "//src/material/prebuilt-themes:pink-bluegrey",
         "//src/material/prebuilt-themes:purple-green",
-    ],
+    ] + MATERIAL_SCSS_LIBS,
     entry_point = ":index.ts",
     entry_point_name = "material",
     globals = ROLLUP_GLOBALS,

src/material/_theming.scss

@@ -0,0 +1,3 @@
+// Replicate the old "theming" bundle by just importing the entry-point
+// that was used to construct the theming bundle.
+@import './core/theming/_all-theme';

src/material/core/BUILD.bazel

@@ -53,6 +53,14 @@ sass_library(
     ],
 )
 
+sass_library(
+    name = "theming_scss_lib",
+    srcs = [
+        "theming/_all-theme.scss",
+    ],
+    deps = MATERIAL_SCSS_LIBS,
+)
+
 sass_binary(
     name = "pseudo_checkbox_scss",
     src = "selection/pseudo-checkbox/pseudo-checkbox.scss",
@@ -71,37 +79,28 @@ sass_binary(
     deps = [":core_scss_lib"],
 )
 
-sass_library(
-    name = "all_themes",
-    srcs = [
-        "theming/_all-theme.scss",
-        "typography/_all-typography.scss",
-    ],
-    deps = MATERIAL_SCSS_LIBS,
-)
-
 sass_binary(
     name = "indigo_pink_prebuilt",
     src = "theming/prebuilt/indigo-pink.scss",
-    deps = [":all_themes"],
+    deps = [":theming_scss_lib"],
 )
 
 sass_binary(
     name = "deeppurple-amber_prebuilt",
     src = "theming/prebuilt/deeppurple-amber.scss",
-    deps = [":all_themes"],
+    deps = [":theming_scss_lib"],
 )
 
 sass_binary(
     name = "pink-bluegrey_prebuilt",
     src = "theming/prebuilt/pink-bluegrey.scss",
-    deps = [":all_themes"],
+    deps = [":theming_scss_lib"],
 )
 
 sass_binary(
     name = "purple-green_prebuilt",
     src = "theming/prebuilt/purple-green.scss",
-    deps = [":all_themes"],
+    deps = [":theming_scss_lib"],
 )
 
 #################
@@ -144,5 +143,5 @@ sass_binary(
     name = "test-css-variables-theme",
     testonly = True,
     src = "theming/test-css-variables-theme.scss",
-    deps = [":all_themes"],
+    deps = [":theming_scss_lib"],
 )

src/material/core/_core.scss

@@ -1,5 +1,3 @@
-// We can use relative imports for imports from the cdk because we bundle everything
-// up into a single flat scss file for material.
 @import '../../cdk/overlay/overlay';
 @import '../../cdk/a11y/a11y';
 @import '../../cdk/text-field/text-field';

src/universal-app/BUILD.bazel

@@ -45,7 +45,7 @@ sass_binary(
     deps = [
         "//src/material-experimental/mdc-theming:all_themes",
         "//src/material-experimental/mdc-typography:all_typography",
-        "//src/material/core:all_themes",
+        "//src/material/core:theming_scss_lib",
     ],
 )