build: make sass bazel targets consistent (angular#14186)

* Fixes that the `list.scss` accidentally imports the `divider.scss` (while it just wants an actual mixin)
* Fixes that the `cdk/a11y` package does not expose the `a11y-prebuilt.css` as Bazel target
* Makes all `BUILD` files consistent in regards to Sass targets.
* Ensures that each `sass_binary` or `sass_library` has it's **explicit** dependencies. Currently it's not possible to depend on a single target (depending on transitive build outputs/targets)
* Removes the `_partials` filegroups because those can be replaced with a `sass_library` now. Also removes the `theme` sass_library in favor of the `_scss_lib`. Note that this does not change anything for the `theming_bundle` or `core:all_themes` target.

Author: devversion

packages.bzl

@@ -71,6 +71,12 @@ MATERIAL_PACKAGES = [
 
 MATERIAL_TARGETS = ["//src/lib:material"] + ["//src/lib/%s" % p for p in MATERIAL_PACKAGES]
 
+# List that references the sass libraries for each Material package. This can be used to create
+# the theming scss-bundle or to specify dependencies for the all-theme.scss file.
+MATERIAL_SCSS_LIBS = [
+  "//src/lib/%s:%s_scss_lib" % (p, p.replace('-', '_')) for p in MATERIAL_PACKAGES
+]
+
 # Each individual package uses a placeholder for the version of Angular to ensure they're
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.

src/cdk-experimental/dialog/BUILD.bazel

@@ -22,12 +22,6 @@ ng_module(
   ],
 )
 
-# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
-filegroup(
-  name = "dialog_container_scss_partials",
-  srcs = glob(["**/_*.scss"]),
-)
-
 sass_binary(
   name = "dialog_container_scss",
   src = "dialog-container.scss",

src/cdk/a11y/BUILD.bazel

@@ -1,6 +1,6 @@
 package(default_visibility=["//visibility:public"])
 
-load("@io_bazel_rules_sass//:defs.bzl", "sass_library")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_library", "sass_binary")
 load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
@@ -19,15 +19,15 @@ ng_module(
   ]
 )
 
-# TODO(jelbourn): remove this when sass_library acts like a filegroup
-filegroup(
-  name = "a11y_scss_partials",
+sass_library(
+  name = "a11y_scss_lib",
   srcs = glob(["**/_*.scss"]),
 )
 
-sass_library(
-  name = "a11y_scss_lib",
-  srcs = [":a11y_scss_partials"],
+sass_binary(
+  name = "a11y_prebuilt_scss",
+  src = "a11y-prebuilt.scss",
+  deps = [":a11y_scss_lib"]
 )
 
 ng_test_library(

src/cdk/overlay/BUILD.bazel

@@ -21,15 +21,9 @@ ng_module(
   ],
 )
 
-# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
-filegroup(
-  name = "overlay_scss_partials",
-  srcs = glob(["**/_*.scss"]),
-)
-
 sass_library(
   name = "overlay_scss_lib",
-  srcs = [":overlay_scss_partials"],
+  srcs = glob(["**/_*.scss"]),
 )
 
 sass_binary(

src/cdk/text-field/BUILD.bazel

@@ -16,15 +16,9 @@ ng_module(
   ],
 )
 
-# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
-filegroup(
-  name = "text_field_scss_partials",
-  srcs = glob(["**/_*.scss"]),
-)
-
 sass_library(
   name = "text_field_scss_lib",
-  srcs = [":text_field_scss_partials"],
+  srcs = glob(["**/_*.scss"]),
 )
 
 sass_binary(

src/lib/BUILD.bazel

@@ -2,9 +2,9 @@ package(default_visibility=["//visibility:public"])
 
 load("@angular//:index.bzl", "ng_package")
 load("//tools:sass_bundle.bzl", "sass_bundle")
-load("//:packages.bzl", "MATERIAL_PACKAGES", "MATERIAL_TARGETS", "ROLLUP_GLOBALS",
-    "VERSION_PLACEHOLDER_REPLACEMENTS")
 load("//tools:defaults.bzl", "ng_module")
+load("//:packages.bzl", "MATERIAL_PACKAGES", "MATERIAL_TARGETS", "MATERIAL_SCSS_LIBS",
+    "ROLLUP_GLOBALS", "VERSION_PLACEHOLDER_REPLACEMENTS")
 
 # Root "@angular/material" entry-point.
 ng_module(
@@ -16,15 +16,11 @@ ng_module(
 
 sass_bundle(
   name = "theming_bundle",
-  # Use the filegroup rules for these sass partials directly because sass_library doesn't
-  # act like a filegroup.
   srcs = [
-    "//src/cdk/a11y:a11y_scss_partials",
-    "//src/cdk/overlay:overlay_scss_partials",
-    "//src/cdk/text-field:text_field_scss_partials",
-  ] + [
-    "//src/lib/%s:%s_scss_partials" % (p, p.replace('-', '_')) for p in MATERIAL_PACKAGES
-  ],
+    "//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/lib/core:theming/_all-theme.scss',
   output_name = "_theming.scss",
 )

src/lib/autocomplete/BUILD.bazel

@@ -26,21 +26,19 @@ ng_module(
   ]
 )
 
-# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
-filegroup(
-  name = "autocomplete_scss_partials",
+sass_library(
+  name = "autocomplete_scss_lib",
   srcs = glob(["**/_*.scss"]),
+  deps = ["//src/lib/core:core_scss_lib"],
 )
 
 sass_binary(
   name = "autocomplete_scss",
   src = "autocomplete.scss",
-  deps = ["//src/lib/core:core_scss_lib"],
-)
-
-sass_library(
-  name = "theme",
-  srcs = glob(["**/*-theme.scss"]),
+  deps = [
+    "//src/cdk/a11y:a11y_scss_lib",
+    "//src/lib/core:core_scss_lib",
+  ],
 )
 
 ng_test_library(

src/lib/badge/BUILD.bazel

@@ -16,15 +16,13 @@ ng_module(
   ] + glob(["**/*.html"]),
 )
 
-# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
-filegroup(
-  name = "badge_scss_partials",
-  srcs = glob(["**/_*.scss"]),
-)
-
 sass_library(
-  name = "theme",
-  srcs = glob(["**/*-theme.scss"]),
+  name = "badge_scss_lib",
+  srcs = glob(["**/_*.scss"]),
+  deps = [
+    "//src/cdk/a11y:a11y_scss_lib",
+    "//src/lib/core:core_scss_lib",
+  ]
 )
 
 ng_test_library(

src/lib/bottom-sheet/BUILD.bazel

@@ -26,21 +26,16 @@ ng_module(
   ],
 )
 
-# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
-filegroup(
-  name = "bottom_sheet_scss_partials",
+sass_library(
+  name = "bottom_sheet_scss_lib",
   srcs = glob(["**/_*.scss"]),
+  deps = ["//src/lib/core:core_scss_lib"],
 )
 
 sass_binary(
   name = "bottom_sheet_container_scss",
   src = "bottom-sheet-container.scss",
-  deps = ["//src/lib/core:core_scss_lib"],
-)
-
-sass_library(
-  name = "theme",
-  srcs = glob(["**/*-theme.scss"]),
+  deps = ["//src/cdk/a11y:a11y_scss_lib"],
 )
 
 ng_test_library(

src/lib/button-toggle/BUILD.bazel

@@ -18,21 +18,19 @@ ng_module(
   ],
 )
 
-# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
-filegroup(
-  name = "button_toggle_scss_partials",
+sass_library(
+  name = "button_toggle_scss_lib",
   srcs = glob(["**/_*.scss"]),
+  deps = ["//src/lib/core:core_scss_lib"]
 )
 
 sass_binary(
   name = "button_toggle_scss",
   src = "button-toggle.scss",
-  deps = ["//src/lib/core:core_scss_lib"],
-)
-
-sass_library(
-  name = "theme",
-  srcs = glob(["**/*-theme.scss"]),
+  deps = [
+    "//src/cdk/a11y:a11y_scss_lib",
+    "//src/lib/core:core_scss_lib",
+  ],
 )
 
 ng_test_library(

src/lib/button/BUILD.bazel

@@ -18,28 +18,20 @@ ng_module(
   ],
 )
 
-# TODO(jelbourn): remove this when sass_library acts like a filegroup
-filegroup(
-  name = "button_scss_partials",
-  srcs = glob(["**/_*.scss"]),
-)
-
-# Library of all button scss partials.
 sass_library(
   name = "button_scss_lib",
-  srcs = [":button_scss_partials"],
+  srcs = glob(["**/_*.scss"]),
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
 sass_binary(
   name = "button_scss",
   src = "button.scss",
-  deps = [":button_scss_lib"],
-)
-
-sass_library(
-  name = "theme",
-  srcs = glob(["**/*-theme.scss"]),
+  deps = [
+    "//src/cdk/a11y:a11y_scss_lib",
+    "//src/lib/core:core_scss_lib",
+    ":button_scss_lib"
+  ],
 )
 
 ng_test_library(

src/lib/card/BUILD.bazel

@@ -14,19 +14,17 @@ ng_module(
   ],
 )
 
-# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
-filegroup(
-  name = "card_scss_partials",
+sass_library(
+  name = "card_scss_lib",
   srcs = glob(["**/_*.scss"]),
+  deps = ["//src/lib/core:core_scss_lib"],
 )
 
 sass_binary(
   name = "card_scss",
   src = "card.scss",
-  deps = ["//src/lib/core:core_scss_lib"],
-)
-
-sass_library(
-  name = "theme",
-  srcs = glob(["**/*-theme.scss"]),
+  deps = [
+    "//src/cdk/a11y:a11y_scss_lib",
+    "//src/lib/core:core_scss_lib",
+  ],
 )

src/lib/checkbox/BUILD.bazel

@@ -20,21 +20,22 @@ ng_module(
   ],
 )
 
-# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
-filegroup(
-  name = "checkbox_scss_partials",
+sass_library(
+  name = "checkbox_scss_lib",
   srcs = glob(["**/_*.scss"]),
+  deps = [
+    "//src/cdk/a11y:a11y_scss_lib",
+    "//src/lib/core:core_scss_lib",
+  ]
 )
 
 sass_binary(
   name = "checkbox_scss",
   src = "checkbox.scss",
-  deps = ["//src/lib/core:core_scss_lib"],
-)
-
-sass_library(
-  name = "theme",
-  srcs = glob(["**/*-theme.scss"]),
+  deps = [
+    "//src/cdk/a11y:a11y_scss_lib",
+    "//src/lib/core:core_scss_lib",
+  ],
 )
 
 ng_test_library(

src/lib/chips/BUILD.bazel

@@ -24,21 +24,19 @@ ng_module(
   ],
 )
 
-# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
-filegroup(
-  name = "chips_scss_partials",
+sass_library(
+  name = "chips_scss_lib",
   srcs = glob(["**/_*.scss"]),
+  deps = ["//src/lib/core:core_scss_lib"],
 )
 
 sass_binary(
   name = "chips_scss",
   src = "chips.scss",
-  deps = ["//src/lib/core:core_scss_lib"],
-)
-
-sass_library(
-  name = "theme",
-  srcs = glob(["**/*-theme.scss"]),
+  deps = [
+    "//src/cdk/a11y:a11y_scss_lib",
+    "//src/lib/core:core_scss_lib",
+  ],
 )
 
 ng_test_library(