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

@@ -30,6 +30,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.
@@ -35,6 +35,8 @@ rerootedStyles = [file for target in CDK_TARGETS_WITH_STYLES for file in [
 
 # Copy all stylesheets to the CDK root package. We need to copy these files, as
 # these stylesheets need to be at the root of the NPM package (e.g. "_a11y.scss")
+# TODO(devversion): figure out if we can remove these rerooted styles. They are
+# just rerooted to keep the Bazel output backwards compatible with the gulp setup.
 [genrule(
     name = "%s_rerooted" % file,
     srcs = ["//src/cdk/%s:%s" % (target, file)],
@@ -45,6 +47,11 @@ rerootedStyles = [file for target in CDK_TARGETS_WITH_STYLES for file in [
     target,
 ] in rerootedStyles]
 
+rerootedStyleTargets = ["%s_rerooted" % file for [
+    file,
+    _,
+] in rerootedStyles]
+
 filegroup(
     name = "overviews",
     srcs = ["//src/cdk/%s:overview" % name for name in CDK_PACKAGES],
@@ -54,10 +61,7 @@ filegroup(
 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:core_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:core_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

@@ -39,8 +39,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",
     ],
 )
 
@@ -50,11 +48,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-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,16 @@ 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/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

@@ -1,7 +1,6 @@
 package(default_visibility = ["//visibility:public"])
 
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
-load("//:packages.bzl", "MATERIAL_SCSS_LIBS")
 load(
     "//tools:defaults.bzl",
     "markdown_to_html",
@@ -44,7 +43,6 @@ sass_library(
     name = "core_scss_lib",
     srcs = glob(
         ["**/_*.scss"],
-        exclude = ["theming/_all-theme.scss"],
     ),
     deps = [
         "//src/cdk/a11y:a11y_scss_lib",
@@ -71,37 +69,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 = [":core_scss_lib"],
 )
 
 sass_binary(
     name = "deeppurple-amber_prebuilt",
     src = "theming/prebuilt/deeppurple-amber.scss",
-    deps = [":all_themes"],
+    deps = [":core_scss_lib"],
 )
 
 sass_binary(
     name = "pink-bluegrey_prebuilt",
     src = "theming/prebuilt/pink-bluegrey.scss",
-    deps = [":all_themes"],
+    deps = [":core_scss_lib"],
 )
 
 sass_binary(
     name = "purple-green_prebuilt",
     src = "theming/prebuilt/purple-green.scss",
-    deps = [":all_themes"],
+    deps = [":core_scss_lib"],
 )
 
 #################
@@ -144,5 +133,5 @@ sass_binary(
     name = "test-css-variables-theme",
     testonly = True,
     src = "theming/test-css-variables-theme.scss",
-    deps = [":all_themes"],
+    deps = [":core_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

@@ -44,7 +44,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:core_scss_lib",
     ],
 )