Skip to content

Commit af72eda

Browse files
committed
fix(material/schematics): update sass function names
1 parent 7b7ad32 commit af72eda

File tree

3 files changed

+40
-3
lines changed

3 files changed

+40
-3
lines changed

src/material/schematics/ng-update/migrations/legacy-components-v15/constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,6 @@ export const CUSTOM_SASS_MIXIN_RENAMINGS: {[key: string]: string} = {
106106
'core': 'legacy-core',
107107
};
108108

109-
export const CUSTOM_SASS_FUNCTION_RENAMINGS = {
109+
export const CUSTOM_SASS_FUNCTION_RENAMINGS: {[key: string]: string} = {
110110
'define-typography-config': 'define-legacy-typography-config',
111111
};

src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,14 @@
99
import * as ts from 'typescript';
1010
import * as postcss from 'postcss';
1111
import * as scss from 'postcss-scss';
12-
1312
import {
1413
CUSTOM_TS_SYMBOL_RENAMINGS,
1514
MAT_IMPORT_CHANGES,
1615
MDC_IMPORT_CHANGES,
1716
COMPONENT_THEME_MIXINS,
1817
CUSTOM_SASS_MIXIN_RENAMINGS,
18+
CUSTOM_SASS_FUNCTION_RENAMINGS,
1919
} from './constants';
20-
2120
import {Migration, ResolvedResource, TargetVersion, WorkspacePath} from '@angular/cdk/schematics';
2221

2322
export class LegacyComponentsMigration extends Migration<null> {
@@ -34,6 +33,7 @@ export class LegacyComponentsMigration extends Migration<null> {
3433
},
3534
include: node => this._handleAtInclude(node, stylesheet.filePath, namespace),
3635
},
36+
RootExit: root => this._handleRootNode(root, stylesheet.filePath, namespace),
3737
},
3838
]);
3939
processor.process(stylesheet.content, {syntax: scss}).sync();
@@ -70,6 +70,28 @@ export class LegacyComponentsMigration extends Migration<null> {
7070
}
7171
}
7272

73+
/** Handles updating the root node. */
74+
private _handleRootNode(root: postcss.Root, file: any, namespace?: string) {
75+
if (!namespace) {
76+
return;
77+
}
78+
// @functions could be referenced anywhere, so we need to just walk everything from the root
79+
// and replace all instances that are not in comments.
80+
root.walk(node => {
81+
if (node.source?.start != null && node.type !== 'comment') {
82+
const srcString = node.toString();
83+
for (const old in CUSTOM_SASS_FUNCTION_RENAMINGS) {
84+
if (srcString.includes(`${namespace}.${old}`)) {
85+
this._replaceAt(file, node.source.start.offset, {
86+
old: `${namespace}.${old}`,
87+
new: `${namespace}.${CUSTOM_SASS_FUNCTION_RENAMINGS[old]}`,
88+
});
89+
}
90+
}
91+
}
92+
});
93+
}
94+
7395
/** Returns true if the given at-include rule is a use of a legacy component mixin. */
7496
private _isLegacyMixin(node: postcss.AtRule, namespace: string): boolean {
7597
if (!node.params.startsWith(`${namespace}.`)) {

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,5 +243,20 @@ describe('v15 legacy components migration', () => {
243243
new: [`@use '@angular/material' as mat;`, `@include mat.button-toggle-theme($theme);`],
244244
});
245245
});
246+
247+
it('updates sass functions', async () => {
248+
await runSassMigrationTest('variable assignment', {
249+
old: [
250+
`@use '@angular/material' as mat;`,
251+
`$typography: mat.define-typography-config();`,
252+
`@include mat.all-component-typographies(mat.define-typography-config());`,
253+
],
254+
new: [
255+
`@use '@angular/material' as mat;`,
256+
`$typography: mat.define-legacy-typography-config();`,
257+
`@include mat.all-legacy-component-typographies(mat.define-legacy-typography-config());`,
258+
],
259+
});
260+
});
246261
});
247262
});

0 commit comments

Comments
 (0)