fix(material-experimental): errors with latest MDC canary version (#18173)

A few hours ago MDC switched all their Sass to use the new Sass modules (see material-components/material-components-web@faa9af3). This breaks our MDC components since they've been set up to use global Sass variables. These changes switch all the imports to the `.import` files which use the old approach for exposing variables.

(cherry picked from commit 1b16701)

Author: crisbeto

package.json

@@ -54,7 +54,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "5.0.0-canary.b602226ce.0",
+    "material-components-web": "5.0.0-canary.faa9af310.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tslib": "^1.10.0",
@@ -127,7 +127,7 @@
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
     "moment": "^2.18.1",
-    "node-sass": "^4.12.0",
+    "sass": "^1.24.4",
     "parse5": "^5.0.0",
     "protractor": "^5.4.2",
     "requirejs": "^2.3.6",

src/material-experimental/mdc-button/_mdc-button.scss

@@ -1,8 +1,8 @@
-@import '@material/button/mixins';
-@import '@material/button/variables';
-@import '@material/fab/mixins';
-@import '@material/ripple/mixins';
-@import '@material/icon-button/mixins';
+@import '@material/button/mixins.import';
+@import '@material/button/variables.import';
+@import '@material/fab/mixins.import';
+@import '@material/ripple/mixins.import';
+@import '@material/icon-button/mixins.import';
 @import '../../material/core/ripple/ripple';
 @import '../mdc-helpers/mdc-helpers';
 

src/material-experimental/mdc-button/button.scss

@@ -1,6 +1,6 @@
-@import '@material/button/mixins';
-@import '@material/button/variables';
-@import '@material/ripple/mixins';
+@import '@material/button/mixins.import';
+@import '@material/button/variables.import';
+@import '@material/ripple/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import '../../cdk/a11y/a11y';
 @import '_button-base';

src/material-experimental/mdc-button/fab.scss

@@ -1,6 +1,6 @@
-@import '@material/fab/mixins';
-@import '@material/button/variables';
-@import '@material/theme/variables';
+@import '@material/fab/mixins.import';
+@import '@material/button/variables.import';
+@import '@material/theme/variables.import';
 @import '../mdc-helpers/mdc-helpers';
 @import '_button-base';
 

src/material-experimental/mdc-button/icon-button.scss

@@ -1,4 +1,4 @@
-@import '@material/icon-button/mixins';
+@import '@material/icon-button/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import '_button-base';
 

src/material-experimental/mdc-card/_mdc-card.scss

@@ -1,5 +1,5 @@
-@import '@material/card/mixins';
-@import '@material/typography/mixins';
+@import '@material/card/mixins.import';
+@import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-card-theme-mdc($theme) {

src/material-experimental/mdc-card/card.scss

@@ -1,4 +1,4 @@
-@import '@material/card/mixins';
+@import '@material/card/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import '../../cdk/a11y/a11y';
 

src/material-experimental/mdc-checkbox/_mdc-checkbox.scss

@@ -1,8 +1,8 @@
-@import '@material/checkbox/mixins';
-@import '@material/checkbox/variables';
-@import '@material/form-field/mixins';
-@import '@material/ripple/variables';
-@import '@material/theme/functions';
+@import '@material/checkbox/mixins.import';
+@import '@material/checkbox/variables.import';
+@import '@material/form-field/mixins.import';
+@import '@material/ripple/variables.import';
+@import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-checkbox-theme-mdc($theme) {

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -1,7 +1,7 @@
-@import '@material/checkbox/functions';
-@import '@material/checkbox/mixins';
-@import '@material/form-field/mixins';
-@import '@material/ripple/variables';
+@import '@material/checkbox/functions.import';
+@import '@material/checkbox/mixins.import';
+@import '@material/form-field/mixins.import';
+@import '@material/ripple/variables.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @include mdc-checkbox-without-ripple($query: $mat-base-styles-query);

src/material-experimental/mdc-chips/_mdc-chips.scss

@@ -1,6 +1,6 @@
-@import '@material/chips/mixins';
+@import '@material/chips/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
-@import '@material/theme/functions';
+@import '@material/theme/functions.import';
 
 @mixin mat-chips-theme-mdc($theme) {
   @include mdc-chip-set-core-styles($query: $mat-theme-styles-query);

src/material-experimental/mdc-chips/chips.scss

@@ -1,4 +1,4 @@
-@import '@material/chips/mixins';
+@import '@material/chips/mixins.import';
 @import '../../material/core/style/layout-common';
 @import '../../material/core/style/noop-animation';
 @import '../../cdk/a11y/a11y';

src/material-experimental/mdc-form-field/_form-field-sizing.scss

@@ -1,4 +1,4 @@
-@import '@material/textfield/variables';
+@import '@material/textfield/variables.import';
 
 // Top spacing of the form-field outline. MDC does not have a variable for this
 // and just hard-codes it into their styles.

src/material-experimental/mdc-form-field/_mdc-form-field.scss

@@ -1,4 +1,4 @@
-@import '@material/textfield/variables';
+@import '@material/textfield/variables.import';
 @import '../mdc-helpers/mdc-helpers';
 @import 'form-field-subscript';
 @import 'form-field-bottom-line';

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

@@ -16,112 +16,218 @@ filegroup(
 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/_variables.import.scss",
         "@npm//:node_modules/@material/animation/_variables.scss",
+        "@npm//:node_modules/@material/base/_mixins.import.scss",
         "@npm//:node_modules/@material/base/_mixins.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/_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/_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/_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/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/_variables.import.scss",
         "@npm//:node_modules/@material/density/_variables.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/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/_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/_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/_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/_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/_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/grid-list/_mixins.import.scss",
         "@npm//:node_modules/@material/grid-list/_mixins.scss",
+        "@npm//:node_modules/@material/grid-list/_variables.import.scss",
         "@npm//:node_modules/@material/grid-list/_variables.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/_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/_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/_mixins.import.scss",
         "@npm//:node_modules/@material/line-ripple/_mixins.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/_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/_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/_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/_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/_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/_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/_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/_keyframes.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/_mixins.import.scss",
         "@npm//:node_modules/@material/select/helper-text/_mixins.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/_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/_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/_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/_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/_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/_mixins.import.scss",
         "@npm//:node_modules/@material/tab-indicator/_mixins.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/_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/_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/_mixins.import.scss",
         "@npm//:node_modules/@material/textfield/character-counter/_mixins.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/_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/_functions.import.scss",
         "@npm//:node_modules/@material/theme/_functions.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/_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/_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/_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",
     ],
 )

src/material-experimental/mdc-helpers/_mdc-helpers.scss

@@ -2,10 +2,10 @@
 //  "theming", "typography", "core". Currently splitting it is difficult because of our brittle
 //  gulp-based release build process. We can update this when we switch to bazel.
 
-@import '@material/feature-targeting/functions';
-@import '@material/theme/functions';
-@import '@material/theme/variables';
-@import '@material/typography/variables';
+@import '@material/feature-targeting/functions.import';
+@import '@material/theme/functions.import';
+@import '@material/theme/variables.import';
+@import '@material/typography/variables.import';
 @import '../../material/core/theming/theming';
 @import '../../material/core/typography/typography';