fix(material/schematics): migrate legacy typography hierarchy usages in CSS

Adds a migration that will fix usages of the legacy typography hierarchy mixin and CSS classes.

(cherry picked from commit 7f72e73)

Author: crisbeto

src/material/schematics/ng-generate/mdc-migration/index.ts

@@ -22,6 +22,7 @@ import {Schema} from './schema';
 import {TemplateMigration} from './rules/template-migration';
 import {ThemingStylesMigration} from './rules/theming-styles';
 import {TypographyHierarchyTemplateMigrator} from './rules/components/typography-hierarchy/typography-hierarchy-template';
+import {TypographyHierarchyStylesMigrator} from './rules/components/typography-hierarchy/typography-hierarchy-styles';
 
 /** Groups of components that must be migrated together. */
 const migrationGroups = [
@@ -48,7 +49,7 @@ const migrationGroups = [
 const TYPOGRAPHY_HIERARCHY_MIGRATOR: ComponentMigrator = {
   component: 'typography-hierarchy',
   template: new TypographyHierarchyTemplateMigrator(),
-  styles: null!, // TODO
+  styles: new TypographyHierarchyStylesMigrator(),
 };
 
 function getComponentsToMigrate(requested: string[]): Set<string> {

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

@@ -0,0 +1,155 @@
+import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+import {createNewTestRunner, migrateComponents, THEME_FILE} from '../test-setup-helper';
+
+describe('typography hierarchy styles migrator', () => {
+  let runner: SchematicTestRunner;
+  let cliAppTree: UnitTestTree;
+
+  async function runMigrationTest(oldFileContent: string, newFileContent: string) {
+    cliAppTree.create(THEME_FILE, oldFileContent);
+    const tree = await migrateComponents([], runner, cliAppTree);
+    expect(tree.readContent(THEME_FILE)).toBe(newFileContent);
+  }
+
+  beforeEach(async () => {
+    runner = createNewTestRunner();
+    cliAppTree = patchDevkitTreeToExposeTypeScript(await createTestApp(runner));
+  });
+
+  it('should replace the legacy hierarchy mixin with the non-legacy version', async () => {
+    await runMigrationTest(
+      `
+        @use '@angular/material' as mat;
+        $config: ();
+        @include mat.legacy-typography-hierarchy($config);
+      `,
+      `
+        @use '@angular/material' as mat;
+        $config: ();
+        @include mat.typography-hierarchy($config);
+      `,
+    );
+  });
+
+  it('should use the correct namespace', async () => {
+    await runMigrationTest(
+      `
+        @use '@angular/material' as arbitrary;
+        $config: ();
+        @include arbitrary.legacy-typography-hierarchy($config);
+      `,
+      `
+        @use '@angular/material' as arbitrary;
+        $config: ();
+        @include arbitrary.typography-hierarchy($config);
+      `,
+    );
+  });
+
+  it('should replace multiple legacy hierarchy mixin usages', async () => {
+    await runMigrationTest(
+      `
+        @use '@angular/material' as mat;
+        $config: ();
+        $other-config: ();
+        @include mat.legacy-typography-hierarchy($config);
+        @include mat.legacy-typography-hierarchy($other-config);
+      `,
+      `
+        @use '@angular/material' as mat;
+        $config: ();
+        $other-config: ();
+        @include mat.typography-hierarchy($config);
+        @include mat.typography-hierarchy($other-config);
+      `,
+    );
+  });
+
+  it('should replace usages of the legacy typography hierarchy classes', async () => {
+    await runMigrationTest(
+      `
+        .mat-display-4 {
+          color: red;
+        }
+
+        .mat-display-3 {
+          color: red;
+        }
+
+        .mat-display-2 {
+          color: red;
+        }
+
+        .mat-display-1 {
+          color: red;
+        }
+
+        .mat-headline {
+          color: red;
+        }
+
+        .mat-title {
+          color: red;
+        }
+
+        .mat-subheading-2 {
+          color: red;
+        }
+
+        .mat-body-2 {
+          color: red;
+        }
+
+        .mat-subheading-1 {
+          color: red;
+        }
+
+        .mat-body-1 {
+          color: red;
+        }
+      `,
+      `
+        .mat-headline-1 {
+          color: red;
+        }
+
+        .mat-headline-2 {
+          color: red;
+        }
+
+        .mat-headline-3 {
+          color: red;
+        }
+
+        .mat-headline-4 {
+          color: red;
+        }
+
+        .mat-headline-5 {
+          color: red;
+        }
+
+        .mat-headline-6 {
+          color: red;
+        }
+
+        .mat-subtitle-1 {
+          color: red;
+        }
+
+        .mat-subtitle-2 {
+          color: red;
+        }
+
+        .mat-body-1 {
+          color: red;
+        }
+
+        .mat-body-2 {
+          color: red;
+        }
+      `,
+    );
+  });
+});

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

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ClassNameChange, StyleMigrator} from '../../style-migrator';
+import {RENAMED_TYPOGRAPHY_CLASSES} from './constants';
+
+export class TypographyHierarchyStylesMigrator extends StyleMigrator {
+  component = 'typography-hierarchy';
+  deprecatedPrefixes = [];
+  classChanges: ClassNameChange[] = [];
+  mixinChanges = [
+    {
+      old: 'legacy-typography-hierarchy',
+      new: ['typography-hierarchy'],
+      checkForDuplicates: false,
+    },
+  ];
+
+  constructor() {
+    super();
+
+    RENAMED_TYPOGRAPHY_CLASSES.forEach((newClass, oldClass) => {
+      this.classChanges.push({new: '.' + newClass, old: '.' + oldClass});
+    });
+  }
+}