bug(material/schematics): v12 theming API migration should not rename variables appended with extra characters

[Den-dp]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

after running ng update @angular/material I end up with invalid scss:

- $swift-ease-in-duration: 300ms !default;
- $swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
+ all 300ms cubic-bezier(0.55, 0, 0.55, 0.2)-duration: 300ms !default;
+ all 300ms cubic-bezier(0.55, 0, 0.55, 0.2)-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;

probably related to

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

Line 240 in 39921f4

'swift-ease-in': 'all 300ms cubic-bezier(0.55, 0, 0.55, 0.2)',

and

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

Lines 391 to 405 in 39921f4

	/**
	* Replaces variables that have been removed with their values.
	* @param content Content of the file to be migrated.
	* @param variables Mapping between variable names and their values.
	*/
	function replaceRemovedVariables(content: string, variables: Record<string, string>): string {
	Object.keys(variables).forEach(variableName => {
	// Note that the pattern uses a negative lookahead to exclude
	// variable assignments, because they can't be migrated.
	const regex = new RegExp(`\\$${escapeRegExp(variableName)}(?!\\s+:|:)`, 'g');
	content = content.replace(regex, variables[variableName]);
	});
	return content;
	}

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

Lines 338 to 341 in 39921f4

	/** Escapes special regex characters in a string. */
	function escapeRegExp(str: string): string {
	return str.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
	}

Reproduction

I was able to reproduce it by running yarn test material/schematics in this repo since there is a test for it

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

Lines 790 to 804 in 39921f4

	it('should not rename variables appended with extra characters', async () => {
	writeLines(THEME_PATH, [
	`@import '@angular/material/theming';`,
	`$mat-light-theme-background-override: 123;`,
	`@include mat-core();`,
	]);
	await runMigration();
	expect(splitFile(THEME_PATH)).toEqual([
	`@use '@angular/material' as mat;`,
	`$mat-light-theme-background-override: 123;`,
	`@include mat.core();`,
	]);
	});

Expected Behavior

should not rename variables appended with extra characters

Actual Behavior

it renames it in an incorrect way

Environment

• CDK/Material: 13 and I think 12

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}