From 94f4ce1c72e50beccd0813087dc42a7589567364 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@gmail.com>
Date: Wed, 6 Jun 2018 22:54:28 -0700
Subject: [PATCH] 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                                  |  9 ++--
 src/cdk-experimental/dialog/BUILD.bazel    | 10 +----
 src/cdk-experimental/scrolling/BUILD.bazel | 10 +----
 src/cdk/text-field/BUILD.bazel             |  9 ----
 src/lib/autocomplete/BUILD.bazel           | 11 +----
 src/lib/bottom-sheet/BUILD.bazel           | 11 +----
 src/lib/button-toggle/BUILD.bazel          | 11 +----
 src/lib/button/BUILD.bazel                 | 12 +-----
 src/lib/card/BUILD.bazel                   | 11 +----
 src/lib/checkbox/BUILD.bazel               | 12 +-----
 src/lib/chips/BUILD.bazel                  | 12 +-----
 src/lib/core/BUILD.bazel                   | 29 ++-----------
 src/lib/datepicker/BUILD.bazel             | 42 ++-----------------
 src/lib/dialog/BUILD.bazel                 | 11 +----
 src/lib/divider/BUILD.bazel                | 11 +----
 src/lib/expansion/BUILD.bazel              | 22 +---------
 src/lib/form-field/BUILD.bazel             | 49 +++-------------------
 src/lib/grid-list/BUILD.bazel              | 11 +----
 src/lib/icon/BUILD.bazel                   | 12 +-----
 src/lib/input/BUILD.bazel                  | 12 +-----
 src/lib/list/BUILD.bazel                   | 11 +----
 src/lib/menu/BUILD.bazel                   | 11 +----
 src/lib/paginator/BUILD.bazel              | 12 +-----
 src/lib/prebuilt-themes/BUILD.bazel        |  8 ++--
 src/lib/progress-bar/BUILD.bazel           | 12 +-----
 src/lib/progress-spinner/BUILD.bazel       | 12 +-----
 src/lib/radio/BUILD.bazel                  | 12 +-----
 src/lib/select/BUILD.bazel                 | 12 +-----
 src/lib/sidenav/BUILD.bazel                | 11 +----
 src/lib/slide-toggle/BUILD.bazel           | 12 +-----
 src/lib/slider/BUILD.bazel                 | 12 +-----
 src/lib/snack-bar/BUILD.bazel              | 22 +---------
 src/lib/sort/BUILD.bazel                   | 11 +----
 src/lib/stepper/BUILD.bazel                | 22 +---------
 src/lib/table/BUILD.bazel                  | 11 +----
 src/lib/tabs/BUILD.bazel                   | 45 ++------------------
 src/lib/toolbar/BUILD.bazel                | 11 +----
 src/lib/tooltip/BUILD.bazel                | 12 +-----
 src/lib/tree/BUILD.bazel                   | 11 +----
 39 files changed, 61 insertions(+), 526 deletions(-)

diff --git a/WORKSPACE b/WORKSPACE
index d03bdc1ff63..9b1d7c0ed84 100644
--- a/WORKSPACE
+++ b/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
diff --git a/src/cdk-experimental/dialog/BUILD.bazel b/src/cdk-experimental/dialog/BUILD.bazel
index efbfb01f52a..9f88f69c05c 100644
--- a/src/cdk-experimental/dialog/BUILD.bazel
+++ b/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 $< $@",
-)
diff --git a/src/cdk-experimental/scrolling/BUILD.bazel b/src/cdk-experimental/scrolling/BUILD.bazel
index 2e7fcb97bd5..9fdbbb7b575 100644
--- a/src/cdk-experimental/scrolling/BUILD.bazel
+++ b/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",
diff --git a/src/cdk/text-field/BUILD.bazel b/src/cdk/text-field/BUILD.bazel
index d3677240854..77ac7736405 100644
--- a/src/cdk/text-field/BUILD.bazel
+++ b/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 $< $@",
-)
diff --git a/src/lib/autocomplete/BUILD.bazel b/src/lib/autocomplete/BUILD.bazel
index 4d1f2486b75..6b0e675da16 100644
--- a/src/lib/autocomplete/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/bottom-sheet/BUILD.bazel b/src/lib/bottom-sheet/BUILD.bazel
index 5b6eb40444c..e81a23f8217 100644
--- a/src/lib/bottom-sheet/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/button-toggle/BUILD.bazel b/src/lib/button-toggle/BUILD.bazel
index 78cb729c10a..3ecdc12d637 100644
--- a/src/lib/button-toggle/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/button/BUILD.bazel b/src/lib/button/BUILD.bazel
index 301acb24b38..a5dc89c9597 100644
--- a/src/lib/button/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/card/BUILD.bazel b/src/lib/card/BUILD.bazel
index b766537cc7f..137abbd253c 100644
--- a/src/lib/card/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/checkbox/BUILD.bazel b/src/lib/checkbox/BUILD.bazel
index 70786050e98..bcaebd0e7a6 100644
--- a/src/lib/checkbox/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/chips/BUILD.bazel b/src/lib/chips/BUILD.bazel
index 714bccf3ba0..410f454fa06 100644
--- a/src/lib/chips/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/core/BUILD.bazel b/src/lib/core/BUILD.bazel
index 8e3c6f55315..5467e4086e9 100644
--- a/src/lib/core/BUILD.bazel
+++ b/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 = [
diff --git a/src/lib/datepicker/BUILD.bazel b/src/lib/datepicker/BUILD.bazel
index e14898c758e..75e64a82037 100644
--- a/src/lib/datepicker/BUILD.bazel
+++ b/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",
diff --git a/src/lib/dialog/BUILD.bazel b/src/lib/dialog/BUILD.bazel
index 32d768b3e9b..b0b68133b9a 100644
--- a/src/lib/dialog/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/divider/BUILD.bazel b/src/lib/divider/BUILD.bazel
index 2687e16ecbe..cc174ef49a8 100644
--- a/src/lib/divider/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/expansion/BUILD.bazel b/src/lib/expansion/BUILD.bazel
index 1fd54e79c10..61052b661f0 100644
--- a/src/lib/expansion/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/form-field/BUILD.bazel b/src/lib/form-field/BUILD.bazel
index 528002dbba2..406114b5ca4 100644
--- a/src/lib/form-field/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/grid-list/BUILD.bazel b/src/lib/grid-list/BUILD.bazel
index 0002339f9cd..a88f611d22b 100644
--- a/src/lib/grid-list/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/icon/BUILD.bazel b/src/lib/icon/BUILD.bazel
index b4af0e74e86..14cd337951e 100644
--- a/src/lib/icon/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/input/BUILD.bazel b/src/lib/input/BUILD.bazel
index c6a10e4cb0b..ff939c5053b 100644
--- a/src/lib/input/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/list/BUILD.bazel b/src/lib/list/BUILD.bazel
index c4ff1366e98..b88a8e6cf54 100644
--- a/src/lib/list/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/menu/BUILD.bazel b/src/lib/menu/BUILD.bazel
index 41549800e7b..b03388badc4 100644
--- a/src/lib/menu/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/paginator/BUILD.bazel b/src/lib/paginator/BUILD.bazel
index 741956bca57..a832ef0c1ed 100644
--- a/src/lib/paginator/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/prebuilt-themes/BUILD.bazel b/src/lib/prebuilt-themes/BUILD.bazel
index 6db80f22356..4bc98821f9f 100644
--- a/src/lib/prebuilt-themes/BUILD.bazel
+++ b/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 $< $@",
 )
diff --git a/src/lib/progress-bar/BUILD.bazel b/src/lib/progress-bar/BUILD.bazel
index 8f30a701d5b..4a43dc0b3dd 100644
--- a/src/lib/progress-bar/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/progress-spinner/BUILD.bazel b/src/lib/progress-spinner/BUILD.bazel
index 9d863993e5d..0e68ac77ed8 100644
--- a/src/lib/progress-spinner/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/radio/BUILD.bazel b/src/lib/radio/BUILD.bazel
index f288a59d1d3..fcfe022d875 100644
--- a/src/lib/radio/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/select/BUILD.bazel b/src/lib/select/BUILD.bazel
index f5df710a75d..2df59b50d53 100644
--- a/src/lib/select/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/sidenav/BUILD.bazel b/src/lib/sidenav/BUILD.bazel
index 5b22e77191d..5a41cad8bbf 100644
--- a/src/lib/sidenav/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/slide-toggle/BUILD.bazel b/src/lib/slide-toggle/BUILD.bazel
index 5a4bb397fbd..df73202b988 100644
--- a/src/lib/slide-toggle/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/slider/BUILD.bazel b/src/lib/slider/BUILD.bazel
index 0c3536046ca..dd265a16634 100644
--- a/src/lib/slider/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/snack-bar/BUILD.bazel b/src/lib/snack-bar/BUILD.bazel
index eff4885b0b8..b0b064321f6 100644
--- a/src/lib/snack-bar/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/sort/BUILD.bazel b/src/lib/sort/BUILD.bazel
index 8052fcd7289..92070b47d2d 100644
--- a/src/lib/sort/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/stepper/BUILD.bazel b/src/lib/stepper/BUILD.bazel
index 4aedaaaa94d..29a8f46cff3 100644
--- a/src/lib/stepper/BUILD.bazel
+++ b/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",
diff --git a/src/lib/table/BUILD.bazel b/src/lib/table/BUILD.bazel
index b21a162b924..109bc51e2fb 100644
--- a/src/lib/table/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/tabs/BUILD.bazel b/src/lib/tabs/BUILD.bazel
index cbff2f3c796..c2cf6a13753 100644
--- a/src/lib/tabs/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/toolbar/BUILD.bazel b/src/lib/toolbar/BUILD.bazel
index f5283540c92..17b0ccb3db7 100644
--- a/src/lib/toolbar/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/tooltip/BUILD.bazel b/src/lib/tooltip/BUILD.bazel
index 3942df8082c..6aaca4e6e96 100644
--- a/src/lib/tooltip/BUILD.bazel
+++ b/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"]),
diff --git a/src/lib/tree/BUILD.bazel b/src/lib/tree/BUILD.bazel
index 60a65d3dd42..860ae6930dd 100644
--- a/src/lib/tree/BUILD.bazel
+++ b/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"]),