fix(material/schematics): add missing legacy sass mixin transforms

angular · Sep 21, 2022 · 7b7ad32 · 7b7ad32
1 parent b88e2ee
commit 7b7ad32
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/src/material/schematics/ng-update/migrations/legacy-components-v15/constants.ts b/src/material/schematics/ng-update/migrations/legacy-components-v15/constants.ts
@@ -89,9 +89,23 @@ export const CUSTOM_TS_SYMBOL_RENAMINGS = [
   {old: 'SCROLL_THROTTLE_MS', new: 'LEGACY_SCROLL_THROTTLE_MS'},
 ];
 
-export const MIXINS = COMPONENTS.concat(['option', 'optgroup']).flatMap(component => [
-  `${component}-theme`,
-  `${component}-color`,
-  `${component}-density`,
-  `${component}-typography`,
-]);
+export const COMPONENT_THEME_MIXINS = COMPONENTS.concat(['option', 'optgroup']).flatMap(
+  component => [
+    `${component}-theme`,
+    `${component}-color`,
+    `${component}-density`,
+    `${component}-typography`,
+  ],
+);
+
+export const CUSTOM_SASS_MIXIN_RENAMINGS: {[key: string]: string} = {
+  'all-component-themes': 'all-legacy-component-themes',
+  'all-component-colors': 'all-legacy-component-colors',
+  'all-component-typographies': 'all-legacy-component-typographies',
+  'private-all-component-densities': 'private-all-legacy-component-densities',
+  'core': 'legacy-core',
+};
+
+export const CUSTOM_SASS_FUNCTION_RENAMINGS = {
+  'define-typography-config': 'define-legacy-typography-config',
+};
diff --git a/src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts b/src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts
@@ -14,7 +14,8 @@ import {
   CUSTOM_TS_SYMBOL_RENAMINGS,
   MAT_IMPORT_CHANGES,
   MDC_IMPORT_CHANGES,
-  MIXINS,
+  COMPONENT_THEME_MIXINS,
+  CUSTOM_SASS_MIXIN_RENAMINGS,
 } from './constants';
 
 import {Migration, ResolvedResource, TargetVersion, WorkspacePath} from '@angular/cdk/schematics';
@@ -55,10 +56,11 @@ export class LegacyComponentsMigration extends Migration<null> {
     if (!namespace || !node.source?.start) {
       return;
     }
-    if (node.params.startsWith(`${namespace}.all-component-`)) {
+    const mixinName = node.params.split(/[.(;]/)[1];
+    if (CUSTOM_SASS_MIXIN_RENAMINGS[mixinName]) {
       this._replaceAt(filePath, node.source.start.offset, {
-        old: `${namespace}.all-`,
-        new: `${namespace}.all-legacy-`,
+        old: `${namespace}.${mixinName}`,
+        new: `${namespace}.${CUSTOM_SASS_MIXIN_RENAMINGS[mixinName]}`,
       });
     } else if (this._isLegacyMixin(node, namespace)) {
       this._replaceAt(filePath, node.source.start.offset, {
@@ -73,8 +75,8 @@ export class LegacyComponentsMigration extends Migration<null> {
     if (!node.params.startsWith(`${namespace}.`)) {
       return false;
     }
-    for (let i = 0; i < MIXINS.length; i++) {
-      if (node.params.startsWith(`${namespace}.${MIXINS[i]}`)) {
+    for (let i = 0; i < COMPONENT_THEME_MIXINS.length; i++) {
+      if (node.params.startsWith(`${namespace}.${COMPONENT_THEME_MIXINS[i]}`)) {
         return true;
       }
     }

diff --git a/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts b/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts
@@ -182,14 +182,14 @@ describe('v15 legacy components migration', () => {
         `@use '@angular/material' as mat;`,
         `@include mat.all-component-themes($theme);`,
         `@include mat.all-component-colors($theme);`,
-        `@include mat.all-component-densities($theme);`,
+        `@include mat.private-all-component-densities($theme);`,
         `@include mat.all-component-typographies($theme);`,
       ];
       const newFile: string[] = [
         `@use '@angular/material' as mat;`,
         `@include mat.all-legacy-component-themes($theme);`,
         `@include mat.all-legacy-component-colors($theme);`,
-        `@include mat.all-legacy-component-densities($theme);`,
+        `@include mat.private-all-legacy-component-densities($theme);`,
         `@include mat.all-legacy-component-typographies($theme);`,
       ];
       for (let i = 0; i < COMPONENTS.length; i++) {