diff --git a/src/material/schematics/ng-update/migrations/theming-api-v12/migration.ts b/src/material/schematics/ng-update/migrations/theming-api-v12/migration.ts index 0c4e95ba284b..e662e1ec504b 100644 --- a/src/material/schematics/ng-update/migrations/theming-api-v12/migration.ts +++ b/src/material/schematics/ng-update/migrations/theming-api-v12/migration.ts @@ -26,6 +26,7 @@ interface DetectImportResult { interface ExtraSymbols { mixins?: Record; functions?: Record; + variables?: Record; } /** @@ -123,19 +124,20 @@ function migrateMaterialSymbols(content: string, importPath: string, extraMaterialSymbols: ExtraSymbols = {}): string { const initialContent = content; const namespace = 'mat'; - const mixinsToUpdate = {...materialMixins, ...extraMaterialSymbols.mixins}; - const functionsToUpdate = {...materialFunctions, ...extraMaterialSymbols.functions}; // Migrate the mixins. + const mixinsToUpdate = {...materialMixins, ...extraMaterialSymbols.mixins}; content = renameSymbols(content, mixinsToUpdate, detectedImports.namespaces, mixinKeyFormatter, getMixinValueFormatter(namespace)); // Migrate the functions. + const functionsToUpdate = {...materialFunctions, ...extraMaterialSymbols.functions}; content = renameSymbols(content, functionsToUpdate, detectedImports.namespaces, functionKeyFormatter, getFunctionValueFormatter(namespace)); // Migrate the variables. - content = renameSymbols(content, materialVariables, detectedImports.namespaces, + const variablesToUpdate = {...materialVariables, ...extraMaterialSymbols.variables}; + content = renameSymbols(content, variablesToUpdate, detectedImports.namespaces, variableKeyFormatter, getVariableValueFormatter(namespace)); if (content !== initialContent) { diff --git a/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts b/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts index 4a49efc55112..c8446b701671 100644 --- a/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts +++ b/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts @@ -698,6 +698,7 @@ describe('v12 theming API migration', () => { `@import '~@angular/material/theming';`, `$something: mat-mdc-typography-config();`, `@include mat-mdc-button-theme();`, + `$another: $mat-vermillion` ].join('\n'); const migratedContent = migrateFileContent( @@ -708,12 +709,14 @@ describe('v12 theming API migration', () => { '~@angular/cdk', { mixins: {'mat-mdc-button-theme': 'mdc-button-theme'}, functions: {'mat-mdc-typography-config': 'mdc-typography-config'}, + variables: {'mat-vermillion': 'vermillion-palette'}, }); expect(migratedContent).toBe([ `@use '~@angular/material' as mat;`, `$something: mat.mdc-typography-config();`, `@include mat.mdc-button-theme();`, + `$another: mat.$vermillion-palette`, ].join('\n')); });