fix(material/schematics): delete legacy mixin when migrating if new mixin is already present

Author: mmalerba

integration/mdc-migration/golden/src/styles.scss

@@ -47,7 +47,6 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.progress-bar-theme($sample-project-theme);
 @include mat.progress-spinner-theme($sample-project-theme);
 @include mat.radio-theme($sample-project-theme);
-@include mat.legacy-select-theme($sample-project-theme);
 @include mat.slide-toggle-theme($sample-project-theme);
 @include mat.slider-theme($sample-project-theme);
 @include mat.snack-bar-theme($sample-project-theme);

src/material/schematics/ng-generate/mdc-migration/rules/components/multiple-components-styles.spec.ts

@@ -60,6 +60,26 @@ describe('multiple component styles', () => {
       );
     });
 
+    it('should remove legacy mixin if all replacements are already accounted for', async () => {
+      await runMigrationTest(
+        ['paginator', 'select'],
+        `
+          @use '@angular/material' as mat;
+          $theme: ();
+          @include mat.legacy-paginator-theme($theme);
+          @include mat.legacy-select-theme($theme);
+          `,
+        `
+          @use '@angular/material' as mat;
+          $theme: ();
+          @include mat.paginator-theme($theme);
+          @include mat.icon-button-theme($theme);
+          @include mat.form-field-theme($theme);
+          @include mat.select-theme($theme);
+          `,
+      );
+    });
+
     it('should migrate all component mixins for a full migration', async () => {
       await runMigrationTest(
         ['all'],

src/material/schematics/ng-generate/mdc-migration/rules/style-migrator.ts

@@ -26,7 +26,7 @@ export interface MixinChange {
   old: string;
 
   /** The name(s) of the new scss mixin(s). */
-  new: string[];
+  new: string[] | null;
 
   /** Optional check to see if new scss mixin(s) already exist in the styles */
   checkForDuplicates?: boolean;
@@ -75,7 +75,7 @@ export abstract class StyleMigrator {
     }
 
     // Check if mixin replacements already exist in the stylesheet
-    const replacements = [...change.new];
+    const replacements = [...(change.new ?? [])];
     if (change.checkForDuplicates) {
       const mixinArgumentMatches = atRule.params?.match(MIXIN_ARGUMENTS_REGEX);
       atRule.root().walkAtRules(rule => {
@@ -94,12 +94,7 @@ export abstract class StyleMigrator {
       });
     }
 
-    // Don't do anything if all the new changes already exist in the stylesheet
-    if (replacements.length < 1) {
-      return null;
-    }
-
-    return {old: change.old, new: replacements};
+    return {old: change.old, new: replacements.length ? replacements : null};
   }
 
   /**

src/material/schematics/ng-generate/mdc-migration/rules/theming-styles.ts

@@ -63,7 +63,11 @@ export class ThemingStylesMigration extends Migration<ComponentMigrator[], Schem
     if (migrator) {
       const mixinChange = migrator.styles.getMixinChange(this.namespace, atRule);
       if (mixinChange) {
-        replaceAtRuleWithMultiple(atRule, mixinChange.old, mixinChange.new);
+        if (mixinChange.new) {
+          replaceAtRuleWithMultiple(atRule, mixinChange.old, mixinChange.new);
+        } else {
+          atRule.remove();
+        }
       }
     } else if (atRule.parent && this.isCrossCuttingMixin(atRule.params)) {
       if (this.isPartialMigration()) {