refactor: migrate to the Sass module system (#5453)

BREAKING CHANGE: Four variables and a mixin in mdc-textfield were renamed to use a mdc-text-field- prefix when depended on via @import (formerly mdc-required-text-field-label-asterisk_, now required-label-asterisk_).

Author: jathak

package.json

@@ -78,7 +78,7 @@
     "cross-env": "^5.0.0",
     "css-loader": "^2.0.0",
     "cssom": "^0.3.2",
-    "dart-sass": "^1.15.2",
+    "dart-sass": "^1.24.3",
     "debounce": "^1.1.0",
     "del": "^4.0.0",
     "detect-port": "^1.2.3",
@@ -138,7 +138,7 @@
     "stylelint": "^9.2.1",
     "stylelint-config-standard": "^18.0.0",
     "stylelint-order": "^2.0.0",
-    "stylelint-scss": "^3.0.0",
+    "stylelint-scss": "^3.13.0",
     "stylelint-selector-bem-pattern": "^2.1.0",
     "testdouble": "^3.2.4",
     "to-slug-case": "^1.0.0",

packages/mdc-animation/_functions.import.scss

@@ -0,0 +1,2 @@
+@forward "variables" as mdc-animation-*;
+@forward "functions" as mdc-animation-*;

packages/mdc-animation/_functions.scss

@@ -20,20 +20,20 @@
 // THE SOFTWARE.
 //
 
-@import "./variables";
+@use "./variables";
 
-@function mdc-animation-enter($name, $duration, $delay: 0ms) {
-  @return $name $duration $delay $mdc-animation-deceleration-curve-timing-function;
+@function enter($name, $duration, $delay: 0ms) {
+  @return $name $duration $delay variables.$deceleration-curve-timing-function;
 }
 
-@function mdc-animation-exit-permanent($name, $duration, $delay: 0ms) {
-  @return $name $duration $delay $mdc-animation-acceleration-curve-timing-function;
+@function exit-permanent($name, $duration, $delay: 0ms) {
+  @return $name $duration $delay variables.$acceleration-curve-timing-function;
 }
 
-@function mdc-animation-exit-temporary($name, $duration, $delay: 0ms) {
-  @return $name $duration $delay $mdc-animation-sharp-curve-timing-function;
+@function exit-temporary($name, $duration, $delay: 0ms) {
+  @return $name $duration $delay variables.$sharp-curve-timing-function;
 }
 
-@function mdc-animation-standard($name, $duration, $delay: 0ms) {
-  @return $name $duration $delay $mdc-animation-standard-curve-timing-function;
+@function standard($name, $duration, $delay: 0ms) {
+  @return $name $duration $delay variables.$standard-curve-timing-function;
 }

packages/mdc-animation/_variables.import.scss

@@ -0,0 +1 @@
+@forward "variables" as mdc-animation-*;

packages/mdc-animation/_variables.scss

@@ -20,7 +20,7 @@
 // THE SOFTWARE.
 //
 
-$mdc-animation-deceleration-curve-timing-function: cubic-bezier(0, 0, .2, 1) !default;
-$mdc-animation-standard-curve-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
-$mdc-animation-acceleration-curve-timing-function: cubic-bezier(.4, 0, 1, 1) !default;
-$mdc-animation-sharp-curve-timing-function: cubic-bezier(.4, 0, .6, 1) !default;
+$deceleration-curve-timing-function: cubic-bezier(0, 0, .2, 1) !default;
+$standard-curve-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
+$acceleration-curve-timing-function: cubic-bezier(.4, 0, 1, 1) !default;
+$sharp-curve-timing-function: cubic-bezier(.4, 0, .6, 1) !default;

packages/mdc-base/_mixins.import.scss

@@ -0,0 +1 @@
+@forward "mixins" as mdc-base-*;

packages/mdc-base/_mixins.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 //
 // Copyright 2018 Google Inc.
 //
@@ -22,11 +23,11 @@
 
 // This variable is not intended to be overridden externally; it uses !default to avoid being reset
 // every time this file is imported.
-$mdc-base-styles-emitted_: () !default;
+$styles-emitted_: () !default;
 
-@mixin mdc-base-emit-once($key) {
-  @if not index($mdc-base-styles-emitted_, $key) {
-    $mdc-base-styles-emitted_: append($mdc-base-styles-emitted_, $key, comma) !global;
+@mixin emit-once($key) {
+  @if not list.index($styles-emitted_, $key) {
+    $styles-emitted_: list.append($styles-emitted_, $key, comma) !global;
 
     @content;
   }

packages/mdc-button/_mixins.import.scss

@@ -0,0 +1,37 @@
+@forward "@material/base/mixins" as mdc-base-*;
+@forward "@material/feature-targeting/variables" as mdc-feature-*;
+@forward "@material/feature-targeting/mixins" as mdc-feature-*;
+@forward "@material/theme/constants" as mdc-theme-*;
+@forward "@material/theme/variables" as mdc-theme-*;
+@forward "@material/animation/variables" as mdc-animation-*;
+@forward "@material/elevation/variables" as mdc-elevation-*;
+@forward "@material/ripple/variables" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;
+@forward "@material/ripple/variables" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;
+@forward "@material/rtl/variables" as mdc-rtl-*;
+@forward "@material/touch-target/variables" as mdc-touch-target-*;
+@forward "@material/typography/variables" as mdc-typography-*;
+@forward "@material/shape/variables" as mdc-shape-*;
+@forward "@material/density/variables" as mdc-density-*;
+@forward "variables" as mdc-button-*;
+@forward "@material/theme/mixins" as mdc-theme-*;
+@forward "@material/elevation/mixins" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;
+@forward "@material/elevation/mixins" as mdc-elevation-* hide mdc-elevation-elevation;
+@forward "@material/ripple/keyframes" as mdc-ripple-*;
+@forward "@material/ripple/mixins" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;
+@forward "@material/ripple/mixins" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;
+@forward "@material/rtl/mixins" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;
+@forward "@material/rtl/mixins" as mdc-rtl-* hide mdc-rtl-rtl;
+@forward "@material/touch-target/mixins" as mdc-* hide mdc-margin, mdc-wrapper;
+@forward "@material/touch-target/mixins" as mdc-touch-target-* hide mdc-touch-target-touch-target;
+@forward "@material/typography/mixins" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;
+@forward "@material/typography/mixins" as mdc-typography-* hide mdc-typography-typography;
+@forward "@material/shape/mixins" as mdc-shape-*;
+@forward "@material/feature-targeting/functions" as mdc-feature-*;
+@forward "@material/theme/functions" as mdc-theme-*;
+@forward "@material/elevation/functions" as mdc-elevation-*;
+@forward "@material/animation/functions" as mdc-animation-*;
+@forward "@material/ripple/functions" as mdc-*;
+@forward "@material/typography/functions" as mdc-typography-*;
+@forward "@material/shape/functions" as mdc-shape-*;
+@forward "@material/density/functions" as mdc-density-*;
+@forward "mixins" as mdc-button-*;