fix(material/schematics): add comment for potentially deprecated styles after a migration

Author: amysorto

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

@@ -138,15 +138,15 @@ describe('button styles', () => {
         .mat-button {
           padding: 50px;
         }
-        .mat-button-base {
+        .mat-raised-button {
           padding: 25px;
         }
       `,
         `
         .mat-mdc-button {
           padding: 50px;
         }
-        .mat-mdc-button-base {
+        .mat-mdc-raised-button {
           padding: 25px;
         }
       `,
@@ -182,5 +182,73 @@ describe('button styles', () => {
       `,
       );
     });
+
+    it('should add comment for potentially deprecated selector', async () => {
+      await runMigrationTest(
+        `
+        .mat-button-focus-overlay {
+          background-color: transparent;
+        }
+      `,
+        `
+        /* TODO: The following rule targets internal classes of button that may no longer apply for the MDC version. */
+
+        .mat-button-focus-overlay {
+          background-color: transparent;
+        }
+      `,
+      );
+    });
+
+    it('should not add comment for legacy selector that also starts with deprecated prefix', async () => {
+      await runMigrationTest(
+        `
+        .mat-button-base {
+          padding: 12px;
+        }
+      `,
+        `
+        .mat-mdc-button-base {
+          padding: 12px;
+        }
+      `,
+      );
+    });
+
+    it('should add comment for potentially deprecated multi-line selector', async () => {
+      await runMigrationTest(
+        `
+        .some-class
+        .mat-button-focus-overlay {
+          background-color: transparent;
+        }
+      `,
+        `
+        /* TODO: The following rule targets internal classes of button that may no longer apply for the MDC version. */
+
+        .some-class
+        .mat-button-focus-overlay {
+          background-color: transparent;
+        }
+      `,
+      );
+    });
+
+    it('should update the legacy mat-button class and add comment for potentially deprecated selector', async () => {
+      await runMigrationTest(
+        `
+        .mat-fab.some-class, .mat-button-focus-overlay {
+          background-color: transparent;
+        }
+      `,
+        `
+        /* TODO: The following rule targets internal classes of button that may no longer apply for the MDC version. */
+
+        .mat-mdc-fab.some-class, .mat-button-focus-overlay {
+          background-color: transparent;
+        }
+      `,
+      );
+    });
   });
 });

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

@@ -11,6 +11,8 @@ import {ClassNameChange, StyleMigrator} from '../../style-migrator';
 export class ButtonStylesMigrator extends StyleMigrator {
   component = 'button';
 
+  deprecatedPrefix = 'mat-button';
+
   mixinChanges = [
     {
       old: 'button-theme',

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

@@ -111,5 +111,58 @@ describe('checkbox styles', () => {
       `,
       );
     });
+
+    it('should add comment for potentially deprecated selector', async () => {
+      await runMigrationTest(
+        `
+        .mat-checkbox-label {
+          font-size: 16px;
+        }
+      `,
+        `
+        /* TODO: The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+
+        .mat-checkbox-label {
+          font-size: 16px;
+        }
+      `,
+      );
+    });
+
+    it('should add comment for potentially deprecated multi-line selector', async () => {
+      await runMigrationTest(
+        `
+        .some-class
+        .mat-checkbox-label {
+          font-size: 16px;
+        }
+      `,
+        `
+        /* TODO: The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+
+        .some-class
+        .mat-checkbox-label {
+          font-size: 16px;
+        }
+      `,
+      );
+    });
+
+    it('should update the legacy mat-checkbox class and add comment for potentially deprecated selector', async () => {
+      await runMigrationTest(
+        `
+        .mat-checkbox.some-class, .mat-checkbox-label {
+          background-color: transparent;
+        }
+      `,
+        `
+        /* TODO: The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+
+        .mat-mdc-checkbox.some-class, .mat-checkbox-label {
+          background-color: transparent;
+        }
+      `,
+      );
+    });
   });
 });

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

@@ -11,6 +11,8 @@ import {ClassNameChange, StyleMigrator} from '../../style-migrator';
 export class CheckboxStylesMigrator extends StyleMigrator {
   component = 'checkbox';
 
+  deprecatedPrefix = 'mat-checkbox';
+
   mixinChanges = [
     {
       old: 'checkbox-theme',

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

@@ -8,6 +8,8 @@
 
 import * as postcss from 'postcss';
 
+const END_OF_SELECTOR_REGEX = '(?!-)';
+
 /** The changes to a class names. */
 export interface ClassNameChange {
   /** The legacy class name. */
@@ -37,6 +39,9 @@ export abstract class StyleMigrator {
   /** The old mixins and their replacements. */
   abstract mixinChanges: MixinChange[];
 
+  /** The prefix of classes that are specific to the old components */
+  abstract deprecatedPrefix: string;
+
   /**
    * Returns whether the given at-include at-rule is a use of a legacy mixin for this component.
    *
@@ -91,7 +96,11 @@ export abstract class StyleMigrator {
    * @returns `true` if the given Rule uses a legacy selector of this component.
    */
   isLegacySelector(rule: postcss.Rule): boolean {
-    return this.classChanges.some(change => rule.selector.includes(change.old));
+    // Since a legacy class can also have the deprecated prefix, we also
+    // check that a match isn't actually a longer deprecated class.
+    return this.classChanges.some(
+      change => rule.selector.match(change.old + END_OF_SELECTOR_REGEX) !== null,
+    );
   }
 
   /**
@@ -102,9 +111,42 @@ export abstract class StyleMigrator {
   replaceLegacySelector(rule: postcss.Rule): void {
     for (let i = 0; i < this.classChanges.length; i++) {
       const change = this.classChanges[i];
-      if (rule.selector.includes(change.old)) {
+      if (rule.selector.match(change.old + END_OF_SELECTOR_REGEX)) {
         rule.selector = rule.selector.replace(change.old, change.new);
       }
     }
   }
+
+  /**
+   * Returns whether the given postcss rule uses a potentially deprecated
+   * selector of the old component.
+   *
+   * @param rule a postcss rule.
+   * @returns `true` if the given Rule uses a selector with the deprecated prefix.
+   */
+  isDeprecatedSelector(rule: postcss.Rule): boolean {
+    return rule.selector.includes(this.deprecatedPrefix);
+  }
+
+  /**
+   * Adds comment before declaration that says the following rule may not apply
+   * in the MDC version for that component
+   *
+   * @param rule a postcss rule.
+   */
+  addDeprecatedSelectorComment(rule: postcss.Rule): void {
+    let comment = postcss.comment({
+      text:
+        'TODO: The following rule targets internal classes of ' +
+        this.component +
+        ' that may no longer apply for the MDC version.',
+    });
+    // We need to manually adjust the indentation and add new lines between the
+    // comment and declaration
+    const indentation = rule.raws.before?.split('\n').pop();
+    comment.raws.before = '\n' + indentation;
+    // Since node is parsed and not a copy, will always have a parent node
+    rule.parent!.insertBefore(rule, comment);
+    rule.raws.before = '\n\n' + indentation;
+  }
 }

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

@@ -46,10 +46,20 @@ export class ThemingStylesMigration extends Migration<StyleMigrator[], Schematic
   }
 
   ruleHandler(rule: postcss.Rule) {
+    let isLegacySelector;
+    let isDeprecatedSelector;
+
     const migrator = this.upgradeData.find(m => {
-      return m.isLegacySelector(rule);
+      isLegacySelector = m.isLegacySelector(rule);
+      isDeprecatedSelector = m.isDeprecatedSelector(rule);
+      return isLegacySelector || isDeprecatedSelector;
     });
-    migrator?.replaceLegacySelector(rule);
+
+    if (isLegacySelector) {
+      migrator?.replaceLegacySelector(rule);
+    } else if (isDeprecatedSelector) {
+      migrator?.addDeprecatedSelectorComment(rule);
+    }
   }
 }