fix(material/schematics): add missing material/core transforms

Author: mmalerba

integration/mdc-migration/golden/src/app/app.module.ts

@@ -25,6 +25,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTableModule} from '@angular/material/table';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatOptionModule, VERSION} from '@angular/material/core';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ButtonComponent} from './components/button/button.component';
 import {CardComponent} from './components/card/card.component';
@@ -94,9 +95,12 @@ import {TooltipComponent} from './components/tooltip/tooltip.component';
     MatTableModule,
     MatTabsModule,
     MatTooltipModule,
+    MatOptionModule,
     ReactiveFormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+  version = VERSION;
+}

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

@@ -7,8 +7,8 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.all-component-typographies();
-@include mat.legacy-core();
+@include mat.all-component-typographies(mat.define-typography-config());
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -26,9 +26,11 @@ $sample-project-theme: mat.define-light-theme((
     primary: $sample-project-primary,
     accent: $sample-project-accent,
     warn: $sample-project-warn,
-  )
+  ),
+  typography: mat.define-typography-config(),
 ));
 
+@include mat.core-theme($sample-project-theme);
 @include mat.autocomplete-theme($sample-project-theme);
 @include mat.button-theme($sample-project-theme);
 @include mat.fab-theme($sample-project-theme);
@@ -52,6 +54,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.table-theme($sample-project-theme);
 @include mat.tabs-theme($sample-project-theme);
 @include mat.tooltip-theme($sample-project-theme);
+@include mat.option-theme($sample-project-theme);
+@include mat.optgroup-theme($sample-project-theme);
 
 /* You can add global styles to this file, and also import other style files */
 

integration/mdc-migration/sample-project/src/app/app.module.ts

@@ -25,6 +25,7 @@ import {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/le
 import {MatLegacyTableModule as MatTableModule} from '@angular/material/legacy-table';
 import {MatLegacyTabsModule as MatTabsModule} from '@angular/material/legacy-tabs';
 import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatLegacyOptionModule, LEGACY_VERSION} from '@angular/material/legacy-core';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ButtonComponent} from './components/button/button.component';
 import {CardComponent} from './components/card/card.component';
@@ -94,9 +95,12 @@ import {TooltipComponent} from './components/tooltip/tooltip.component';
     MatTableModule,
     MatTabsModule,
     MatTooltipModule,
+    MatLegacyOptionModule,
     ReactiveFormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+  version = LEGACY_VERSION;
+}

integration/mdc-migration/sample-project/src/styles.scss

@@ -7,7 +7,7 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.all-legacy-component-typographies();
+@include mat.all-legacy-component-typographies(mat.define-legacy-typography-config());
 @include mat.legacy-core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
@@ -26,9 +26,11 @@ $sample-project-theme: mat.define-light-theme((
     primary: $sample-project-primary,
     accent: $sample-project-accent,
     warn: $sample-project-warn,
-  )
+  ),
+  typography: mat.define-legacy-typography-config(),
 ));
 
+@include mat.legacy-core-theme($sample-project-theme);
 @include mat.legacy-autocomplete-theme($sample-project-theme);
 @include mat.legacy-button-theme($sample-project-theme);
 @include mat.legacy-card-theme($sample-project-theme);
@@ -49,6 +51,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.legacy-table-theme($sample-project-theme);
 @include mat.legacy-tabs-theme($sample-project-theme);
 @include mat.legacy-tooltip-theme($sample-project-theme);
+@include mat.legacy-option-theme($sample-project-theme);
+@include mat.legacy-optgroup-theme($sample-project-theme);
 
 /* You can add global styles to this file, and also import other style files */
 

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

@@ -66,13 +66,15 @@ describe('multiple component styles', () => {
         `
         @use '@angular/material' as mat;
         $theme: ();
+        @include mat.legacy-core();
         @include mat.all-legacy-component-themes($sample-project-themes);
         @include mat.all-legacy-component-colors($sample-colors);
         @include mat.all-legacy-component-typographies($sample-typographies);
       `,
         `
         @use '@angular/material' as mat;
         $theme: ();
+        @include mat.core();
         @include mat.all-component-themes($sample-project-themes);
         @include mat.all-component-colors($sample-colors);
         @include mat.all-component-typographies($sample-typographies);
@@ -86,13 +88,17 @@ describe('multiple component styles', () => {
         `
         @use '@angular/material' as mat;
         $theme: ();
+        @include mat.legacy-core();
         @include mat.all-legacy-component-themes($sample-project-themes);
         @include mat.all-legacy-component-colors($sample-colors);
         @include mat.all-legacy-component-typographies($sample-typographies);
       `,
         `
         @use '@angular/material' as mat;
         $theme: ();
+        /* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated */
+        @include mat.legacy-core();
+        @include mat.core();
         /* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated */
         @include mat.all-legacy-component-themes($sample-project-themes);
         @include mat.all-component-themes($sample-project-themes);

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

@@ -26,6 +26,18 @@ export class OptionStylesMigrator extends StyleMigrator {
       old: 'legacy-option-typography',
       new: ['option-typography'],
     },
+    {
+      old: 'legacy-core-theme',
+      new: ['core-theme'],
+    },
+    {
+      old: 'legacy-core-color',
+      new: ['core-color'],
+    },
+    {
+      old: 'legacy-core-typography',
+      new: ['core-typography'],
+    },
   ];
 
   classChanges: ClassNameChange[] = [

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

@@ -12,17 +12,21 @@ import * as postcss from 'postcss';
 import * as scss from 'postcss-scss';
 import {ComponentMigrator, MIGRATORS} from '.';
 
-const ALL_LEGACY_COMPONENTS_MIXIN_NAME = '(?:\\.)(.*)(?:\\()';
+const COMPONENTS_MIXIN_NAME = /\.([^(;]*)/;
 
 export class ThemingStylesMigration extends Migration<ComponentMigrator[], SchematicContext> {
   enabled = true;
   namespace: string;
 
   override visitStylesheet(stylesheet: ResolvedResource) {
+    const migratedContent = this.migrate(stylesheet.content, stylesheet.filePath).replace(
+      new RegExp(`${this.namespace}.define-legacy-typography-config\\(`, 'g'),
+      `${this.namespace}.define-typography-config(`,
+    );
     this.fileSystem
       .edit(stylesheet.filePath)
       .remove(stylesheet.start, stylesheet.content.length)
-      .insertRight(stylesheet.start, this.migrate(stylesheet.content, stylesheet.filePath));
+      .insertRight(stylesheet.start, migratedContent);
   }
 
   migrate(styles: string, filename: string): string {
@@ -61,21 +65,27 @@ export class ThemingStylesMigration extends Migration<ComponentMigrator[], Schem
       if (mixinChange) {
         replaceAtRuleWithMultiple(atRule, mixinChange.old, mixinChange.new);
       }
-    } else if (atRule.params.includes('all-legacy-component') && atRule.parent) {
+    } else if (atRule.parent && this.isCrossCuttingMixin(atRule.params)) {
       if (this.isPartialMigration()) {
         // the second element of the result from match is the matching text
-        const mixinName = atRule.params.match(ALL_LEGACY_COMPONENTS_MIXIN_NAME)![1];
-        const comment =
-          'TODO(mdc-migration): Remove ' + mixinName + ' once all legacy components are migrated';
+        const mixinName = atRule.params.match(COMPONENTS_MIXIN_NAME)![1];
+        const comment = `TODO(mdc-migration): Remove ${mixinName} once all legacy components are migrated`;
         if (!addLegacyCommentForPartialMigrations(atRule, comment)) {
-          // same all-legacy-component mixin already replaced, nothing to do here
+          // same mixin already replaced, nothing to do here
           return;
         }
       }
-      replaceAllComponentsMixin(atRule);
+      replaceCrossCuttingMixin(atRule, this.namespace);
     }
   }
 
+  isCrossCuttingMixin(mixinText: string) {
+    return [
+      `${this.namespace}\\.all-legacy-component-`,
+      `${this.namespace}\\.legacy-core([^-]|$)`,
+    ].some(r => new RegExp(r).test(mixinText));
+  }
+
   isPartialMigration() {
     return this.upgradeData.length !== MIGRATORS.length;
   }
@@ -157,7 +167,7 @@ function addLegacyCommentForPartialMigrations(
 /**
  * Adds comment before postcss rule or at rule node
  *
- * @param rule a postcss rule.
+ * @param node a postcss rule.
  * @param comment the text content for the comment
  */
 function addCommentBeforeNode(node: postcss.Rule | postcss.AtRule, comment: string): void {
@@ -174,15 +184,18 @@ function addCommentBeforeNode(node: postcss.Rule | postcss.AtRule, comment: stri
 }
 
 /**
- * Replaces mixin prefixed with `all-legacy-component` to the MDC equivalent.
+ * Replaces a cross-cutting mixin that affects multiple components with the MDC equivalent.
  *
- * @param allComponentThemesNode a all-components-theme mixin node
+ * @param atRule A mixin inclusion node
+ * @param namespace The @angular/material namespace
  */
-function replaceAllComponentsMixin(allComponentNode: postcss.AtRule) {
-  allComponentNode.cloneBefore({
-    params: allComponentNode.params.replace('all-legacy-component', 'all-component'),
+function replaceCrossCuttingMixin(atRule: postcss.AtRule, namespace: string) {
+  atRule.cloneBefore({
+    params: atRule.params
+      .replace(`${namespace}.all-legacy-component`, `${namespace}.all-component`)
+      .replace(`${namespace}.legacy-core`, `${namespace}.core`),
   });
-  allComponentNode.remove();
+  atRule.remove();
 }
 
 /**

src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts

@@ -286,6 +286,7 @@ describe('v15 legacy components migration', () => {
           `@use '@angular/material' as mat;`,
           `@include mat.core();`,
           `@include mat.core(mat.define-typography-config());`,
+          `@include mat.core-theme(())`,
         ],
         new: [
           `@use '@angular/material' as mat;`,
@@ -299,6 +300,7 @@ describe('v15 legacy components migration', () => {
           `//  If you add typography styles elsewhere, you may want to remove this.`,
           `@include mat.all-legacy-component-typographies(mat.define-legacy-typography-config());`,
           `@include mat.legacy-core();`,
+          `@include mat.legacy-core-theme(())`,
         ],
       });
     });