build: avoid manual listing of MDC sass files in bazel setup (#19535)

In the past we listed all MDC sass files manually in a build file. This
has been done because we didn't want to spend too much time on improving
this. We certainly can by just extracting the Sass files from the NPM
package. This will reduce manual changes we need to make whenever MDC
moves files around.

Author: devversion

src/material-experimental/mdc-helpers/BUILD.bazel

@@ -1,4 +1,5 @@
 load("//tools:defaults.bzl", "sass_library")
+load("//tools:npm_sass_library.bzl", "npm_sass_library")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -7,286 +8,9 @@ filegroup(
     srcs = [":mdc_helpers_scss_lib"],
 )
 
-# Add all MDC Sass files that we depend on here. After updating MDC dependencies, use the following
-# command to generate an updated list:
-#
-# `find node_modules/@material/ -name "_*.scss" | sort | sed -r 's/(.*\/@material\/[^/]*)\/(.*)/"@npm\/\/\1:\2",/'`
-#
-# TODO(mmalerba): Find a less tedious way to do this...
-sass_library(
+npm_sass_library(
     name = "mdc_scss_deps_lib",
-    srcs = [
-        "@npm//:node_modules/@material/animation/_functions.import.scss",
-        "@npm//:node_modules/@material/animation/_functions.scss",
-        "@npm//:node_modules/@material/animation/_index.scss",
-        "@npm//:node_modules/@material/animation/_variables.import.scss",
-        "@npm//:node_modules/@material/animation/_variables.scss",
-        "@npm//:node_modules/@material/base/_index.scss",
-        "@npm//:node_modules/@material/base/_mixins.import.scss",
-        "@npm//:node_modules/@material/base/_mixins.scss",
-        "@npm//:node_modules/@material/button/_index.scss",
-        "@npm//:node_modules/@material/button/_mixins.import.scss",
-        "@npm//:node_modules/@material/button/_mixins.scss",
-        "@npm//:node_modules/@material/button/_variables.import.scss",
-        "@npm//:node_modules/@material/button/_variables.scss",
-        "@npm//:node_modules/@material/card/_index.scss",
-        "@npm//:node_modules/@material/card/_mixins.import.scss",
-        "@npm//:node_modules/@material/card/_mixins.scss",
-        "@npm//:node_modules/@material/card/_variables.import.scss",
-        "@npm//:node_modules/@material/card/_variables.scss",
-        "@npm//:node_modules/@material/checkbox/_functions.import.scss",
-        "@npm//:node_modules/@material/checkbox/_functions.scss",
-        "@npm//:node_modules/@material/checkbox/_index.scss",
-        "@npm//:node_modules/@material/checkbox/_keyframes.import.scss",
-        "@npm//:node_modules/@material/checkbox/_keyframes.scss",
-        "@npm//:node_modules/@material/checkbox/_mixins.import.scss",
-        "@npm//:node_modules/@material/checkbox/_mixins.scss",
-        "@npm//:node_modules/@material/checkbox/_variables.import.scss",
-        "@npm//:node_modules/@material/checkbox/_variables.scss",
-        "@npm//:node_modules/@material/chips/_index.scss",
-        "@npm//:node_modules/@material/chips/_mixins.import.scss",
-        "@npm//:node_modules/@material/chips/_mixins.scss",
-        "@npm//:node_modules/@material/chips/_variables.import.scss",
-        "@npm//:node_modules/@material/chips/_variables.scss",
-        "@npm//:node_modules/@material/chips/trailingaction/_index.scss",
-        "@npm//:node_modules/@material/chips/trailingaction/_mixins.scss",
-        "@npm//:node_modules/@material/chips/trailingaction/_variables.scss",
-        "@npm//:node_modules/@material/circular-progress/_index.scss",
-        "@npm//:node_modules/@material/circular-progress/_keyframes.import.scss",
-        "@npm//:node_modules/@material/circular-progress/_keyframes.scss",
-        "@npm//:node_modules/@material/circular-progress/_mixins.import.scss",
-        "@npm//:node_modules/@material/circular-progress/_mixins.scss",
-        "@npm//:node_modules/@material/circular-progress/_variables.import.scss",
-        "@npm//:node_modules/@material/circular-progress/_variables.scss",
-        "@npm//:node_modules/@material/data-table/_data-table.scss",
-        "@npm//:node_modules/@material/data-table/_data-table-theme.scss",
-        "@npm//:node_modules/@material/data-table/_index.scss",
-        "@npm//:node_modules/@material/data-table/_mixins.import.scss",
-        "@npm//:node_modules/@material/data-table/_mixins.scss",
-        "@npm//:node_modules/@material/data-table/_variables.import.scss",
-        "@npm//:node_modules/@material/data-table/_variables.scss",
-        "@npm//:node_modules/@material/density/_functions.import.scss",
-        "@npm//:node_modules/@material/density/_functions.scss",
-        "@npm//:node_modules/@material/density/_index.scss",
-        "@npm//:node_modules/@material/density/_variables.import.scss",
-        "@npm//:node_modules/@material/density/_variables.scss",
-        "@npm//:node_modules/@material/dialog/_index.scss",
-        "@npm//:node_modules/@material/dialog/_mixins.import.scss",
-        "@npm//:node_modules/@material/dialog/_mixins.scss",
-        "@npm//:node_modules/@material/dialog/_variables.import.scss",
-        "@npm//:node_modules/@material/dialog/_variables.scss",
-        "@npm//:node_modules/@material/dom/_index.scss",
-        "@npm//:node_modules/@material/dom/_mixins.scss",
-        "@npm//:node_modules/@material/drawer/_index.scss",
-        "@npm//:node_modules/@material/drawer/_mixins.import.scss",
-        "@npm//:node_modules/@material/drawer/_mixins.scss",
-        "@npm//:node_modules/@material/drawer/_variables.import.scss",
-        "@npm//:node_modules/@material/drawer/_variables.scss",
-        "@npm//:node_modules/@material/elevation/_functions.import.scss",
-        "@npm//:node_modules/@material/elevation/_functions.scss",
-        "@npm//:node_modules/@material/elevation/_index.scss",
-        "@npm//:node_modules/@material/elevation/_mixins.import.scss",
-        "@npm//:node_modules/@material/elevation/_mixins.scss",
-        "@npm//:node_modules/@material/elevation/_variables.import.scss",
-        "@npm//:node_modules/@material/elevation/_variables.scss",
-        "@npm//:node_modules/@material/fab/_index.scss",
-        "@npm//:node_modules/@material/fab/_mixins.import.scss",
-        "@npm//:node_modules/@material/fab/_mixins.scss",
-        "@npm//:node_modules/@material/fab/_variables.import.scss",
-        "@npm//:node_modules/@material/fab/_variables.scss",
-        "@npm//:node_modules/@material/feature-targeting/_functions.import.scss",
-        "@npm//:node_modules/@material/feature-targeting/_functions.scss",
-        "@npm//:node_modules/@material/feature-targeting/_index.scss",
-        "@npm//:node_modules/@material/feature-targeting/_mixins.import.scss",
-        "@npm//:node_modules/@material/feature-targeting/_mixins.scss",
-        "@npm//:node_modules/@material/feature-targeting/_variables.import.scss",
-        "@npm//:node_modules/@material/feature-targeting/_variables.scss",
-        "@npm//:node_modules/@material/floating-label/_index.scss",
-        "@npm//:node_modules/@material/floating-label/_mixins.import.scss",
-        "@npm//:node_modules/@material/floating-label/_mixins.scss",
-        "@npm//:node_modules/@material/floating-label/_variables.import.scss",
-        "@npm//:node_modules/@material/floating-label/_variables.scss",
-        "@npm//:node_modules/@material/form-field/_index.scss",
-        "@npm//:node_modules/@material/form-field/_mixins.import.scss",
-        "@npm//:node_modules/@material/form-field/_mixins.scss",
-        "@npm//:node_modules/@material/form-field/_variables.import.scss",
-        "@npm//:node_modules/@material/form-field/_variables.scss",
-        "@npm//:node_modules/@material/icon-button/_index.scss",
-        "@npm//:node_modules/@material/icon-button/_mixins.import.scss",
-        "@npm//:node_modules/@material/icon-button/_mixins.scss",
-        "@npm//:node_modules/@material/icon-button/_variables.import.scss",
-        "@npm//:node_modules/@material/icon-button/_variables.scss",
-        "@npm//:node_modules/@material/image-list/_index.scss",
-        "@npm//:node_modules/@material/image-list/_mixins.import.scss",
-        "@npm//:node_modules/@material/image-list/_mixins.scss",
-        "@npm//:node_modules/@material/image-list/_variables.import.scss",
-        "@npm//:node_modules/@material/image-list/_variables.scss",
-        "@npm//:node_modules/@material/layout-grid/_index.scss",
-        "@npm//:node_modules/@material/layout-grid/_mixins.import.scss",
-        "@npm//:node_modules/@material/layout-grid/_mixins.scss",
-        "@npm//:node_modules/@material/layout-grid/_variables.import.scss",
-        "@npm//:node_modules/@material/layout-grid/_variables.scss",
-        "@npm//:node_modules/@material/line-ripple/_functions.import.scss",
-        "@npm//:node_modules/@material/line-ripple/_functions.scss",
-        "@npm//:node_modules/@material/line-ripple/_index.scss",
-        "@npm//:node_modules/@material/line-ripple/_mixins.import.scss",
-        "@npm//:node_modules/@material/line-ripple/_mixins.scss",
-        "@npm//:node_modules/@material/linear-progress/_index.scss",
-        "@npm//:node_modules/@material/linear-progress/_keyframes.import.scss",
-        "@npm//:node_modules/@material/linear-progress/_keyframes.scss",
-        "@npm//:node_modules/@material/linear-progress/_mixins.import.scss",
-        "@npm//:node_modules/@material/linear-progress/_mixins.scss",
-        "@npm//:node_modules/@material/linear-progress/_variables.import.scss",
-        "@npm//:node_modules/@material/linear-progress/_variables.scss",
-        "@npm//:node_modules/@material/list/_index.scss",
-        "@npm//:node_modules/@material/list/_mixins.import.scss",
-        "@npm//:node_modules/@material/list/_mixins.scss",
-        "@npm//:node_modules/@material/list/_variables.import.scss",
-        "@npm//:node_modules/@material/list/_variables.scss",
-        "@npm//:node_modules/@material/menu-surface/_index.scss",
-        "@npm//:node_modules/@material/menu-surface/_mixins.import.scss",
-        "@npm//:node_modules/@material/menu-surface/_mixins.scss",
-        "@npm//:node_modules/@material/menu-surface/_variables.import.scss",
-        "@npm//:node_modules/@material/menu-surface/_variables.scss",
-        "@npm//:node_modules/@material/menu/_index.scss",
-        "@npm//:node_modules/@material/menu/_mixins.import.scss",
-        "@npm//:node_modules/@material/menu/_mixins.scss",
-        "@npm//:node_modules/@material/menu/_variables.import.scss",
-        "@npm//:node_modules/@material/menu/_variables.scss",
-        "@npm//:node_modules/@material/notched-outline/_index.scss",
-        "@npm//:node_modules/@material/notched-outline/_mixins.import.scss",
-        "@npm//:node_modules/@material/notched-outline/_mixins.scss",
-        "@npm//:node_modules/@material/notched-outline/_variables.import.scss",
-        "@npm//:node_modules/@material/notched-outline/_variables.scss",
-        "@npm//:node_modules/@material/radio/_functions.import.scss",
-        "@npm//:node_modules/@material/radio/_functions.scss",
-        "@npm//:node_modules/@material/radio/_index.scss",
-        "@npm//:node_modules/@material/radio/_mixins.import.scss",
-        "@npm//:node_modules/@material/radio/_mixins.scss",
-        "@npm//:node_modules/@material/radio/_variables.import.scss",
-        "@npm//:node_modules/@material/radio/_variables.scss",
-        "@npm//:node_modules/@material/ripple/_functions.import.scss",
-        "@npm//:node_modules/@material/ripple/_functions.scss",
-        "@npm//:node_modules/@material/ripple/_index.scss",
-        "@npm//:node_modules/@material/ripple/_keyframes.import.scss",
-        "@npm//:node_modules/@material/ripple/_keyframes.scss",
-        "@npm//:node_modules/@material/ripple/_mixins.import.scss",
-        "@npm//:node_modules/@material/ripple/_mixins.scss",
-        "@npm//:node_modules/@material/ripple/_variables.import.scss",
-        "@npm//:node_modules/@material/ripple/_variables.scss",
-        "@npm//:node_modules/@material/rtl/_index.scss",
-        "@npm//:node_modules/@material/rtl/_mixins.import.scss",
-        "@npm//:node_modules/@material/rtl/_mixins.scss",
-        "@npm//:node_modules/@material/rtl/_variables.import.scss",
-        "@npm//:node_modules/@material/rtl/_variables.scss",
-        "@npm//:node_modules/@material/select/_functions.import.scss",
-        "@npm//:node_modules/@material/select/_functions.scss",
-        "@npm//:node_modules/@material/select/_index.scss",
-        "@npm//:node_modules/@material/select/_mixins.import.scss",
-        "@npm//:node_modules/@material/select/_mixins.scss",
-        "@npm//:node_modules/@material/select/_variables.import.scss",
-        "@npm//:node_modules/@material/select/_variables.scss",
-        "@npm//:node_modules/@material/select/helper-text/_index.scss",
-        "@npm//:node_modules/@material/select/helper-text/_mixins.import.scss",
-        "@npm//:node_modules/@material/select/helper-text/_mixins.scss",
-        "@npm//:node_modules/@material/select/icon/_index.scss",
-        "@npm//:node_modules/@material/select/icon/_mixins.import.scss",
-        "@npm//:node_modules/@material/select/icon/_mixins.scss",
-        "@npm//:node_modules/@material/select/icon/_variables.import.scss",
-        "@npm//:node_modules/@material/select/icon/_variables.scss",
-        "@npm//:node_modules/@material/shape/_functions.import.scss",
-        "@npm//:node_modules/@material/shape/_functions.scss",
-        "@npm//:node_modules/@material/shape/_index.scss",
-        "@npm//:node_modules/@material/shape/_mixins.import.scss",
-        "@npm//:node_modules/@material/shape/_mixins.scss",
-        "@npm//:node_modules/@material/shape/_variables.import.scss",
-        "@npm//:node_modules/@material/shape/_variables.scss",
-        "@npm//:node_modules/@material/slider/_index.scss",
-        "@npm//:node_modules/@material/slider/_keyframes.import.scss",
-        "@npm//:node_modules/@material/slider/_keyframes.scss",
-        "@npm//:node_modules/@material/slider/_mixins.import.scss",
-        "@npm//:node_modules/@material/slider/_mixins.scss",
-        "@npm//:node_modules/@material/slider/_variables.import.scss",
-        "@npm//:node_modules/@material/slider/_variables.scss",
-        "@npm//:node_modules/@material/snackbar/_index.scss",
-        "@npm//:node_modules/@material/snackbar/_mixins.import.scss",
-        "@npm//:node_modules/@material/snackbar/_mixins.scss",
-        "@npm//:node_modules/@material/snackbar/_variables.import.scss",
-        "@npm//:node_modules/@material/snackbar/_variables.scss",
-        "@npm//:node_modules/@material/switch/_functions.import.scss",
-        "@npm//:node_modules/@material/switch/_functions.scss",
-        "@npm//:node_modules/@material/switch/_index.scss",
-        "@npm//:node_modules/@material/switch/_mixins.import.scss",
-        "@npm//:node_modules/@material/switch/_mixins.scss",
-        "@npm//:node_modules/@material/switch/_variables.import.scss",
-        "@npm//:node_modules/@material/switch/_variables.scss",
-        "@npm//:node_modules/@material/tab-bar/_index.scss",
-        "@npm//:node_modules/@material/tab-bar/_mixins.import.scss",
-        "@npm//:node_modules/@material/tab-bar/_mixins.scss",
-        "@npm//:node_modules/@material/tab-bar/_variables.import.scss",
-        "@npm//:node_modules/@material/tab-bar/_variables.scss",
-        "@npm//:node_modules/@material/tab-indicator/_index.scss",
-        "@npm//:node_modules/@material/tab-indicator/_mixins.import.scss",
-        "@npm//:node_modules/@material/tab-indicator/_mixins.scss",
-        "@npm//:node_modules/@material/tab-scroller/_index.scss",
-        "@npm//:node_modules/@material/tab-scroller/_mixins.import.scss",
-        "@npm//:node_modules/@material/tab-scroller/_mixins.scss",
-        "@npm//:node_modules/@material/tab-scroller/_variables.import.scss",
-        "@npm//:node_modules/@material/tab-scroller/_variables.scss",
-        "@npm//:node_modules/@material/tab/_index.scss",
-        "@npm//:node_modules/@material/tab/_mixins.import.scss",
-        "@npm//:node_modules/@material/tab/_mixins.scss",
-        "@npm//:node_modules/@material/tab/_variables.import.scss",
-        "@npm//:node_modules/@material/tab/_variables.scss",
-        "@npm//:node_modules/@material/textfield/_functions.import.scss",
-        "@npm//:node_modules/@material/textfield/_functions.scss",
-        "@npm//:node_modules/@material/textfield/_index.scss",
-        "@npm//:node_modules/@material/textfield/_mixins.import.scss",
-        "@npm//:node_modules/@material/textfield/_mixins.scss",
-        "@npm//:node_modules/@material/textfield/_variables.import.scss",
-        "@npm//:node_modules/@material/textfield/_variables.scss",
-        "@npm//:node_modules/@material/textfield/character-counter/_index.scss",
-        "@npm//:node_modules/@material/textfield/character-counter/_mixins.import.scss",
-        "@npm//:node_modules/@material/textfield/character-counter/_mixins.scss",
-        "@npm//:node_modules/@material/textfield/helper-text/_index.scss",
-        "@npm//:node_modules/@material/textfield/helper-text/_mixins.import.scss",
-        "@npm//:node_modules/@material/textfield/helper-text/_mixins.scss",
-        "@npm//:node_modules/@material/textfield/icon/_index.scss",
-        "@npm//:node_modules/@material/textfield/icon/_mixins.import.scss",
-        "@npm//:node_modules/@material/textfield/icon/_mixins.scss",
-        "@npm//:node_modules/@material/textfield/icon/_variables.import.scss",
-        "@npm//:node_modules/@material/textfield/icon/_variables.scss",
-        "@npm//:node_modules/@material/theme/_color-palette.import.scss",
-        "@npm//:node_modules/@material/theme/_color-palette.scss",
-        "@npm//:node_modules/@material/theme/_constants.import.scss",
-        "@npm//:node_modules/@material/theme/_constants.scss",
-        "@npm//:node_modules/@material/theme/_custom-properties.scss",
-        "@npm//:node_modules/@material/theme/_functions.import.scss",
-        "@npm//:node_modules/@material/theme/_functions.scss",
-        "@npm//:node_modules/@material/theme/_gss.scss",
-        "@npm//:node_modules/@material/theme/_index.scss",
-        "@npm//:node_modules/@material/theme/_mixins.import.scss",
-        "@npm//:node_modules/@material/theme/_mixins.scss",
-        "@npm//:node_modules/@material/theme/_variables.import.scss",
-        "@npm//:node_modules/@material/theme/_variables.scss",
-        "@npm//:node_modules/@material/top-app-bar/_index.scss",
-        "@npm//:node_modules/@material/top-app-bar/_mixins.import.scss",
-        "@npm//:node_modules/@material/top-app-bar/_mixins.scss",
-        "@npm//:node_modules/@material/top-app-bar/_variables.import.scss",
-        "@npm//:node_modules/@material/top-app-bar/_variables.scss",
-        "@npm//:node_modules/@material/touch-target/_index.scss",
-        "@npm//:node_modules/@material/touch-target/_mixins.import.scss",
-        "@npm//:node_modules/@material/touch-target/_mixins.scss",
-        "@npm//:node_modules/@material/touch-target/_variables.import.scss",
-        "@npm//:node_modules/@material/touch-target/_variables.scss",
-        "@npm//:node_modules/@material/typography/_functions.import.scss",
-        "@npm//:node_modules/@material/typography/_functions.scss",
-        "@npm//:node_modules/@material/typography/_index.scss",
-        "@npm//:node_modules/@material/typography/_mixins.import.scss",
-        "@npm//:node_modules/@material/typography/_mixins.scss",
-        "@npm//:node_modules/@material/typography/_variables.import.scss",
-        "@npm//:node_modules/@material/typography/_variables.scss",
-    ],
+    deps = ["@npm//material-components-web"],
 )
 
 sass_library(