refactor: add duplicated theme styles check to all individual theme mixins

Adds the duplicated theme styles check to all individual theme mixins.
Also, adds a lint rule that enforces that the theme styles check is
included in every theme mixin w/ autofix.

Author: devversion

.stylelintrc.json

@@ -6,13 +6,15 @@
     "./tools/stylelint/selector-no-deep.ts",
     "./tools/stylelint/no-nested-mixin.ts",
     "./tools/stylelint/no-concrete-rules.ts",
-    "./tools/stylelint/no-top-level-ampersand-in-mixin.ts"
+    "./tools/stylelint/no-top-level-ampersand-in-mixin.ts",
+    "./tools/stylelint/theme-duplicate-styles-check.js"
   ],
   "rules": {
     "material/no-prefixes": [true, {
       "browsers": ["last 2 versions", "not ie <= 10", "not ie_mob <= 10"],
       "filePattern": "**/!(*-example.css)"
     }],
+    "material/theme-duplicate-styles-check": true,
     "material/selector-no-deep": true,
     "material/no-nested-mixin": true,
     "material/no-ampersand-beyond-selector-start": [true, {

guides/duplicate-theming-styles.md

@@ -63,20 +63,6 @@ extract the configuration for the color system from the theme.
 }
 ```
 
-Alternatively, a new theme object can be constructed that explicitly disables
-styles from other systems such as `density` or `typography`:
-
-```scss
-.my-custom-dark-button {
-  $only-color-theme: map_merge($my-theme, (
-    density: null,
-    typography: null
-  ));
-  // This will only generate the color styles for `mat-button`.
-  @include mat-button-theme($only-color-theme);
-}
-```
-
 #### Disabling duplication warnings
 
 If your application intentionally duplicates styles, a global Sass variable can be

src/dev-app/theme.scss

@@ -6,7 +6,7 @@
 @import '../material/core/theming/all-theme';
 @import '../material-experimental/column-resize/column-resize';
 @import '../material-experimental/mdc-helpers/mdc-helpers';
-@import '../material-experimental/mdc-helpers/focus-indicator';
+@import '../material-experimental/mdc-helpers/focus-indicators';
 @import '../material-experimental/mdc-color/all-color';
 @import '../material-experimental/mdc-theming/all-theme';
 @import '../material-experimental/mdc-typography/all-typography';
@@ -69,14 +69,14 @@ $dark-theme: mat-dark-theme((
 .demo-unicorn-dark-theme {
   @include angular-material-color($dark-theme);
   @include angular-material-mdc-color($dark-theme);
-  @include mat-column-resize-theme($dark-theme);
-  @include mat-popover-edit-theme($dark-theme);
+  @include mat-column-resize-color(map_get($dark-theme, color));
+  @include mat-popover-edit-color(map_get($dark-theme, color));
 }
 
 // Include the dark theme for focus indicators.
 .demo-unicorn-dark-theme.demo-strong-focus {
-  @include mat-strong-focus-indicators-theme($dark-theme);
-  @include mat-mdc-strong-focus-indicators-theme($dark-theme);
+  @include mat-strong-focus-indicators-color(map_get($dark-theme, color));
+  @include mat-mdc-strong-focus-indicators-color(map_get($dark-theme, color));
 }
 
 // Create classes for all density scales which are supported by all MDC-based components.

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

@@ -100,6 +100,7 @@
 @mixin mat-column-resize-density($density-scale) {}
 
 @mixin mat-column-resize-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-column-resize');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -15,6 +15,7 @@
 @mixin mat-mdc-autocomplete-density($density-scale) {}
 
 @mixin mat-mdc-autocomplete-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-autocomplete');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -180,6 +180,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 @mixin mat-mdc-button-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-button');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);
@@ -253,6 +254,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 @mixin mat-mdc-fab-density($density-scale) {}
 
 @mixin mat-mdc-fab-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-fab');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);
@@ -325,6 +327,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 @mixin mat-mdc-icon-button-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -49,6 +49,7 @@
 @mixin mat-mdc-card-density($density-scale) {}
 
 @mixin mat-mdc-card-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-card');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -84,6 +84,7 @@
 }
 
 @mixin mat-mdc-checkbox-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -68,6 +68,7 @@
 }
 
 @mixin mat-mdc-chips-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-chips');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -76,6 +76,7 @@
 }
 
 @mixin mat-mdc-form-field-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-form-field');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

src/material-experimental/mdc-helpers/_focus-indicator.scss renamed to src/material-experimental/mdc-helpers/_focus-indicators.scss

@@ -102,11 +102,13 @@
 ///   .demo-red-theme {
 ///     @include mat-mdc-strong-focus-indicators-theme(#f00);
 ///   }
+/* stylelint-disable-next-line material/theme-duplicate-styles-check */
 @mixin mat-mdc-strong-focus-indicators-theme($theme-or-color) {
   @if type-of($theme-or-color) != 'map' {
     @include _mat-mdc-strong-focus-indicators-border-color($theme-or-color);
   }
   @else {
+    @include _mat-check-duplicate-theme-styles($theme-or-color, 'mat-mdc-strong-focus-indicators');
     $color: mat-get-color-config($theme-or-color);
     @if $color != null {
       @include mat-mdc-strong-focus-indicators-color($color);

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

@@ -8,6 +8,7 @@
 @import '@material/typography/variables.import';
 @import '../../material/core/style/layout-common';
 @import '../../material/core/theming/theming';
+@import '../../material/core/theming/check-duplicate-styles';
 @import '../../material/core/typography/typography';
 
 // A set of standard queries to use with MDC's queryable mixins.
@@ -113,6 +114,7 @@ $mat-typography-level-mappings: (
 
 // Configures MDC's global variables to reflect the given theme, applies the given styles,
 // then resets the global variables to prevent unintended side effects.
+/* stylelint-disable-next-line material/theme-duplicate-styles-check */
 @mixin mat-using-mdc-theme($config) {
   $primary: mat-color(map-get($config, primary));
   $accent: mat-color(map-get($config, accent));

src/material-experimental/mdc-input/_input-theme.scss

@@ -11,6 +11,7 @@
 @mixin mat-mdc-input-density($density-scale) {}
 
 @mixin mat-mdc-input-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-input');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -52,6 +52,7 @@
 }
 
 @mixin mat-mdc-list-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-list');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

src/material-experimental/mdc-menu/_menu-theme.scss

@@ -53,6 +53,7 @@
 @mixin mat-mdc-menu-density($density-scale) {}
 
 @mixin mat-mdc-menu-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-menu');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -35,6 +35,7 @@
 @mixin mat-mdc-progress-bar-density($density-scale) {}
 
 @mixin mat-mdc-progress-bar-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-progress-bar');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

src/material-experimental/mdc-radio/_radio-theme.scss

@@ -51,6 +51,7 @@
 }
 
 @mixin mat-mdc-radio-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-radio');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

src/material-experimental/mdc-select/_select-theme.scss

@@ -15,6 +15,7 @@
 @mixin mat-mdc-select-density($density-scale) {}
 
 @mixin mat-mdc-select-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-select');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -15,6 +15,7 @@
 @mixin mat-mdc-sidenav-density($density-scale) {}
 
 @mixin mat-mdc-sidenav-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-sidenav');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss

@@ -91,6 +91,7 @@
 }
 
 @mixin mat-mdc-slide-toggle-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -26,6 +26,7 @@
 @mixin mat-mdc-slider-density($density-scale) {}
 
 @mixin mat-mdc-slider-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-slider');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

src/material-experimental/mdc-snackbar/_snackbar-theme.scss

@@ -9,6 +9,7 @@
 @mixin mat-mdc-snackbar-density($density-scale) {}
 
 @mixin mat-mdc-snackbar-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-snackbar');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

src/material-experimental/mdc-table/_table-theme.scss

@@ -54,6 +54,7 @@
 }
 
 @mixin mat-mdc-table-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-table');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -106,6 +106,7 @@
 }
 
 @mixin mat-mdc-tabs-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-tabs');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -15,21 +15,22 @@
 @import '../../material/core/theming/check-duplicate-styles';
 
 @mixin angular-material-mdc-theme($theme) {
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc');
-  @include mat-mdc-button-theme($theme);
-  @include mat-mdc-fab-theme($theme);
-  @include mat-mdc-icon-button-theme($theme);
-  @include mat-mdc-card-theme($theme);
-  @include mat-mdc-checkbox-theme($theme);
-  @include mat-mdc-chips-theme($theme);
-  @include mat-mdc-list-theme($theme);
-  @include mat-mdc-menu-theme($theme);
-  @include mat-mdc-progress-bar-theme($theme);
-  @include mat-mdc-radio-theme($theme);
-  @include mat-mdc-slide-toggle-theme($theme);
-  @include mat-mdc-table-theme($theme);
-  @include mat-mdc-form-field-theme($theme);
-  @include mat-mdc-input-theme($theme);
-  @include mat-mdc-slider-theme($theme);
-  @include mat-mdc-tabs-theme($theme);
+  @include _mat-check-duplicate-theme-styles($theme, 'angular-material-mdc-theme') {
+    @include mat-mdc-button-theme($theme);
+    @include mat-mdc-fab-theme($theme);
+    @include mat-mdc-icon-button-theme($theme);
+    @include mat-mdc-card-theme($theme);
+    @include mat-mdc-checkbox-theme($theme);
+    @include mat-mdc-chips-theme($theme);
+    @include mat-mdc-list-theme($theme);
+    @include mat-mdc-menu-theme($theme);
+    @include mat-mdc-progress-bar-theme($theme);
+    @include mat-mdc-radio-theme($theme);
+    @include mat-mdc-slide-toggle-theme($theme);
+    @include mat-mdc-table-theme($theme);
+    @include mat-mdc-form-field-theme($theme);
+    @include mat-mdc-input-theme($theme);
+    @include mat-mdc-slider-theme($theme);
+    @include mat-mdc-tabs-theme($theme);
+  }
 }

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

@@ -151,6 +151,7 @@
 @mixin mat-popover-edit-density($density-scale) {}
 
 @mixin mat-popover-edit-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-popover-edit');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

src/material/autocomplete/_autocomplete-theme.scss

@@ -1,5 +1,6 @@
 @import '../core/style/elevation';
 @import '../core/theming/theming';
+@import '../core/theming/check-duplicate-styles';
 
 @mixin mat-autocomplete-color($config) {
   $foreground: map-get($config, foreground);
@@ -30,6 +31,7 @@
 @mixin _mat-autocomplete-density($density-scale) { }
 
 @mixin mat-autocomplete-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-autocomplete');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

src/material/badge/_badge-theme.scss

@@ -3,6 +3,7 @@
 // no style sheet support for directives.
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/theming/check-duplicate-styles';
 @import '../core/typography/typography-utils';
 @import '../../cdk/a11y/a11y';
 
@@ -206,6 +207,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 @mixin _mat-badge-density($density-scale) {}
 
 @mixin mat-badge-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-badge');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -2,6 +2,7 @@
 @import '../core/typography/typography-utils';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/theming/check-duplicate-styles';
 
 @mixin mat-bottom-sheet-color($theme) {
   $background: map-get($theme, background);
@@ -23,6 +24,7 @@
 @mixin _mat-bottom-sheet-density($density-scale) {}
 
 @mixin mat-bottom-sheet-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-bottom-sheet');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

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

@@ -2,6 +2,7 @@
 @import '../core/style/elevation';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/theming/check-duplicate-styles';
 @import '../core/typography/typography-utils';
 @import '../core/density/index';
 @import './button-toggle-variables';
@@ -106,6 +107,7 @@
 }
 
 @mixin mat-button-toggle-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-button-toggle');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);

src/material/button/_button-theme.scss

@@ -1,6 +1,7 @@
 @import '../core/theming/theming';
 @import '../core/style/elevation';
 @import '../core/typography/typography-utils';
+@import '../core/theming/check-duplicate-styles';
 
 $_mat-button-ripple-opacity: 0.1;
 
@@ -172,6 +173,7 @@ $_mat-button-ripple-opacity: 0.1;
 @mixin _mat-button-density($density-scale) {}
 
 @mixin mat-button-theme($theme) {
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-button');
   $color: mat-get-color-config($theme);
   $density: mat-get-density-config($theme);
   $typography: mat-get-typography-config($theme);