build: create sass_bundle bazel rule (#10055)

This defines a bazel rule to bundle sass partials into a single file
using the "scss-bundle" npm package. The rule definition is commented so
that it can serve as an example for creating other rules in the future.

I've also added the missing build file for badge so that its theme can
be included in the bundle.

WORKSPACE

@@ -1,4 +1,4 @@
-workspace(name = "angular_material_src")
+workspace(name = "angular_material")
 
 # Add nodejs rules
 git_repository(

components.bzl

@@ -0,0 +1,37 @@
+# List of all @angular/material components / subpackages.
+MATERIAL_PACKAGES = [
+  "autocomplete",
+  "badge",
+  "bottom-sheet",
+  "button-toggle",
+  "button",
+  "card",
+  "checkbox",
+  "chips",
+  "core",
+  "datepicker",
+  "dialog",
+  "divider",
+  "expansion",
+  "form-field",
+  "grid-list",
+  "icon",
+  "input",
+  "list",
+  "menu",
+  "paginator",
+  "progress-bar",
+  "progress-spinner",
+  "radio",
+  "select",
+  "sidenav",
+  "slide-toggle",
+  "slider",
+  "snack-bar",
+  "sort",
+  "stepper",
+  "table",
+  "tabs",
+  "toolbar",
+  "tooltip",
+]

src/cdk/a11y/BUILD.bazel

@@ -3,11 +3,6 @@ load("@angular//:index.bzl", "ng_module")
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library")
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test")
 
-sass_library(
-  name = "a11y_scss_lib",
-  srcs = glob(["**/_*.scss"]),
-)
-
 
 ng_module(
   name = "a11y",
@@ -22,6 +17,17 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): remove this when sass_library acts like a filegroup
+filegroup(
+  name = "a11y_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
+
+sass_library(
+  name = "a11y_scss_lib",
+  srcs = [":a11y_scss_partials"],
+)
+
 ts_library(
   name = "a11y_test_sources",
   testonly = 1,

src/cdk/overlay/BUILD.bazel

@@ -18,6 +18,12 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "overlay_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
+
 ts_library(
   name = "overlay_test_sources",
   testonly = 1,

src/lib/BUILD.bazel

@@ -0,0 +1,15 @@
+load("//tools:sass_bundle.bzl", "sass_bundle")
+load("//:components.bzl", "MATERIAL_PACKAGES")
+
+
+sass_bundle(
+  name = "theming_bundle",
+  srcs = [
+    "//src/cdk/a11y:a11y_scss_partials",
+    "//src/cdk/overlay:overlay_scss_partials",
+  ] + [
+    "//src/lib/%s:%s_scss_partials" % (p, p.replace('-', '_')) for p in MATERIAL_PACKAGES
+  ],
+  entry_point = '//src/lib/core:theming/_all-theme.scss',
+  output_name = "_theming.scss",
+)

src/lib/autocomplete/BUILD.bazel

@@ -21,6 +21,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "autocomplete_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "autocomplete_scss",

src/lib/badge/BUILD.bazel

@@ -0,0 +1,22 @@
+package(default_visibility=["//visibility:public"])
+load("@angular//:index.bzl", "ng_module")
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
+
+
+ng_module(
+  name = "badge",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
+  module_name = "@angular/material/badge",
+  deps = [
+    "//src/lib/core",
+    "//src/cdk/a11y",
+    "//src/cdk/coercion",
+  ],
+  tsconfig = ":tsconfig-build.json",
+)
+
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "badge_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)

src/lib/badge/badge.ts

@@ -6,11 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, Input, ElementRef, Inject, Optional, NgZone, OnDestroy} from '@angular/core';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {ThemePalette} from '@angular/material/core';
 import {AriaDescriber} from '@angular/cdk/a11y';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {DOCUMENT} from '@angular/common';
+import {Directive, ElementRef, Inject, Input, NgZone, OnDestroy, Optional} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
+
 
 let nextId = 0;
 

src/lib/bottom-sheet/BUILD.bazel

@@ -22,6 +22,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "bottom_sheet_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "bottom_sheet_container_scss",

src/lib/button-toggle/BUILD.bazel

@@ -17,6 +17,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "button_toggle_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "button_toggle_scss",

src/lib/button/BUILD.bazel

@@ -16,11 +16,16 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# 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 = glob(["**/_*.scss"]),
+  srcs = [":button_scss_partials"],
   deps = ["//src/lib/core:core_scss_lib"],
 )
 

src/lib/card/BUILD.bazel

@@ -14,6 +14,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "card_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "card_scss",

src/lib/checkbox/BUILD.bazel

@@ -17,6 +17,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "checkbox_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "checkbox_scss",

src/lib/chips/BUILD.bazel

@@ -20,6 +20,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "chips_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "chips_scss",

src/lib/core/BUILD.bazel

@@ -1,7 +1,10 @@
 package(default_visibility=["//visibility:public"])
+
 load("@angular//:index.bzl", "ng_module")
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
 
+exports_files(["theming/_theming.scss"])
+
 
 ng_module(
   name = "core",
@@ -19,10 +22,16 @@ ng_module(
 )
 
 
+# TODO(jelbourn): remove this when sass_library acts like a filegroup
+filegroup(
+  name = "core_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
+
 # Library of all core scss partials.
 sass_library(
   name = "core_scss_lib",
-  srcs = glob(["**/_*.scss"]),
+  srcs = [":core_scss_partials"],
   deps = ["//src/cdk/a11y:a11y_scss_lib"],
 )
 

src/lib/datepicker/BUILD.bazel

@@ -28,6 +28,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "datepicker_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "datepicker_content_scss",

src/lib/dialog/BUILD.bazel

@@ -19,6 +19,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "dialog_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "dialog_scss",

src/lib/divider/BUILD.bazel

@@ -16,13 +16,18 @@ ng_module(
 )
 
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "divider_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
+
 sass_library(
   name = "divider_scss_lib",
   srcs = ["divider.scss"],
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-
 sass_binary(
   name = "divider_scss",
   src = "divider.scss",

src/lib/expansion/BUILD.bazel

@@ -23,6 +23,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "expansion_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "expansion_panel_scss",

src/lib/form-field/BUILD.bazel

@@ -23,6 +23,12 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "form_field_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
+
 sass_binary(
   name = "form_field_scss",
   src = "form-field.scss",

src/lib/grid-list/BUILD.bazel

@@ -15,6 +15,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "grid_list_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "grid_list_scss",

src/lib/icon/BUILD.bazel

@@ -14,6 +14,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "icon_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "icon_scss",

src/lib/input/BUILD.bazel

@@ -17,6 +17,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "input_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "input_scss",

src/lib/list/BUILD.bazel

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

src/lib/menu/BUILD.bazel

@@ -20,6 +20,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "menu_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "menu_scss",

src/lib/paginator/BUILD.bazel

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

src/lib/progress-bar/BUILD.bazel

@@ -15,6 +15,12 @@ ng_module(
 )
 
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "progress_bar_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
+
 sass_binary(
   name = "progress_bar_scss",
   src = "progress-bar.scss",

src/lib/progress-spinner/BUILD.bazel

@@ -14,6 +14,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "progress_spinner_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "progress_spinner_scss",

src/lib/radio/BUILD.bazel

@@ -17,6 +17,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "radio_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "radio_scss",

src/lib/select/BUILD.bazel

@@ -22,6 +22,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "select_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "select_scss",

src/lib/sidenav/BUILD.bazel

@@ -21,6 +21,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "sidenav_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "drawer_scss",

src/lib/slide-toggle/BUILD.bazel

@@ -18,6 +18,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "slide_toggle_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "slide_toggle_scss",

src/lib/slider/BUILD.bazel

@@ -19,6 +19,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "slider_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "slider_scss",

src/lib/snack-bar/BUILD.bazel

@@ -22,6 +22,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "snack_bar_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "snack_bar_container_scss",

src/lib/sort/BUILD.bazel

@@ -17,6 +17,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "sort_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "sort_header_scss",

src/lib/stepper/BUILD.bazel

@@ -24,6 +24,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "stepper_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "stepper_scss",

src/lib/table/BUILD.bazel

@@ -18,6 +18,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "table_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "table_scss",

src/lib/tabs/BUILD.bazel

@@ -26,10 +26,16 @@ ng_module(
 )
 
 
+# TODO(jelbourn): remove this when sass_library acts like a filegroup
+filegroup(
+  name = "tabs_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
+
 # Library of all tabs scss partials.
 sass_library(
   name = "tabs_scss_lib",
-  srcs = glob(["**/_*.scss"]),
+  srcs = [":tabs_scss_partials"],
   deps = ["//src/lib/core:core_scss_lib"],
 )
 

src/lib/toolbar/BUILD.bazel

@@ -15,6 +15,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "toolbar_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "toolbar_scss",

src/lib/tooltip/BUILD.bazel

@@ -24,6 +24,11 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
+# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
+filegroup(
+  name = "tooltip_scss_partials",
+  srcs = glob(["**/_*.scss"]),
+)
 
 sass_binary(
   name = "tooltip_scss",

tools/BUILD.bazel

@@ -0,0 +1,17 @@
+package(default_visibility=["//visibility:public"])
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary")
+
+
+ts_library(
+  name = "sass_bundle_lib",
+  srcs = ["sass_bundle.ts"],
+  tsconfig = "bazel-tools-tsconfig.json",
+)
+
+# Executable for the custom sass_bundle rule (see sass_bundle.bzl).
+nodejs_binary(
+  name = "sass_bundle",
+  data = [":sass_bundle_lib"],
+  entry_point = "angular_material/tools/sass_bundle.js",
+)

tools/bazel-tools-tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015"],
+    "types": ["node"]
+  }
+}

tools/bazel.rc

@@ -36,6 +36,9 @@ test --test_output=errors
 build --experimental_ui
 test --experimental_ui
 
+# Output to a more coventional location
+build --symlink_prefix=dist/bazel/
+
 ###############################
 # Typescript / Angular / Sass #
 ###############################

tools/sass_bundle.bzl

@@ -0,0 +1,63 @@
+# Implementation of sass_bundle that performs an action
+def _sass_bundle(ctx):
+  # Define arguments that will be passed to the underlying nodejs script.
+  args = ctx.actions.args()
+
+  # The entry-point scss file for the bundle.
+  args.add("--entry")
+  args.add(ctx.attr.entry_point.files)
+
+  # The list of files that can be included in the bundle.
+  args.add("--srcs")
+  args.add(ctx.files.srcs, join_with =",")
+
+  # The generated bundle's filename.
+  args.add("--output")
+  args.add(ctx.outputs.output_name.path)
+
+  # Define an "action" that will run the nodejs_binary executable. This is
+  # the main thing that sass_bundle rule does.
+  ctx.actions.run(
+    inputs = ctx.files.srcs,
+    executable = ctx.executable._sass_bundle,
+    outputs = [ctx.outputs.output_name],
+    arguments = [args],
+  )
+
+  # The return value describes what the rule is producing.
+  # In this case, we can use a `DefaultInfo`, since the rule only produces
+  # a single output file.
+  return [DefaultInfo(files = depset([ctx.outputs.output_name]))]
+
+
+# Rule definition for sass_bundle that defines attributes and outputs.
+sass_bundle = rule(
+  # Point to the function that will execute for this rule.
+  implementation = _sass_bundle,
+
+  # The attributes that can be set to this rule.
+  attrs = {
+    # The source files for this rule. This must include all sass files that
+    # *could* be included in the bundle, as only the files that this rule knows
+    # about (i.e. the labels) will be available in the bazel sandbox in which
+    # the nodejs_binary runs.
+    "srcs": attr.label_list(allow_files = True),
+
+    # The name of the file to be output from this rule. The rule will fail if
+    # the nodejs_binary does not produce this output file. By using
+    # `attr.output()`, we can omit the separate `outputs` declaration a more
+    # complicated rule would need.
+    "output_name": attr.output(),
+
+    # The scss entry-point. Note that this uses a label and not a string
+    # in order to make bazel aware that this file is a *dependency* of the
+    # rule (and will thus be available to the nodejs_binary in the sandbox).
+    "entry_point": attr.label(mandatory = True, allow_single_file = True),
+
+    # The executable (bundler) for this rule (private).
+    "_sass_bundle": attr.label(
+      default = Label("//tools:sass_bundle"),
+      executable = True,
+      cfg = "host"
+  )},
+)

tools/sass_bundle.ts

@@ -0,0 +1,35 @@
+import {writeFileSync} from 'fs';
+import {join} from 'path';
+
+
+const Bundler = require('scss-bundle').Bundler;
+const minimist = require('minimist');
+
+/** The root of the bazel workspace (sandbox). */
+const workspaceRoot = process.cwd();
+
+/**
+ * Bundles sass partials into a single file using the `scss-bundle` package. This does not use the
+ * default CLI for `scss-bundle` to give us a place to introspect / debug values coming from
+ * bazel if necessary.
+ */
+export async function main(args: string[]): Promise<number> {
+  const parsedArgs: {srcs: string, output: string, entry: string} = minimist(args);
+  const inputFiles = parsedArgs.srcs.split(',');
+
+  return new Bundler().Bundle(join(workspaceRoot, parsedArgs.entry), inputFiles).then(result => {
+    writeFileSync(parsedArgs.output, result.bundledContent);
+    return 0;
+  }).catch(error => {
+    console.error('Sass bundling failed');
+    console.dir(error);
+    return 1;
+  });
+}
+
+if (require.main === module) {
+  const args = process.argv.slice(2);
+  main(args).then(exitCode => {
+    process.exitCode = exitCode;
+  });
+}