Skip to content

Commit

Permalink
feat: print diff messages
Browse files Browse the repository at this point in the history
  • Loading branch information
adamviktora committed Nov 18, 2024
1 parent ed0ed7b commit c3e96db
Show file tree
Hide file tree
Showing 7 changed files with 176 additions and 76 deletions.
12 changes: 6 additions & 6 deletions packages/css-vars-updater/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/css-vars-updater/src/answers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@ export type Answers = {
fix: boolean;
replaceGlobalColorsWithPink: boolean;
replaceGlobalVars: boolean;
directionalStyles: "ltr" | "rtl" | "ttb" | "none";
direction: "ltr" | "rtl" | "ttb" | "none";
};
4 changes: 2 additions & 2 deletions packages/css-vars-updater/src/cli.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ async function runCssVarsUpdate(
fix: options.fix,
replaceGlobalColorsWithPink: true,
replaceGlobalVars: true,
directionalStyles: "ltr",
direction: "ltr",
};

const answers: Answers = options.interactive
Expand Down Expand Up @@ -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: [
Expand Down
98 changes: 98 additions & 0 deletions packages/css-vars-updater/src/cssVarReplacement.ts
Original file line number Diff line number Diff line change
@@ -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") };
};
95 changes: 29 additions & 66 deletions packages/css-vars-updater/src/cssVarsUpdate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 (?<!:) is used here to prevent matching codemod comments
const isV5VarRegex = /(?<!:)(--pf-v5-[\w-]+)/g;

const files = sync(globTarget, { ignore: "**/node_modules/**" });

Expand All @@ -95,16 +38,36 @@ export async function cssVarsUpdate(globTarget: string, answers: Answers) {
const fileContent = readFileSync(filePath, "utf8");

const needsChange = isV5VarRegex.test(fileContent);

if (!needsChange) {
return;
}

const newContent = fileContent.replace(isV5VarRegex, (match) =>
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);
Expand Down
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
39 changes: 39 additions & 0 deletions packages/css-vars-updater/src/printLineChange.ts
Original file line number Diff line number Diff line change
@@ -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)
);
}
};

0 comments on commit c3e96db

Please sign in to comment.