diff --git a/packages/css-vars-updater/README.md b/packages/css-vars-updater/README.md index 73c1026b..05f0bc3f 100644 --- a/packages/css-vars-updater/README.md +++ b/packages/css-vars-updater/README.md @@ -62,7 +62,7 @@ In: color: var(--pf-v5-global--Color--100); background-color: var(--pf-v5-global--BackgroundColor--200); - /* Removed variables */ + /* Variables removed from v6 */ max-width: var(--pf-v5-c-accordion__toggle-text--MaxWidth); /* Variables staying in v6 */ @@ -84,14 +84,14 @@ Out: /* Global non-color variables */ border-radius: var(--pf-t--global--border--radius--large); row-gap: var(--pf-t--global--spacer--md); - width: var(--pf-v5-global--arrow--width/* CODEMODS: this var was removed in v6 */); + width: var(--pf-v5-global--arrow--width); /* Global color variables */ - color: var(--pf-t--temp--dev--tbd/* CODEMODS: original v5 color was --pf-v5-global--Color--100 */); - background-color: var(--pf-t--temp--dev--tbd/* CODEMODS: original v5 color was --pf-v5-global--BackgroundColor--200 */); + color: var(--pf-t--temp--dev--tbd /* CODEMODS: original v5 color was:--pf-v5-global--Color--100 */); + background-color: var(--pf-t--temp--dev--tbd /* CODEMODS: original v5 color was:--pf-v5-global--BackgroundColor--200 */); - /* Removed variables */ - max-width: var(--pf-v5-c-accordion__toggle-text--MaxWidth/* CODEMODS: this var was removed in v6 */); + /* Variables removed from v6 */ + max-width: var(--pf-v5-c-accordion__toggle-text--MaxWidth); /* Variables staying in v6 */ height: var(--pf-v6-c-about-modal-box--Height); diff --git a/packages/css-vars-updater/src/answers.ts b/packages/css-vars-updater/src/answers.ts index 1569b449..32373864 100644 --- a/packages/css-vars-updater/src/answers.ts +++ b/packages/css-vars-updater/src/answers.ts @@ -5,5 +5,5 @@ export type Answers = { fix: boolean; replaceGlobalColorsWithPink: boolean; replaceGlobalVars: boolean; - directionalStyles: "ltr" | "rtl" | "ttb" | "none"; + direction: "ltr" | "rtl" | "ttb" | "none"; }; diff --git a/packages/css-vars-updater/src/cli.ts b/packages/css-vars-updater/src/cli.ts index 8d0ad75a..f0f58201 100644 --- a/packages/css-vars-updater/src/cli.ts +++ b/packages/css-vars-updater/src/cli.ts @@ -30,7 +30,7 @@ async function runCssVarsUpdate( fix: options.fix, replaceGlobalColorsWithPink: true, replaceGlobalVars: true, - directionalStyles: "ltr", + direction: "ltr", }; const answers: Answers = options.interactive @@ -73,7 +73,7 @@ async function runCssVarsUpdate( }, { type: "list", - name: "directionalStyles", + name: "direction", message: "Do you want to fix directional styles and how? E.g. PaddingLeft -> PaddingInlineStart", choices: [ diff --git a/packages/css-vars-updater/src/cssVarReplacement.ts b/packages/css-vars-updater/src/cssVarReplacement.ts new file mode 100644 index 00000000..926d3471 --- /dev/null +++ b/packages/css-vars-updater/src/cssVarReplacement.ts @@ -0,0 +1,98 @@ +import { + globalNonColorCssVarNamesMap, + oldCssVarNames, + oldGlobalColorCssVarNames, + oldGlobalNonColorCssVarNames, + v6DirectionCssVars, +} from "shared-helpers"; +import { Answers } from "./answers"; +import { getDirectionMap } from "./directionStyles"; + +export type CssVarReplacement = { + newVar?: string; + varWasRemoved?: boolean; + directionReplacementExists?: boolean; +} | null; + +const getGlobalNonColorVarReplacement = ( + oldCssVar: string, + shouldReplace: boolean +): CssVarReplacement => { + const newCssVar = + globalNonColorCssVarNamesMap[ + oldCssVar as keyof typeof globalNonColorCssVarNamesMap + ]; + if (newCssVar === "SKIP") { + return { varWasRemoved: true }; + } + if (shouldReplace) { + return { newVar: newCssVar }; + } + return null; +}; + +const getGlobalColorVarReplacement = ( + oldCssVar: string, + shouldReplace: boolean +): CssVarReplacement => { + if (shouldReplace) { + return { + newVar: `--pf-t--temp--dev--tbd /* CODEMODS: original v5 color was:${oldCssVar} */`, + }; + } + return null; +}; + +const getDirectionVarReplacement = ( + oldCssVar: string, + direction: Answers["direction"] +): CssVarReplacement => { + const directionMap = getDirectionMap(direction); + const directions = Object.keys(directionMap); + + if (directions.some((dir) => oldCssVar.endsWith(dir))) { + const newCssVar = oldCssVar + .replace( + /(Left|Right|Top|Bottom)$/, + (match) => directionMap[match as keyof typeof directionMap] + ) + .replace("v5", "v6"); + + if (v6DirectionCssVars.has(newCssVar)) { + if (direction === "none") { + return { directionReplacementExists: true }; + } + return { newVar: newCssVar }; + } + } + return null; +}; + +export const getCssVarReplacement = ( + oldCssVar: string, + answers: Answers +): CssVarReplacement => { + if (oldGlobalNonColorCssVarNames.has(oldCssVar)) { + return getGlobalNonColorVarReplacement( + oldCssVar, + answers.replaceGlobalVars + ); + } + + if (oldGlobalColorCssVarNames.has(oldCssVar)) { + return getGlobalColorVarReplacement( + oldCssVar, + answers.replaceGlobalColorsWithPink + ); + } + + if (oldCssVarNames.has(oldCssVar)) { + return ( + getDirectionVarReplacement(oldCssVar, answers.direction) ?? { + varWasRemoved: true, + } + ); + } + + return { newVar: oldCssVar.replace("v5", "v6") }; +}; diff --git a/packages/css-vars-updater/src/cssVarsUpdate.ts b/packages/css-vars-updater/src/cssVarsUpdate.ts index d2e5d914..d4e87778 100644 --- a/packages/css-vars-updater/src/cssVarsUpdate.ts +++ b/packages/css-vars-updater/src/cssVarsUpdate.ts @@ -2,67 +2,9 @@ import { sync } from "glob"; import { readFileSync, writeFileSync } from "fs"; import { join } from "path"; import { isDir } from "shared-helpers"; -// import { printDiff } from "../../../helpers/printDiff"; -import { - globalNonColorCssVarNamesMap, - oldCssVarNames, - oldGlobalColorCssVarNames, - oldGlobalNonColorCssVarNames, - v6DirectionCssVars, -} from "shared-helpers"; import { Answers } from "./answers"; -import { getDirectionMap } from "./directionalStyles"; - -const getCssVarReplacement = (oldCssVar: string, answers: Answers) => { - const cssVarRemoved = (cssVar: string) => - `${cssVar}/* CODEMODS: this var was removed in v6 */`; - - if (oldGlobalNonColorCssVarNames.has(oldCssVar)) { - const newCssVar = - globalNonColorCssVarNamesMap[ - oldCssVar as keyof typeof globalNonColorCssVarNamesMap - ]; - if (newCssVar === "SKIP") { - return cssVarRemoved(oldCssVar); - } - if (answers.replaceGlobalVars) { - return newCssVar; - } - return oldCssVar; - } - - if (oldGlobalColorCssVarNames.has(oldCssVar)) { - if (answers.replaceGlobalColorsWithPink) { - return `--pf-t--temp--dev--tbd/* CODEMODS: original v5 color was ${oldCssVar} */`; - } - return oldCssVar; - } - - if (oldCssVarNames.has(oldCssVar)) { - const directionMap = getDirectionMap(answers.directionalStyles); - const directions = Object.keys(directionMap); - - if ( - answers.directionalStyles !== "none" && - directions.some((direction) => oldCssVar.endsWith(direction)) - ) { - const newCssVar = oldCssVar - .replace( - /(Left|Right|Top|Bottom)$/, - (match) => directionMap[match as keyof typeof directionMap] - ) - .replace("v5", "v6"); - - if (v6DirectionCssVars.has(newCssVar)) { - return newCssVar; - } - } - - return cssVarRemoved(oldCssVar); - } - - return oldCssVar.replace("v5", "v6"); -}; +import { getCssVarReplacement } from "./cssVarReplacement"; +import { printLineChange } from "./printLineChange"; export async function cssVarsUpdate(globTarget: string, answers: Answers) { const fileTypesRegex = answers.fileExtensions @@ -75,7 +17,8 @@ export async function cssVarsUpdate(globTarget: string, answers: Answers) { const acceptedFileTypesRegex = fileTypesRegex || /\.(s?css|less|md)$/; - const isV5VarRegex = /(--pf-v5-[\w-]+)/g; + // negative lookbehind (? - getCssVarReplacement(match, answers) - ); + console.log(file); + + const newContent = fileContent + .split("\n") + .map((line, index) => { + let updatedLine = line; + let match; + + // Check for matches in the line + while ((match = isV5VarRegex.exec(line)) !== null) { + const oldVar = match[0]; + const replacement = getCssVarReplacement(oldVar, answers); + if (!replacement) { + continue; + } + + printLineChange(index + 1, oldVar, replacement); + + if (replacement.newVar) { + updatedLine = updatedLine.replace(oldVar, replacement.newVar); + } + } - // printDiff(file, fileContent, newContent, isV5VarRegex); + return updatedLine; + }) + .join("\n"); if (answers.fix) { writeFileSync(filePath, newContent); diff --git a/packages/css-vars-updater/src/directionalStyles.ts b/packages/css-vars-updater/src/directionStyles.ts similarity index 88% rename from packages/css-vars-updater/src/directionalStyles.ts rename to packages/css-vars-updater/src/directionStyles.ts index 877f6598..bab03753 100644 --- a/packages/css-vars-updater/src/directionalStyles.ts +++ b/packages/css-vars-updater/src/directionStyles.ts @@ -1,6 +1,6 @@ import { Answers } from "./answers"; -export const getDirectionMap = (direction: Answers["directionalStyles"]) => { +export const getDirectionMap = (direction: Answers["direction"]) => { const directionMapLTR = { Left: "InlineStart", Right: "InlineEnd", diff --git a/packages/css-vars-updater/src/printLineChange.ts b/packages/css-vars-updater/src/printLineChange.ts new file mode 100644 index 00000000..58f83ed9 --- /dev/null +++ b/packages/css-vars-updater/src/printLineChange.ts @@ -0,0 +1,39 @@ +import colors from "colors"; +import { CssVarReplacement } from "./cssVarReplacement"; + +const printFormatted = (lineNumber: number, ...args: string[]) => { + console.log(`${lineNumber}: `, ...args); +}; + +export const printLineChange = ( + lineNumber: number, + oldVar: string, + replacement: CssVarReplacement +) => { + if (!replacement) { + return; + } + + if (replacement.varWasRemoved) { + printFormatted(lineNumber, colors.yellow(oldVar), "was removed in v6"); + return; + } + + if (replacement.directionReplacementExists) { + printFormatted( + lineNumber, + colors.yellow(oldVar), + "may be replaced with an -InlineStart, -InlineEnd, -BlockStart or -BlockEnd variable" + ); + return; + } + + if (replacement.newVar) { + printFormatted( + lineNumber, + colors.red(oldVar), + "->", + colors.green(replacement.newVar) + ); + } +};