-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(material/schematics): Add css token renaming migration
(cherry picked from commit e8e02a8)
- Loading branch information
Showing
8 changed files
with
193 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
import {VersionChanges} from '../../update-tool/version-changes'; | ||
|
||
export interface CssTokenUpgradeData { | ||
/** The CSS selector to replace. */ | ||
replace: string; | ||
/** The new CSS selector. */ | ||
replaceWith: string; | ||
/** | ||
* Controls which file types in which this replacement is made. If omitted, it is made in all | ||
* files. | ||
*/ | ||
replaceIn?: { | ||
/** Replace this name in stylesheet files. */ | ||
stylesheet?: boolean; | ||
/** Replace this name in HTML files. */ | ||
html?: boolean; | ||
/** Replace this name in TypeScript strings. */ | ||
tsStringLiterals?: boolean; | ||
}; | ||
} | ||
|
||
export const cssTokens: VersionChanges<CssTokenUpgradeData> = {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
import * as ts from 'typescript'; | ||
import {ResolvedResource} from '../../update-tool/component-resource-collector'; | ||
import {WorkspacePath} from '../../update-tool/file-system'; | ||
import {Migration} from '../../update-tool/migration'; | ||
import {CssTokenUpgradeData} from '../data/css-tokens'; | ||
import {findAllSubstringIndices} from '../typescript/literal'; | ||
import {getVersionUpgradeData, UpgradeData} from '../upgrade-data'; | ||
|
||
/** Characters that can be part of a valid token name. */ | ||
const TOKEN_CHARACTER = /[-_a-z0-9]/i; | ||
|
||
/** | ||
* Migration that walks through every string literal, template and stylesheet in | ||
* order to migrate outdated CSS tokens to their new name. | ||
*/ | ||
export class CssTokensMigration extends Migration<UpgradeData> { | ||
/** Change data that upgrades to the specified target version. */ | ||
data: CssTokenUpgradeData[] = getVersionUpgradeData(this, 'cssTokens'); | ||
|
||
// Only enable the migration rule if there is upgrade data. | ||
enabled = this.data.length !== 0; | ||
|
||
override visitNode(node: ts.Node): void { | ||
if (ts.isStringLiteralLike(node)) { | ||
this._visitStringLiteralLike(node); | ||
} | ||
} | ||
|
||
override visitTemplate(template: ResolvedResource): void { | ||
this.data.forEach(data => { | ||
if (data.replaceIn && !data.replaceIn.html) { | ||
return; | ||
} | ||
|
||
findAllSubstringIndices(template.content, data.replace) | ||
.map(offset => template.start + offset) | ||
// Filter out matches that are followed by a valid token character, so that we don't match | ||
// partial token names. | ||
.filter(start => !TOKEN_CHARACTER.test(template.content[start + data.replace.length] || '')) | ||
.forEach(start => this._replaceSelector(template.filePath, start, data)); | ||
}); | ||
} | ||
|
||
override visitStylesheet(stylesheet: ResolvedResource): void { | ||
this.data.forEach(data => { | ||
if (data.replaceIn && !data.replaceIn.stylesheet) { | ||
return; | ||
} | ||
|
||
findAllSubstringIndices(stylesheet.content, data.replace) | ||
.map(offset => stylesheet.start + offset) | ||
// Filter out matches that are followed by a valid token character, so that we don't match | ||
// partial token names. | ||
.filter( | ||
start => !TOKEN_CHARACTER.test(stylesheet.content[start + data.replace.length] || ''), | ||
) | ||
.forEach(start => this._replaceSelector(stylesheet.filePath, start, data)); | ||
}); | ||
} | ||
|
||
private _visitStringLiteralLike(node: ts.StringLiteralLike) { | ||
if (node.parent && node.parent.kind !== ts.SyntaxKind.CallExpression) { | ||
return; | ||
} | ||
|
||
const textContent = node.getText(); | ||
const filePath = this.fileSystem.resolve(node.getSourceFile().fileName); | ||
|
||
this.data.forEach(data => { | ||
if (data.replaceIn && !data.replaceIn.tsStringLiterals) { | ||
return; | ||
} | ||
|
||
findAllSubstringIndices(textContent, data.replace) | ||
.map(offset => node.getStart() + offset) | ||
// Filter out matches that are followed by a valid token character, so that we don't match | ||
// partial token names. | ||
.filter(start => !TOKEN_CHARACTER.test(textContent[start + data.replace.length] || '')) | ||
.forEach(start => this._replaceSelector(filePath, start, data)); | ||
}); | ||
} | ||
|
||
private _replaceSelector(filePath: WorkspacePath, start: number, data: CssTokenUpgradeData) { | ||
this.fileSystem | ||
.edit(filePath) | ||
.remove(start, data.replace.length) | ||
.insertRight(start, data.replaceWith); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
import {TargetVersion, VersionChanges} from '@angular/cdk/schematics'; | ||
|
||
export interface MaterialCssTokenData { | ||
/** The CSS selector to replace. */ | ||
replace: string; | ||
/** The new CSS selector. */ | ||
replaceWith: string; | ||
/** | ||
* Controls which file types in which this replacement is made. If omitted, it is made in all | ||
* files. | ||
*/ | ||
replaceIn?: { | ||
/** Replace this name in stylesheet files. */ | ||
stylesheet?: boolean; | ||
/** Replace this name in HTML files. */ | ||
html?: boolean; | ||
/** Replace this name in TypeScript strings. */ | ||
tsStringLiterals?: boolean; | ||
}; | ||
} | ||
|
||
export const cssTokens: VersionChanges<MaterialCssTokenData> = { | ||
[TargetVersion.V18]: [ | ||
{ | ||
pr: 'https://github.com/angular/components/pull/29026', | ||
changes: [ | ||
{ | ||
replace: '--mdc-form-field-label-text-color', | ||
replaceWith: '--mat-checkbox-label-text-color', | ||
}, | ||
{ | ||
replace: '--mdc-form-field-label-text-font', | ||
replaceWith: '--mat-checkbox-label-text-font', | ||
}, | ||
{ | ||
replace: '--mdc-form-field-label-text-line-height', | ||
replaceWith: '--mat-checkbox-label-text-line-height', | ||
}, | ||
{ | ||
replace: '--mdc-form-field-label-text-size', | ||
replaceWith: '--mat-checkbox-label-text-size', | ||
}, | ||
{ | ||
replace: '--mdc-form-field-label-text-tracking', | ||
replaceWith: '--mat-checkbox-label-text-tracking', | ||
}, | ||
{ | ||
replace: '--mdc-form-field-label-text-weight', | ||
replaceWith: '--mat-checkbox-label-text-weight', | ||
}, | ||
], | ||
}, | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters