diff --git a/projects/cdk/schematics/ng-update/v4/steps/styles/index.ts b/projects/cdk/schematics/ng-update/v4/steps/styles/index.ts index 8f0b39964a6d..a06eca9b8ade 100644 --- a/projects/cdk/schematics/ng-update/v4/steps/styles/index.ts +++ b/projects/cdk/schematics/ng-update/v4/steps/styles/index.ts @@ -2,7 +2,7 @@ import {getActiveProject, saveActiveProject} from 'ng-morph'; import {migrateLessSCSSConstants} from './migrate-less-scss-constants'; -import {migrateScrollbarBehavior} from './migrate-scrollbar-behavior'; +import {migrateMixins} from './migrate-mixins'; import {migrateShadowMixins} from './migrate-shadow-mixins'; import {migrateSpaceMixins} from './migrate-space-mixins'; import {migrateTextMixins} from './migrate-text-mixins'; @@ -48,7 +48,7 @@ export function migrateStyles(): void { migrateTextMixins, migrateShadowMixins, migrateLessSCSSConstants, - migrateScrollbarBehavior, + migrateMixins, ].reduce((text, migrate) => migrate(text), fullText); sourceFile.replaceWithText(newFileContent); diff --git a/projects/cdk/schematics/ng-update/v4/steps/styles/migrate-mixins.ts b/projects/cdk/schematics/ng-update/v4/steps/styles/migrate-mixins.ts new file mode 100644 index 000000000000..f59c6c101f28 --- /dev/null +++ b/projects/cdk/schematics/ng-update/v4/steps/styles/migrate-mixins.ts @@ -0,0 +1,23 @@ +const MAPPING = { + createStackingContext: ['isolation: isolate'], + 'scroll-behavior': ['scroll-behavior: var(--tui-scroll-behavior)'], +}; + +export function migrateMixins(fileContent: string): string { + if (!fileContent.includes('@taiga-ui/core/styles/taiga-ui-local')) { + return fileContent; + } + + return Object.keys(MAPPING).reduce((file, outdatedMixin) => { + const MIXIN_RE = new RegExp( + String.raw`(?:@include\s|\.)(${outdatedMixin})\(\)(\s?!important)?;`, + 'g', + ); + + return file.replaceAll( + MIXIN_RE, + (_, mixinName: keyof typeof MAPPING, important = '') => + `${MAPPING[mixinName].map((newValue) => `${newValue}${important};`).join('\n')}`, + ); + }, fileContent); +} diff --git a/projects/cdk/schematics/ng-update/v4/steps/styles/migrate-scrollbar-behavior.ts b/projects/cdk/schematics/ng-update/v4/steps/styles/migrate-scrollbar-behavior.ts deleted file mode 100644 index f765531aa7a7..000000000000 --- a/projects/cdk/schematics/ng-update/v4/steps/styles/migrate-scrollbar-behavior.ts +++ /dev/null @@ -1,10 +0,0 @@ -export function migrateScrollbarBehavior(fileContent: string): string { - if (!fileContent.includes('@taiga-ui/core/styles/taiga-ui-local')) { - return fileContent; - } - - return fileContent.replaceAll( - '.scroll-behavior()', - 'scroll-behavior: var(--tui-scroll-behavior)', - ); -} diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-styles.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-styles.spec.ts index 201e8f810424..42bd3e642eb0 100644 --- a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-styles.spec.ts +++ b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-styles.spec.ts @@ -39,11 +39,13 @@ const STYLES_BEFORE = ` .tui-space(horizontal, -4); .text-body-m-bold(1); .shadow(3); + .createStackingContext() !important; } .hack { .tui-space(top, 0) !important; .tui-space(horizontal, -4) !important; + .createStackingContext(); } .t-scrollbar { @@ -85,12 +87,14 @@ margin-bottom: 1rem; margin-right: -1rem; .text-body-m-bold(1); // TODO: this mixin was deleted. Replace it with inline styles. Find it source code in https://github.com/taiga-family/taiga-ui/blob/v3.x/projects/core/styles/mixins/text.less box-shadow: var(--tui-shadow-popup); + isolation: isolate !important; } .hack { margin-top: 0rem !important; margin-left: -1rem !important; margin-right: -1rem !important; + isolation: isolate; } .t-scrollbar {