build: add lint rule for unused Sass imports (#22454)

Since all the imports are namespaced now, it's trivial to figure out whether they're being used. These changes add a custom lint rule and fix all of the failures.

Author: crisbeto

.stylelintrc.json

@@ -10,7 +10,8 @@
     "./tools/stylelint/no-top-level-ampersand-in-mixin.ts",
     "./tools/stylelint/theme-mixin-api.ts",
     "./tools/stylelint/no-import.ts",
-    "./tools/stylelint/single-line-comment-only.ts"
+    "./tools/stylelint/single-line-comment-only.ts",
+    "./tools/stylelint/no-unused-import.ts"
   ],
   "rules": {
     "material/no-prefixes": [true, {
@@ -20,6 +21,7 @@
     "material/theme-mixin-api": true,
     "material/selector-no-deep": true,
     "material/no-nested-mixin": true,
+    "material/no-unused-import": true,
     "material/single-line-comment-only": [true, {
       "filePattern": "\\.scss$"
     }],

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

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '../../material/core/style/variables';
 @use '../../material/core/style/vendor-prefixes';
-@use '../../material/core/theming/palette';
 @use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {

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

@@ -1,7 +1,6 @@
 @use '@material/menu-surface/mixins' as mdc-menu-surface;
 @use '@material/list/mixins' as mdc-list;
 @use '../../cdk/a11y';
-@use '../mdc-helpers/mdc-helpers';
 
 @include mdc-menu-surface.core-styles($query: structure);
 

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

@@ -1,5 +1,4 @@
 @use '@material/checkbox' as mdc-checkbox;
-@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '@material/ripple' as mdc-ripple;
 @use 'sass:map';

src/material-experimental/mdc-form-field/_form-field-native-select.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
 @use '../../cdk/a11y';
 @use '../../material/core/theming/palette';
 @use '@material/theme/theme-color' as mdc-theme-color;

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

@@ -1,4 +1,3 @@
-@use '@material/ripple/mixins' as mdc-ripple;
 @use '@material/textfield' as mdc-textfield;
 @use '@material/floating-label' as mdc-floating-label;
 @use '@material/notched-outline' as mdc-notched-outline;

src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss

@@ -1,5 +1,3 @@
-@use 'form-field-sizing';
-
 // MDCs default textarea styles cannot be used because they only apply if a special
 // class is applied to the "mdc-text-field" wrapper. Since we cannot know whether the
 // registered form-field control is a textarea and MDC by default does not have styles

src/material-experimental/mdc-helpers/_focus-indicators.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../material/core/style/layout-common';
-@use '../../material/core/focus-indicators/focus-indicators';
 
 /// Mixin that turns on strong focus indicators.
 ///

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

@@ -4,10 +4,8 @@
 
 @use '@material/feature-targeting' as mdc-feature-targeting;
 @use '@material/typography' as mdc-typography;
-@use '@material/theme/functions' as mdc-theme-functions;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use 'sass:map';
-@use '../../material/core/style/layout-common';
 @use '../../material/core/theming/theming';
 @use '../../material/core/typography/typography';
 @use '../../material/core/typography/typography-utils';

src/material-experimental/mdc-list/_interactive-list-theme.scss

@@ -1,6 +1,5 @@
 @use '@material/ripple' as mdc-ripple;
 @use 'sass:map';
-@use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 
 // Mixin that provides colors for the various states of an interactive list-item. MDC

src/material-experimental/mdc-sidenav/_sidenav-theme.scss

@@ -1,4 +1,3 @@
-@use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {}

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

@@ -1,6 +1,5 @@
 // TODO: disabled until we implement the new MDC slider.
 // @use '@material/slider' as mdc-slider;
-@use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
 
 $mat-slider-min-size: 128px !default;

src/material-experimental/mdc-tabs/_tabs-common.scss

@@ -1,8 +1,6 @@
 @use '@material/ripple' as mdc-ripple;
 @use '@material/tab' as mdc-tab;
 @use 'sass:map';
-@use '../../material/core/style/variables';
-@use '../../material/core/style/private';
 @use '../../material/core/style/vendor-prefixes';
 @use '../../cdk/a11y';
 @use '../mdc-helpers/mdc-helpers';

src/material-experimental/mdc-tabs/tab-body.scss

@@ -1,4 +1,3 @@
-@use '../../material/core/style/vendor-prefixes';
 @use '../../material/core/style/layout-common';
 
 // Wraps each tab body. We need to add these styles ourselves,

src/material-experimental/mdc-tabs/tab-header.scss

@@ -1,5 +1,4 @@
 @use '@material/tab-indicator' as mdc-tab-indicator;
-@use '../../material/core/style/private';
 @use '../mdc-helpers/mdc-helpers';
 @use './tabs-common';
 

src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.scss

@@ -1,6 +1,4 @@
 @use '../tabs-common';
-@use '../../../material/core/style/variables';
-@use '../../mdc-helpers/mdc-helpers';
 
 @include tabs-common.paginated-tab-header;
 

src/material-experimental/mdc-theming/_all-theme.scss

@@ -19,7 +19,6 @@
 @use '../mdc-progress-spinner/progress-spinner-theme';
 @use '../mdc-input/input-theme';
 @use '../mdc-form-field/form-field-theme';
-@use '../../material/core/core';
 @use '../../material/core/theming/theming';
 
 @mixin all-mdc-component-themes($theme-or-color-config) {

src/material-experimental/popover-edit/_popover-edit-theme.scss

@@ -2,7 +2,6 @@
 @use '../../cdk/a11y';
 @use '../../material/core/style/variables';
 @use '../../material/core/style/private';
-@use '../../material/core/theming/palette';
 @use '../../material/core/theming/theming';
 @use '../../material/core/typography/typography';
 @use '../../material/core/typography/typography-utils';

src/material/badge/_badge-theme.scss

@@ -4,7 +4,6 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';

src/material/bottom-sheet/_bottom-sheet-theme.scss

@@ -2,7 +2,6 @@
 @use '../core/style/private';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 
 @mixin color($config-or-theme) {

src/material/button-toggle/_button-toggle-theme.scss

@@ -1,7 +1,5 @@
 @use 'sass:map';
-@use '../../cdk/a11y';
 @use '../core/style/private';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';

src/material/card/_card-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/private';
 @use '../core/typography/typography';

src/material/checkbox/checkbox.scss

@@ -1,8 +1,6 @@
 @use 'sass:math';
-@use '../core/theming/theming';
 @use '../core/style/elevation';
 @use '../core/style/checkbox-common';
-@use '../core/ripple/ripple';
 @use '../core/style/layout-common';
 @use '../core/style/vendor-prefixes';
 @use '../core/style/private';

src/material/chips/_chips-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '../core/style/private';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';

src/material/core/option/_optgroup-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../theming/palette';
 @use '../theming/theming';
 @use '../typography/typography';
 @use '../typography/typography-utils';

src/material/core/option/_option-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../theming/palette';
 @use '../theming/theming';
 @use '../typography/typography';
 @use '../typography/typography-utils';

src/material/core/style/_checkbox-common.scss

@@ -1,5 +1,3 @@
-@use './variables';
-
 // The width/height of the checkbox element.
 $size: 16px !default;
 

src/material/core/style/_menu-common.scss

@@ -1,7 +1,5 @@
-@use './variables';
 @use './list-common';
 @use './layout-common';
-@use './vendor-prefixes';
 
 // The mixins below are shared between mat-menu and mat-select
 

src/material/datepicker/_datepicker-theme.scss

@@ -3,7 +3,6 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use '../core/style/private';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';

src/material/dialog/_dialog-theme.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../core/style/private';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';

src/material/dialog/dialog.scss

@@ -1,4 +1,3 @@
-@use '../core/style/vendor-prefixes';
 @use '../../cdk/a11y';
 
 

src/material/divider/_divider-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 
 @mixin color($config-or-theme) {

src/material/expansion/_expansion-theme.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../core/density/private/compatibility';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/private';
 @use '../core/typography/typography';

src/material/form-field/_form-field-fill-theme.scss

@@ -1,7 +1,5 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
-@use '../core/style/form-common';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 

src/material/form-field/_form-field-legacy-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/form-common';
 @use '../core/typography/typography';

src/material/form-field/_form-field-outline-theme.scss

@@ -1,7 +1,5 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
-@use '../core/style/form-common';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 

src/material/form-field/_form-field-standard-theme.scss

@@ -1,8 +1,6 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/form-common';
-@use '../core/typography/typography-utils';
 
 
 // Theme styles that only apply to the standard appearance of the form-field.

src/material/form-field/_form-field-theme.scss

@@ -1,7 +1,5 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
-@use '../core/style/form-common';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 

src/material/form-field/form-field-fill.scss

@@ -1,5 +1,4 @@
 @use '../core/style/variables';
-@use '../core/style/vendor-prefixes';
 @use '../../cdk/a11y';
 
 // Styles that only apply to the fill appearance of the form-field.

src/material/form-field/form-field-legacy.scss

@@ -1,5 +1,3 @@
-@use '../core/style/variables';
-@use '../core/style/vendor-prefixes';
 @use '../../cdk/a11y';
 
 

src/material/form-field/form-field-outline.scss

@@ -1,5 +1,4 @@
 @use '../core/style/variables';
-@use '../core/style/vendor-prefixes';
 
 // Styles that only apply to the outline appearance of the form-field.
 

src/material/form-field/form-field-standard.scss

@@ -1,5 +1,4 @@
 @use '../core/style/variables';
-@use '../core/style/vendor-prefixes';
 @use '../../cdk/a11y';
 
 

src/material/form-field/form-field.scss

@@ -1,5 +1,4 @@
 @use '../core/style/variables';
-@use '../core/style/vendor-prefixes';
 @use '../../cdk/a11y';
 
 

src/material/grid-list/_grid-list-theme.scss

@@ -1,4 +1,3 @@
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';

src/material/icon/icon.scss

@@ -1,6 +1,3 @@
-@use '../core/style/variables';
-
-
 // The width/height of the icon element.
 $size: 24px !default;
 

src/material/list/_list-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';

src/material/list/list.scss

@@ -1,4 +1,3 @@
-@use '../core/style/variables';
 @use '../core/style/list-common';
 @use '../core/style/layout-common';
 @use '../divider/divider-offset';

src/material/menu/_menu-theme.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../core/style/private';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';

src/material/paginator/_paginator-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';

src/material/progress-bar/_progress-bar-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:color';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 
 // Approximates the correct buffer color by using a mix between the theme color

src/material/progress-bar/progress-bar.scss

@@ -1,4 +1,3 @@
-@use '../core/style/variables';
 @use '../core/style/vendor-prefixes';
 @use '../core/style/private';
 @use '../../cdk/a11y';

src/material/progress-spinner/_progress-spinner-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 
 @mixin color($config-or-theme) {

src/material/radio/_radio-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';

src/material/select/_select-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/private';
 @use '../core/style/form-common';

src/material/sidenav/_sidenav-theme.scss

@@ -2,7 +2,6 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '../core/style/private';
-@use '../core/theming/palette';
 @use '../core/theming/theming';
 
 @mixin color($config-or-theme) {

src/material/sidenav/drawer.scss

@@ -1,6 +1,5 @@
 @use '../core/style/variables';
 @use '../core/style/layout-common';
-@use '../core/style/vendor-prefixes';
 @use '../../cdk/a11y';
 
 $drawer-content-z-index: 1;