build(bazel): switch to rules_sass 0.1.0 (#11683)

This brings us to the newest version of rules_sass, which I just
released after work by Alex Eagle and Natalie Weizenbaum that switches
over to the new cannonical Dart-based compiler and aligns the rule APIs
with the ones we have inside Google.

The good thing here is that this eliminates the need to have all of the
genrules that rename the css output.

WORKSPACE

@@ -16,13 +16,14 @@ check_bazel_version("0.13.0")
 node_repositories(package_json = ["//:package.json"])
 
 # Add sass rules
-git_repository(
+http_archive(
   name = "io_bazel_rules_sass",
-  remote = "https://github.com/bazelbuild/rules_sass.git",
-  tag = "0.0.3",
+  url = "https://github.com/bazelbuild/rules_sass/archive/0.1.0.zip",
+  strip_prefix = "rules_sass-0.1.0",
+  sha256 = "b243c4d64f054c174051785862ab079050d90b37a1cef7da93821c6981cb9ad4",
 )
 
-load("@io_bazel_rules_sass//sass:sass.bzl", "sass_repositories")
+load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
 sass_repositories()
 
 # Add TypeScript rules

src/cdk-experimental/dialog/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "dialog",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/cdk-experimental/dialog",
-  assets = [":dialog_container_css"] + glob(["**/*.html"]),
+  assets = [":dialog-container.css"] + glob(["**/*.html"]),
   deps = [
     "//src/cdk/a11y",
     "//src/cdk/bidi",
@@ -29,11 +29,3 @@ sass_binary(
   src = "dialog-container.scss",
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "dialog_container_css",
-  srcs = [":dialog_container_scss.css"],
-  outs = ["dialog-container.css"],
-  cmd = "cp $< $@",
-)

src/cdk-experimental/scrolling/BUILD.bazel

@@ -8,7 +8,7 @@ ng_module(
   name = "scrolling",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/cdk-experimental/scrolling",
-  assets = [":virtual_scroll_viewport_css"] + glob(["**/*.html"]),
+  assets = [":virtual-scroll-viewport.css"] + glob(["**/*.html"]),
   deps = [
     "//src/cdk/coercion",
     "//src/cdk/collections",
@@ -22,14 +22,6 @@ sass_binary(
   src = "virtual-scroll-viewport.scss",
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "virtual_scroll_viewport_css",
-  srcs = [":virtual_scroll_viewport_scss.css"],
-  outs = ["virtual-scroll-viewport.css"],
-  cmd = "cp $< $@",
-)
 
 ts_library(
   name = "scrolling_test_sources",

src/cdk/text-field/BUILD.bazel

@@ -30,12 +30,3 @@ sass_binary(
   src = "text-field-prebuilt.scss",
   deps = [":text_field_scss_lib"],
 )
-
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "text_field_prebuilt_css",
-  srcs = [":text_field_prebuilt_scss.css"],
-  outs = ["text-field-prebuilt.css"],
-  cmd = "cp $< $@",
-)

src/lib/autocomplete/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "autocomplete",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/autocomplete",
-  assets = [":autocomplete_css"] + glob(["**/*.html"]),
+  assets = [":autocomplete.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/lib/form-field",
@@ -34,15 +34,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "autocomplete_css",
-  srcs = [":autocomplete_scss.css"],
-  outs = ["autocomplete.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/bottom-sheet/BUILD.bazel

@@ -8,7 +8,7 @@ ng_module(
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/bottom-sheet",
   assets = [
-    ":bottom_sheet_container_css",
+    ":bottom-sheet-container.css",
   ] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
@@ -34,15 +34,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "bottom_sheet_container_css",
-  srcs = [":bottom_sheet_container_scss.css"],
-  outs = ["bottom-sheet-container.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/button-toggle/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "button-toggle",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/button-toggle",
-  assets = [":button_toggle_css"] + glob(["**/*.html"]),
+  assets = [":button-toggle.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
@@ -29,15 +29,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "button_toggle_css",
-  srcs = [":button_toggle_scss.css"],
-  outs = ["button-toggle.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/button/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "button",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/button",
-  assets = [":button_css"] + glob(["**/*.html"]),
+  assets = [":button.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
@@ -35,16 +35,6 @@ sass_binary(
   deps = [":button_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "button_css",
-  srcs = [":button_scss.css"],
-  outs = ["button.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/card/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "card",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/card",
-  assets = [":card_css"] + glob(["**/*.html"]),
+  assets = [":card.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
   ],
@@ -26,15 +26,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "card_css",
-  srcs = [":card_scss.css"],
-  outs = ["card.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/checkbox/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "checkbox",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/checkbox",
-  assets = [":checkbox_css"] + glob(["**/*.html"]),
+  assets = [":checkbox.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
@@ -29,16 +29,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "checkbox_css",
-  srcs = [":checkbox_scss.css"],
-  outs = ["checkbox.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/chips/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "chips",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/chips",
-  assets = [":chips_css"] + glob(["**/*.html"]),
+  assets = [":chips.css"] + glob(["**/*.html"]),
   deps = [
     "//src/cdk/a11y",
     "//src/cdk/bidi",
@@ -33,16 +33,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "chips_css",
-  srcs = [":chips_scss.css"],
-  outs = ["chips.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/core/BUILD.bazel

@@ -12,9 +12,9 @@ ng_module(
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/core",
   assets = [
-    ":pseudo_checkbox_css",
-    ":option_css",
-    ":optgroup_css",
+    ":selection/pseudo-checkbox/pseudo-checkbox.css",
+    ":option/option.css",
+    ":option/optgroup.css",
   ] + glob(["**/*.html"]),
   deps = [
     "//src/cdk/bidi",
@@ -64,29 +64,6 @@ sass_binary(
   deps = [":core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "pseudo_checkbox_css",
-  srcs = [":pseudo_checkbox_scss.css"],
-  outs = ["selection/pseudo-checkbox/pseudo-checkbox.css"],
-  cmd = "cp $< $@",
-)
-
-genrule(
-  name = "option_css",
-  srcs = [":option_scss.css"],
-  outs = ["option/option.css"],
-  cmd = "cp $< $@",
-)
-
-genrule(
-  name = "optgroup_css",
-  srcs = [":optgroup_scss.css"],
-  outs = ["option/optgroup.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "all_themes",
   srcs = [

src/lib/datepicker/BUILD.bazel

@@ -8,10 +8,10 @@ ng_module(
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/datepicker",
   assets = [
-    ":datepicker_content_css",
-    ":datepicker_toggle_css",
-    ":calendar_body_css",
-    ":calendar_css",
+    ":datepicker-content.css",
+    ":datepicker-toggle.css",
+    ":calendar-body.css",
+    ":calendar.css",
   ] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
@@ -58,41 +58,7 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "datepicker_content_css",
-  srcs = [":datepicker_content_scss.css"],
-  outs = ["datepicker-content.css"],
-  cmd = "cp $< $@",
-)
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "datepicker_toggle_css",
-  srcs = [":datepicker_toggle_scss.css"],
-  outs = ["datepicker-toggle.css"],
-  cmd = "cp $< $@",
-)
-
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "calendar_css",
-  srcs = [":calendar_scss.css"],
-  outs = ["calendar.css"],
-  cmd = "cp $< $@",
-)
-
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "calendar_body_css",
-  srcs = [":calendar_body_scss.css"],
-  outs = ["calendar-body.css"],
-  cmd = "cp $< $@",
-)
 
 sass_library(
   name = "theme",

src/lib/dialog/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "dialog",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/dialog",
-  assets = [":dialog_css"] + glob(["**/*.html"]),
+  assets = [":dialog.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
@@ -31,15 +31,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "dialog_css",
-  srcs = [":dialog_scss.css"],
-  outs = ["dialog.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/divider/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "divider",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/divider",
-  assets = [":divider_css"] + glob(["**/*.html"]),
+  assets = [":divider.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/coercion",
@@ -34,15 +34,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "divider_css",
-  srcs = [":divider_scss.css"],
-  outs = ["divider.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/expansion/BUILD.bazel

@@ -8,8 +8,8 @@ ng_module(
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/expansion",
   assets = [
-    ":expansion_panel_css",
-    "expansion_panel_header_css",
+    ":expansion-panel.css",
+    ":expansion-panel-header.css",
   ] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
@@ -41,24 +41,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "expansion_panel_css",
-  srcs = [":expansion_panel_scss.css"],
-  outs = ["expansion-panel.css"],
-  cmd = "cp $< $@",
-)
-
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "expansion_panel_header_css",
-  srcs = [":expansion_panel_header_scss.css"],
-  outs = ["expansion-panel-header.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/form-field/BUILD.bazel

@@ -8,12 +8,12 @@ ng_module(
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/form-field",
   assets = [
-    ":form_field_css",
-    ":form_field_fill_css",
-    ":form_field_legacy_css",
-    ":form_field_outline_css",
-    ":form_field_standard_css",
-    "//src/lib/input:input_css"
+    ":form-field.css",
+    ":form-field-fill.css",
+    ":form-field-legacy.css",
+    ":form-field-outline.css",
+    ":form-field-standard.css",
+    "//src/lib/input:input.css"
   ] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
@@ -59,43 +59,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove these when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "form_field_css",
-  srcs = [":form_field_scss.css"],
-  outs = ["form-field.css"],
-  cmd = "cp $< $@",
-)
-
-genrule(
-  name = "form_field_fill_css",
-  srcs = [":form_field_fill_scss.css"],
-  outs = ["form-field-fill.css"],
-  cmd = "cp $< $@",
-)
-
-genrule(
-  name = "form_field_legacy_css",
-  srcs = [":form_field_legacy_scss.css"],
-  outs = ["form-field-legacy.css"],
-  cmd = "cp $< $@",
-)
-
-genrule(
-  name = "form_field_outline_css",
-  srcs = [":form_field_outline_scss.css"],
-  outs = ["form-field-outline.css"],
-  cmd = "cp $< $@",
-)
-
-genrule(
-  name = "form_field_standard_css",
-  srcs = [":form_field_standard_scss.css"],
-  outs = ["form-field-standard.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/grid-list/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "grid-list",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/grid-list",
-  assets = [":grid_list_css"] + glob(["**/*.html"]),
+  assets = [":grid-list.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/bidi",
@@ -27,15 +27,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "grid_list_css",
-  srcs = [":grid_list_scss.css"],
-  outs = ["grid-list.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/icon/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "icon",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/icon",
-  assets = [":icon_css"] + glob(["**/*.html"]),
+  assets = [":icon.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
   ],
@@ -26,16 +26,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "icon_css",
-  srcs = [":icon_scss.css"],
-  outs = ["icon.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/input/BUILD.bazel

@@ -8,7 +8,7 @@ ng_module(
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/input",
   assets = [
-    ":input_css",
+    ":input.css",
   ] + glob(["**/*.html"]),
   deps = [
     "@rxjs",
@@ -33,16 +33,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "input_css",
-  srcs = [":input_scss.css"],
-  outs = ["input.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/list/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "list",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/list",
-  assets = [":list_css"] + glob(["**/*.html"]),
+  assets = [":list.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/lib/divider",
@@ -32,15 +32,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib", "//src/lib/divider:divider_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "list_css",
-  srcs = [":list_scss.css"],
-  outs = ["list.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/menu/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "menu",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/menu",
-  assets = [":menu_css"] + glob(["**/*.html"]),
+  assets = [":menu.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
@@ -32,15 +32,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "menu_css",
-  srcs = [":menu_scss.css"],
-  outs = ["menu.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/paginator/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "paginator",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/paginator",
-  assets = [":paginator_css"] + glob(["**/*.html"]),
+  assets = [":paginator.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/lib/button",
@@ -31,16 +31,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "paginator_css",
-  srcs = [":paginator_scss.css"],
-  outs = ["paginator.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/prebuilt-themes/BUILD.bazel

@@ -6,28 +6,28 @@ package(default_visibility=["//visibility:public"])
 
 genrule(
   name = "indigo-pink",
-  srcs = ["//src/lib/core:indigo_pink_prebuilt.css"],
+  srcs = ["//src/lib/core:theming/prebuilt/indigo-pink.css"],
   outs = ["indigo-pink.css"],
   cmd = "cp $< $@",
 )
 
 genrule(
   name = "deeppurple-amber",
-  srcs = ["//src/lib/core:deeppurple-amber_prebuilt.css"],
+  srcs = ["//src/lib/core:theming/prebuilt/deeppurple-amber.css"],
   outs = ["deeppurple-amber.css"],
   cmd = "cp $< $@",
 )
 
 genrule(
   name = "pink-bluegrey",
-  srcs = ["//src/lib/core:pink-bluegrey_prebuilt.css"],
+  srcs = ["//src/lib/core:theming/prebuilt/pink-bluegrey.css"],
   outs = ["pink-bluegrey.css"],
   cmd = "cp $< $@",
 )
 
 genrule(
   name = "purple-green",
-  srcs = ["//src/lib/core:purple-green_prebuilt.css"],
+  srcs = ["//src/lib/core:theming/prebuilt/purple-green.css"],
   outs = ["purple-green.css"],
   cmd = "cp $< $@",
 )

src/lib/progress-bar/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "progress-bar",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/progress-bar",
-  assets = [":progress_bar_css"] + glob(["**/*.html"]),
+  assets = [":progress-bar.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
   ],
@@ -27,16 +27,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "progress_bar_css",
-  srcs = [":progress_bar_scss.css"],
-  outs = ["progress-bar.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/progress-spinner/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "progress-spinner",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/progress-spinner",
-  assets = [":progress_spinner_css"] + glob(["**/*.html"]),
+  assets = [":progress-spinner.css"] + glob(["**/*.html"]),
   deps = [
     "//src/cdk/platform",
     "//src/lib/core",
@@ -27,16 +27,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "progress_spinner_css",
-  srcs = [":progress_spinner_scss.css"],
-  outs = ["progress-spinner.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/radio/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "radio",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/radio",
-  assets = [":radio_css"] + glob(["**/*.html"]),
+  assets = [":radio.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
@@ -29,16 +29,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "radio_css",
-  srcs = [":radio_scss.css"],
-  outs = ["radio.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/select/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "select",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/select",
-  assets = [":select_css"] + glob(["**/*.html"]),
+  assets = [":select.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/lib/form-field",
@@ -34,16 +34,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "select_css",
-  srcs = [":select_scss.css"],
-  outs = ["select.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/sidenav/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "sidenav",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/sidenav",
-  assets = [":drawer_css"] + glob(["**/*.html"]),
+  assets = [":drawer.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
@@ -33,15 +33,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "drawer_css",
-  srcs = [":drawer_scss.css"],
-  outs = ["drawer.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/slide-toggle/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "slide-toggle",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/slide-toggle",
-  assets = [":slide_toggle_css"] + glob(["**/*.html"]),
+  assets = [":slide-toggle.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
@@ -30,16 +30,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "slide_toggle_css",
-  srcs = [":slide_toggle_scss.css"],
-  outs = ["slide-toggle.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/slider/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "slider",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/slider",
-  assets = [":slider_css"] + glob(["**/*.html"]),
+  assets = [":slider.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
@@ -31,16 +31,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "slider_css",
-  srcs = [":slider_scss.css"],
-  outs = ["slider.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/snack-bar/BUILD.bazel

@@ -8,8 +8,8 @@ ng_module(
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/snack-bar",
   assets = [
-    ":snack_bar_container_css",
-    "simple_snack_bar_css",
+    ":snack-bar-container.css",
+    ":simple-snack-bar.css",
   ] + glob(["**/*.html"]),
   deps = [
     "//src/lib/button",
@@ -41,24 +41,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "snack_bar_container_css",
-  srcs = [":snack_bar_container_scss.css"],
-  outs = ["snack-bar-container.css"],
-  cmd = "cp $< $@",
-)
-
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "simple_snack_bar_css",
-  srcs = [":simple_snack_bar_scss.css"],
-  outs = ["simple-snack-bar.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/sort/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "sort",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/sort",
-  assets = [":sort_header_css"] + glob(["**/*.html"]),
+  assets = [":sort-header.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/coercion",
@@ -29,15 +29,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "sort_header_css",
-  srcs = [":sort_header_scss.css"],
-  outs = ["sort-header.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/stepper/BUILD.bazel

@@ -8,8 +8,8 @@ ng_module(
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/stepper",
   assets = [
-    ":stepper_css",
-    ":step_header_css",
+    ":stepper.css",
+    ":step-header.css",
   ] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
@@ -43,24 +43,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "stepper_css",
-  srcs = [":stepper_scss.css"],
-  outs = ["stepper.css"],
-  cmd = "cp $< $@",
-)
-
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "step_header_css",
-  srcs = [":step_header_scss.css"],
-  outs = ["step-header.css"],
-  cmd = "cp $< $@",
-)
-
 
 sass_library(
   name = "theme",

src/lib/table/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "table",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/table",
-  assets = [":table_css"],
+  assets = [":table.css"],
   deps = [
     "//src/cdk/bidi",
     "//src/lib/core",
@@ -31,15 +31,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "table_css",
-  srcs = [":table_scss.css"],
-  outs = ["table.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/tabs/BUILD.bazel

@@ -8,10 +8,10 @@ ng_module(
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/tabs",
   assets = [
-    ":tab_body_css",
-    ":tab_header_css",
-    ":tab_group_css",
-    ":tab_nav_bar_css",
+    ":tab-body.css",
+    ":tab-header.css",
+    ":tab-group.css",
+    ":tab-nav-bar/tab-nav-bar.css",
   ] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
@@ -76,43 +76,6 @@ sass_binary(
   ],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "tab_body_css",
-  srcs = [":tab_body_scss.css"],
-  outs = ["tab-body.css"],
-  cmd = "cp $< $@",
-)
-
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "tab_header_css",
-  srcs = [":tab_header_scss.css"],
-  outs = ["tab-header.css"],
-  cmd = "cp $< $@",
-)
-
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "tab_group_css",
-  srcs = [":tab_group_scss.css"],
-  outs = ["tab-group.css"],
-  cmd = "cp $< $@",
-)
-
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "tab_nav_bar_css",
-  srcs = [":tab_nav_bar_scss.css"],
-  outs = ["tab-nav-bar/tab-nav-bar.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/toolbar/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "toolbar",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/toolbar",
-  assets = [":toolbar_css"] + glob(["**/*.html"]),
+  assets = [":toolbar.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/platform",
@@ -27,15 +27,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "toolbar_css",
-  srcs = [":toolbar_scss.css"],
-  outs = ["toolbar.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/tooltip/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "tooltip",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/tooltip",
-  assets = [":tooltip_css"] + glob(["**/*.html"]),
+  assets = [":tooltip.css"] + glob(["**/*.html"]),
   deps = [
     "//src/lib/core",
     "//src/cdk/a11y",
@@ -36,16 +36,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "tooltip_css",
-  srcs = [":tooltip_scss.css"],
-  outs = ["tooltip.css"],
-  cmd = "cp $< $@",
-)
-
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/tree/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
   name = "tree",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/tree",
-  assets = [":tree_css"] + glob(["**/*.html"]),
+  assets = [":tree.css"] + glob(["**/*.html"]),
   deps = [
     "//src/cdk/tree",
     "//src/lib/core",
@@ -28,15 +28,6 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
-# Copy the output of the sass_binary such that the filename and path match what we expect.
-genrule(
-  name = "tree_css",
-  srcs = [":tree_scss.css"],
-  outs = ["tree.css"],
-  cmd = "cp $< $@",
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),