refactor(material/core): post-migration fixup

scripts/migrate-sass-modules.js

@@ -3,6 +3,16 @@ const path = require('path');
 const fs = require('fs');
 const {sync: glob} = require('glob');
 
+// Script that migrates the library source to the Sass module system while maintaining
+// backwards-compatibility. The script assumes that `sass-migrator` is installed
+// globally and that the results will be committed. Works by migrating the .scss files
+// based on their position in the dependency tree, starting with the files that are depended
+// upon the most and working downwards. Furthermore, because the `sass-migrator` isn't able to
+// pick up imports from the `node_modules`, there is a workaround that comments out all of the
+// imports from `@material/*`, runs the migration and re-adds the imports back. The script also
+// sorts all remaining `@import` statements lower than `@use` statements to avoid compilation
+// errors and auto-fixes some linting failures that are generated by the migrator.
+
 const directory = path.join(__dirname, '../src');
 const migratedFiles = new Set();
 const ignorePatterns = [

src/cdk/overlay/_overlay.import.scss

@@ -1,3 +1,8 @@
-@forward 'overlay' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop, $z-index-overlay-container, overlay;
-@forward 'overlay' as cdk-* hide $cdk-backdrop-animation-duration, $cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background;
-@forward 'overlay' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration, $cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay, $cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container, cdk-overlay-overlay;
+@forward 'overlay' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop,
+  $z-index-overlay-container, overlay;
+@forward 'overlay' as cdk-* hide $cdk-backdrop-animation-duration,
+  $cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background;
+@forward 'overlay' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration,
+  $cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay,
+  $cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container,
+  cdk-overlay-overlay;

src/cdk/text-field/_text-field.import.scss

@@ -1,3 +1,5 @@
 @forward 'text-field' hide $autofill-color-frame-count, autofill-color, text-field;
-@forward 'text-field' as cdk-* hide $cdk-autofill-color-frame-count, cdk-autofill-color, cdk-textarea-autosize-measuring-base;
-@forward 'text-field' as cdk-text-field-* hide cdk-text-field-text-field, cdk-text-field-textarea-autosize-measuring-base;
+@forward 'text-field' as cdk-* hide $cdk-autofill-color-frame-count, cdk-autofill-color,
+  cdk-textarea-autosize-measuring-base;
+@forward 'text-field' as cdk-text-field-* hide cdk-text-field-text-field,
+  cdk-text-field-textarea-autosize-measuring-base;

src/material-experimental/column-resize/_column-resize.scss

@@ -40,7 +40,9 @@
     bottom: 0;
     position: absolute;
     top: 0;
-    transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+    transition: background
+                variables.$swift-ease-in-duration
+                variables.$swift-ease-in-timing-function;
     width: 1px;
   }
 
@@ -84,7 +86,9 @@
     background: transparent;
     cursor: col-resize;
     height: 100%;
-    transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+    transition: background
+                variables.$swift-ease-in-duration
+                variables.$swift-ease-in-timing-function;
     @include vendor-prefixes.user-select(none);
     width: 100%;
 

src/material-experimental/mdc-button/_button-theme.import.scss

@@ -1,6 +1,17 @@
 @forward '../mdc-helpers/mdc-helpers.import';
 @forward '../../material/core/ripple/ripple.import';
 @forward '../mdc-helpers/mdc-helpers';
-@forward 'button-theme' hide color, density, fab-color, fab-density, fab-theme, fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, theme, typography;
-@forward 'button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color, mat-mdc-density, mat-mdc-mat-button-apply-disabled-style, mat-mdc-mat-button-disabled-background, mat-mdc-mat-button-disabled-color, mat-mdc-mat-button-ripple-ink-color, mat-mdc-theme, mat-mdc-typography;
-@forward 'button-theme' as mat-mdc-button-* hide $mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density, mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme, mat-mdc-button-icon-button-typography, mat-mdc-button-mat-button-apply-disabled-style, mat-mdc-button-mat-button-disabled-background, mat-mdc-button-mat-button-disabled-color, mat-mdc-button-mat-button-ripple-ink-color;
+@forward 'button-theme' hide color, density, fab-color, fab-density, fab-theme, fab-typography,
+  icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, theme,
+  typography;
+@forward 'button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color,
+  mat-mdc-density, mat-mdc-mat-button-apply-disabled-style, mat-mdc-mat-button-disabled-background,
+  mat-mdc-mat-button-disabled-color, mat-mdc-mat-button-ripple-ink-color, mat-mdc-theme,
+  mat-mdc-typography;
+@forward 'button-theme' as mat-mdc-button-* hide $mat-mdc-button-mat-button-state-target,
+  mat-mdc-button-fab-color, mat-mdc-button-fab-density, mat-mdc-button-fab-theme,
+  mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color,
+  mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme,
+  mat-mdc-button-icon-button-typography, mat-mdc-button-mat-button-apply-disabled-style,
+  mat-mdc-button-mat-button-disabled-background, mat-mdc-button-mat-button-disabled-color,
+  mat-mdc-button-mat-button-ripple-ink-color;

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

@@ -63,63 +63,68 @@ $mat-button-state-target: '.mdc-button__ripple';
 
     .mat-mdc-button, .mat-mdc-outlined-button {
       &.mat-unthemed {
-        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
         @include mdc-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(primary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
         @include mdc-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(secondary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
         @include mdc-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(error);
       }
     }
 
     .mat-mdc-raised-button,
     .mat-mdc-unelevated-button {
       &.mat-unthemed {
-        @include mdc-button-container-fill-color(
-            mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-container-fill-color(mdc-helpers.$mdc-theme-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-states-base-color(
           mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
       }
 
       &.mat-primary {
-        @include mdc-button-container-fill-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-container-fill-color(primary,
+          $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-button-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          on-primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
-        @include mdc-button-container-fill-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-container-fill-color(secondary,
+          $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-button-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          on-secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
-        @include mdc-button-container-fill-color(error, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-container-fill-color(error,
+          $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-button-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(on-error);
       }
 
@@ -130,7 +135,8 @@ $mat-button-state-target: '.mdc-button__ripple';
 
     .mat-mdc-outlined-button {
       &.mat-unthemed {
-        @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
@@ -214,29 +220,33 @@ $mat-button-state-target: '.mdc-button__ripple';
         @include mdc-states-base-color(
           mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
-        @include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
         @include mdc-states-base-color(
-          on-primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          on-primary, $query: mdc-helpers.$mat-theme-styles-query,
+            $ripple-target: $mat-button-state-target);
         @include mdc-fab-container-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
-        @include mdc-states-base-color(
-          on-secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-fab-container-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
         @include mdc-states-base-color(
-          on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          on-error, $query: mdc-helpers.$mat-theme-styles-query,
+            $ripple-target: $mat-button-state-target);
         @include mdc-fab-container-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-error);
@@ -290,29 +300,30 @@ $mat-button-state-target: '.mdc-button__ripple';
           $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
 
       &.mat-unthemed {
-        @include mdc-states-base-color(
-          mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: $mat-button-state-target);
-        @include mdc-icon-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-icon-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
         @include mdc-states-base-color(
-          primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          primary, $query: mdc-helpers.$mat-theme-styles-query,
+            $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
-        @include mdc-states-base-color(
-          secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(secondary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
-        @include mdc-states-base-color(
-          error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(error);
       }

src/material-experimental/mdc-card/_card-theme.import.scss

@@ -1,4 +1,5 @@
 @forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
 @forward 'card-theme' hide color, density, theme, typography;
-@forward 'card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, $mat-mdc-card-mdc-card-outline-color;
+@forward 'card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color,
+  $mat-mdc-card-mdc-card-outline-color;

src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss

@@ -1,5 +1,10 @@
 @forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
-@forward 'checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme, typography;
-@forward 'checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color, $mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography;
-@forward 'checkbox-theme' as mat-mdc-checkbox-* hide $mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color, mat-mdc-checkbox-private-checkbox-styles-with-color;
+@forward 'checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme,
+  typography;
+@forward 'checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
+  $mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme,
+  mat-mdc-typography;
+@forward 'checkbox-theme' as mat-mdc-checkbox-* hide $mat-mdc-checkbox-mdc-checkbox-border-color,
+  $mat-mdc-checkbox-mdc-checkbox-disabled-color,
+  mat-mdc-checkbox-private-checkbox-styles-with-color;

src/material-experimental/mdc-chips/_chips-theme.import.scss

@@ -1,4 +1,5 @@
 @forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
 @forward 'chips-theme' hide color, density, theme, typography;
-@forward 'chips-theme' as mat-mdc-chips-* hide $mat-mdc-chips-mdc-chips-fill-color-default, $mat-mdc-chips-mdc-chips-icon-color, $mat-mdc-chips-mdc-chips-ink-color-default;
+@forward 'chips-theme' as mat-mdc-chips-* hide $mat-mdc-chips-mdc-chips-fill-color-default,
+  $mat-mdc-chips-mdc-chips-icon-color, $mat-mdc-chips-mdc-chips-ink-color-default;

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

@@ -35,19 +35,22 @@
 
       &.mat-primary {
         &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include mdc-chip-fill-color-accessible($primary, $query: mdc-helpers.$mat-theme-styles-query);
+          @include mdc-chip-fill-color-accessible($primary,
+            $query: mdc-helpers.$mat-theme-styles-query);
         }
       }
 
       &.mat-accent {
         &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include mdc-chip-fill-color-accessible($accent, $query: mdc-helpers.$mat-theme-styles-query);
+          @include mdc-chip-fill-color-accessible($accent,
+            $query: mdc-helpers.$mat-theme-styles-query);
         }
       }
 
       &.mat-warn {
         &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include mdc-chip-fill-color-accessible($warn, $query: mdc-helpers.$mat-theme-styles-query);
+          @include mdc-chip-fill-color-accessible($warn,
+            $query: mdc-helpers.$mat-theme-styles-query);
         }
       }
     }