fix(material/schematics): only migrate unprefixed variables when there is an import

Changes the migration logic so that variables without a `mat-` or `cdk-` prefix are only migrated if there is an explicit Material import. This aims to prevent accidental renames for variables that we don't own.

Also adds a few variables that were previously skipped.

(cherry picked from commit d5f4523)

Author: crisbeto

src/cdk/schematics/ng-update/find-stylesheets.ts

@@ -15,8 +15,9 @@ const STYLESHEET_REGEX = /.*\.(css|scss)/;
 /**
  * Finds stylesheets in the given directory from within the specified tree.
  * @param tree Devkit tree where stylesheet files can be found in.
- * @param startDirectory Optional start directory where stylesheets should be searched in. This can be
- *   useful if only stylesheets within a given folder are relevant (to avoid unnecessary iterations).
+ * @param startDirectory Optional start directory where stylesheets should be searched in.
+ *   This can be useful if only stylesheets within a given folder are relevant (to avoid
+ *   unnecessary iterations).
  */
 export function findStylesheetFiles(tree: Tree, startDirectory: string = '/'): string[] {
   const result: string[] = [];

src/material/schematics/ng-update/migrations/theming-api-v12/config.ts

@@ -169,6 +169,14 @@ export const removedMaterialVariables: Record<string, string> = {
   'mat-tree-node-height': '48px',
   'mat-tree-node-minimum-height': '24px',
   'mat-tree-node-maximum-height': '48px',
+};
+
+/**
+ * Material variables **without a `mat-` prefix** that have been removed from the public API
+ * and which should be replaced with their values. These should be migrated only when there's a
+ * Material import, because their names could conflict with other variables in the user's app.
+ */
+export const unprefixedRemovedVariables: Record<string, string> = {
   'z-index-fab': '20',
   'z-index-drawer': '100',
   'ease-in-out-curve-function': 'cubic-bezier(0.35, 0, 0.25, 1)',
@@ -183,5 +191,21 @@ export const removedMaterialVariables: Record<string, string> = {
   'swift-ease-in-out': 'all 500ms cubic-bezier(0.35, 0, 0.25, 1)',
   'swift-linear-duration': '80ms',
   'swift-linear-timing-function': 'linear',
-  'swift-linear': 'all 80ms linear'
+  'swift-linear': 'all 80ms linear',
+  'black-87-opacity': 'rgba(black, 0.87)',
+  'white-87-opacity': 'rgba(white, 0.87)',
+  'black-12-opacity': 'rgba(black, 0.12)',
+  'white-12-opacity': 'rgba(white, 0.12)',
+  'black-6-opacity': 'rgba(black, 0.06)',
+  'white-6-opacity': 'rgba(white, 0.06)',
+  'dark-primary-text': 'rgba(black, 0.87)',
+  'dark-secondary-text': 'rgba(black, 0.54)',
+  'dark-disabled-text': 'rgba(black, 0.38)',
+  'dark-dividers': 'rgba(black, 0.12)',
+  'dark-focused': 'rgba(black, 0.12)',
+  'light-primary-text': 'white',
+  'light-secondary-text': 'rgba(white, 0.7)',
+  'light-disabled-text': 'rgba(white, 0.5)',
+  'light-dividers': 'rgba(white, 0.12)',
+  'light-focused': 'rgba(white, 0.12)',
 };

src/material/schematics/ng-update/migrations/theming-api-v12/migration.ts

@@ -12,7 +12,8 @@ import {
   materialVariables,
   cdkMixins,
   cdkVariables,
-  removedMaterialVariables
+  removedMaterialVariables,
+  unprefixedRemovedVariables
 } from './config';
 
 /**
@@ -47,6 +48,7 @@ export function migrateFileContent(content: string,
   // imported transitively so we can always drop the old imports. We also assume that imports
   // to the new entry points have been added already.
   if (materialResults.imports.length) {
+    content = replaceRemovedVariables(content, unprefixedRemovedVariables);
     content = removeStrings(content, materialResults.imports);
   }
 

src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts

@@ -623,4 +623,40 @@ describe('v12 theming API migration', () => {
     ]);
   });
 
+  it('should only migrate unprefixed variables if there is a theming import', async () => {
+    const otherTheme = join(PROJECT_PATH, 'other-theme.scss');
+
+    writeLines(THEME_PATH, [
+      `@import '~@angular/material/theming';`,
+      ``,
+      `.my-button {`,
+        `z-index: $z-index-fab;`,
+      `}`
+    ]);
+
+    writeLines(otherTheme, [
+      `@import 're-exports-material-symbols';`,
+      ``,
+      `.my-drawer {`,
+        `z-index: $z-index-drawer;`,
+      `}`
+    ]);
+
+    await runMigration();
+
+    expect(splitFile(THEME_PATH)).toEqual([
+      `.my-button {`,
+        `z-index: 20;`,
+      `}`
+    ]);
+
+    expect(splitFile(otherTheme)).toEqual([
+      `@import 're-exports-material-symbols';`,
+      ``,
+      `.my-drawer {`,
+        `z-index: $z-index-drawer;`,
+      `}`
+    ]);
+  });
+
 });