diff --git a/projects/cdk/schematics/ng-update/v4/migrate-css-vars/palette.ts b/projects/cdk/schematics/ng-update/v4/migrate-css-vars/palette.ts index 62dc39a21ceb..f91d0e59e7bb 100644 --- a/projects/cdk/schematics/ng-update/v4/migrate-css-vars/palette.ts +++ b/projects/cdk/schematics/ng-update/v4/migrate-css-vars/palette.ts @@ -82,13 +82,13 @@ export const DEPRECATED_VARS = { '--tui-positive-night-hover': '--tui-status-positive', '--tui-negative-night': '--tui-status-negative', '--tui-negative-night-hover': '--tui-status-negative', - '--tui-shadow': 'var(--tui-shadow-small)', - '--tui-shadow-hover': 'var(--tui-shadow-small-hover)', - '--tui-shadow-dropdown': 'var(--tui-shadow-medium)', - '--tui-shadow-modal': 'var(--tui-shadow-popup)', - '--tui-shadow-sidebar': 'var(--tui-shadow-medium)', - '--tui-shadow-navigation': 'var(--tui-shadow-small)', - '--tui-shadow-sheet': 'var(--tui-shadow-popup)', + '--tui-shadow': '--tui-shadow-small', + '--tui-shadow-hover': '--tui-shadow-small-hover', + '--tui-shadow-dropdown': '--tui-shadow-medium', + '--tui-shadow-modal': '--tui-shadow-popup', + '--tui-shadow-sidebar': '--tui-shadow-medium', + '--tui-shadow-navigation': '--tui-shadow-small', + '--tui-shadow-sheet': '--tui-shadow-popup', }; // warning: order is important diff --git a/projects/cdk/schematics/ng-update/v4/migrate-css-vars/rename-css-vars.ts b/projects/cdk/schematics/ng-update/v4/migrate-css-vars/rename-css-vars.ts index 0ceea72bf3d6..74dda4d3d06d 100644 --- a/projects/cdk/schematics/ng-update/v4/migrate-css-vars/rename-css-vars.ts +++ b/projects/cdk/schematics/ng-update/v4/migrate-css-vars/rename-css-vars.ts @@ -24,16 +24,32 @@ export function renameCssVars(pattern = ALL_FILES): void { }); } + const placeholders: Record = {}; + + Object.keys(DEPRECATED_VARS).forEach((key, index) => { + placeholders[key] = `__PLACEHOLDER_${index}__`; + }); + Object.entries(DEPRECATED_VARS) .sort(([prev], [next]) => (prev.length < next.length ? 1 : -1)) .map(([from, to]) => ({ from: new RegExp(`${from}`, 'g'), to, })) - .forEach(({from, to}) => { - text = text.replaceAll(from, to); + .forEach(({from}) => { + text = text.replace(from, (matched) => placeholders[matched] ?? ''); }); + const placeholderPattern = new RegExp(Object.values(placeholders).join('|'), 'g'); + + text = text.replaceAll(placeholderPattern, (matched) => { + const originalKey = Object.keys(placeholders).find( + (key) => placeholders[key] === matched, + ); + + return DEPRECATED_VARS[originalKey as keyof typeof DEPRECATED_VARS]; + }); + Object.entries(DEPRECATED_NUMERIC_VARS) .map(([from, to]) => ({ from: new RegExp(`${from}`, 'g'), diff --git a/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-label.ts b/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-label.ts index f815c2d549d7..b5e5018bbf65 100644 --- a/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-label.ts +++ b/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-label.ts @@ -1,6 +1,7 @@ import type {UpdateRecorder} from '@angular-devkit/schematics'; import type {DevkitFileSystem} from 'ng-morph'; import type {Attribute, ElementLocation} from 'parse5/dist/common/token'; +import type {ChildNode} from 'parse5/dist/tree-adapters/default'; import {findElementsByTagName} from '../../../../utils/templates/elements'; import {findAttr} from '../../../../utils/templates/inputs'; @@ -26,7 +27,7 @@ export function migrateLabel({ attrs.some(({name}) => name === 'tuilabel' || name === '[tuilabel]'), ); - labelElements.forEach(({attrs, sourceCodeLocation}) => { + labelElements.forEach(({attrs, sourceCodeLocation, childNodes}) => { const labelAttr = findAttr(attrs, 'tuilabel'); if (!labelAttr || !sourceCodeLocation) { @@ -38,6 +39,7 @@ export function migrateLabel({ sourceCodeLocation, recorder, templateOffset, + childNodes, }); }); } @@ -47,23 +49,36 @@ function migrateValue({ sourceCodeLocation, recorder, templateOffset, + childNodes, }: { valueAttr: Attribute; sourceCodeLocation: ElementLocation; recorder: UpdateRecorder; templateOffset: number; + childNodes: ChildNode[]; }): void { const attrValue = valueAttr?.value; - const insertTo = sourceCodeLocation?.startTag?.endOffset ?? 0; + const {startTag, endTag} = sourceCodeLocation; + const insertTo = startTag?.endOffset; if (!attrValue || !insertTo) { return; } - recorder.insertRight( - insertTo + templateOffset, - valueAttr.name === 'tuilabel' ? attrValue : `{{ ${attrValue} }}`, - ); + const onlyTextContent = + childNodes.length && childNodes.every((node) => node.nodeName === '#text'); + + if (onlyTextContent && startTag && endTag) { + const content = `${valueAttr.name === 'tuilabel' ? attrValue : `{{ ${attrValue} }}`}`; + + recorder.insertRight(templateOffset + insertTo, content); + recorder.insertLeft(templateOffset + endTag.startOffset, ''); + } else { + recorder.insertRight( + insertTo + templateOffset, + valueAttr.name === 'tuilabel' ? attrValue : `{{ ${attrValue} }}`, + ); + } const attrOffset = sourceCodeLocation?.attrs?.[valueAttr.name]; diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-css-vars.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-css-vars.spec.ts index d3ff96d95c12..f35cbf575668 100644 --- a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-css-vars.spec.ts +++ b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-css-vars.spec.ts @@ -54,9 +54,11 @@ export class Test { const STYLES_BEFORE = `@import '@taiga-ui/core/styles/taiga-ui-local'; :host { - color: var(--tui-text-primary); + box-shadow: var(--tui-shadow-navigation); + color: var(--tui-text-01-night); --tui-base-01: 'black'; --tui-info-bg-night: 'blue'; + --tui-shadow-sidebar: #fff; &_error { color: var(--tui-error-fill); @@ -66,10 +68,12 @@ const STYLES_BEFORE = `@import '@taiga-ui/core/styles/taiga-ui-local'; const STYLES_AFTER = `@import '@taiga-ui/core/styles/taiga-ui-local'; :host { + box-shadow: var(--tui-shadow-small); color: var(--tui-text-primary); --tui-background-base: 'black'; // TODO: use tuiTheme="dark" on an element to switch colors to dark theme --tui-status-info-pale: 'blue'; + --tui-shadow-medium: #fff; &_error { color: var(--tui-status-negative); diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-label.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-label.spec.ts index 0d7abf604178..ffaad3c08ff1 100644 --- a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-label.spec.ts +++ b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-label.spec.ts @@ -47,6 +47,8 @@ const TEMPLATE_BEFORE = ` + + `; const TEMPLATE_AFTER = ` @@ -59,9 +61,11 @@ const TEMPLATE_AFTER = ` > - + + `; describe('ng-update', () => {