Skip to content

Commit

Permalink
feat(tokens): handle color tokens autofix
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamviktora
adamviktora committed Sep 16, 2024
1 parent a20df70 commit b45b510
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 30 deletions.
139 changes: 109 additions & 30 deletions packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ import {
oldCssVarNamesV5,
globalNonColorTokensMap,
oldGlobalNonColorTokens,
oldGlobalNonColorCssVarNames,
globalNonColorCssVarNamesMap,
oldGlobalColorCssVarNames,
oldGlobalColorTokens,
} from "../../../tokenLists";

module.exports = {
Expand Down Expand Up @@ -50,6 +51,11 @@ module.exports = {
const getFixMessage = (oldToken: string, newToken: string) =>
`${oldToken} is an old CSS token and has been replaced with ${newToken}. If you want to use a different token, check our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.`;

const getColorFixMessage = (oldToken: string, isReactToken = false) =>
`${oldToken} is an old color token. This codemod will replace it with a temporary hot pink color token ${
isReactToken ? "temp_dev_tbd" : "--pf-t--temp--dev--tbd"
} to prevent build errors. You should find a suitable replacement token in our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.`;

const shouldReplaceToken = (token: string) =>
oldGlobalNonColorTokens.includes(token) &&
globalNonColorTokensMap[token as keyof typeof globalNonColorTokensMap] !==
Expand Down Expand Up @@ -88,13 +94,73 @@ module.exports = {
});
};

const replaceTokenOrWarn = (
const updateColorTokenImport = (
node: ImportSpecifierWithParent | ImportDeclaration,
token: string
) => {
if (node.type === "ImportDeclaration") {
context.report({
node,
message: getColorFixMessage(token, true),
fix(fixer) {
const newDeclaration = node.source.value
?.toString()
.replace(token, "temp_dev_tbd") as string;

return [
fixer.insertTextAfter(
node.specifiers[0],
"/* CODEMODS: you should update this color token */"
),
fixer.replaceText(node.source, `"${newDeclaration}"`),
];
},
});
return;
}

const hasAlias = node.local.name !== node.imported.name;
const comment = `/* CODEMODS: you should update this color token${
hasAlias ? `, original v5 token was ${node.imported.name}` : ""
} */`;

context.report({
node,
message: getColorFixMessage(token, true),
fix(fixer) {
const fixes = [
fixer.replaceText(
node,
`temp_dev_tbd as ${node.local.name} ${comment}`
),
];

const packagePath = getImportPath(node) as string;
if (packagePath.includes(token)) {
const newPath = packagePath.replace(token, "temp_dev_tbd");
fixes.push(fixer.replaceText(node.parent?.source!, `"${newPath}"`));
}

return fixes;
},
});
};

const handleToken = (
node: ImportSpecifier | ImportDeclaration,
token: string
) => {
if (oldGlobalColorTokens.includes(token)) {
updateColorTokenImport(node, token);
return;
}

if (shouldReplaceToken(token)) {
replaceToken(node, token);
} else if (oldTokens.includes(token)) {
return;
}

if (oldTokens.includes(token)) {
context.report({
node,
message: getWarnMessage(token),
Expand All @@ -106,7 +172,7 @@ module.exports = {
ImportSpecifier(node: ImportSpecifier) {
if (tokenSpecifiers.includes(node)) {
const token = node.imported.name;
replaceTokenOrWarn(node, token);
handleToken(node, token);
}
},
ImportDeclaration(node: ImportDeclaration) {
Expand All @@ -118,7 +184,7 @@ module.exports = {
return;
}

replaceTokenOrWarn(node, tokenWithDeclaration.token);
handleToken(node, tokenWithDeclaration.token);
},
Identifier(node: Identifier) {
const parentType = (node as IdentifierWithParent).parent?.type;
Expand Down Expand Up @@ -155,39 +221,52 @@ module.exports = {

let varName = node.value;
const varRegex = /var\(([^)]+)\)/;
const match = node.value.match(varRegex);
const varRegexMatch = node.value.match(varRegex);

if (match) {
varName = match[1];
if (varRegexMatch) {
varName = varRegexMatch[1];
}

const shouldReplaceVar =
oldGlobalNonColorCssVarNames.includes(varName) &&
if (oldGlobalColorCssVarNames.includes(varName)) {
const comment = `/* CODEMODS: original v5 color was ${varName} */`;

context.report({
node,
message: getColorFixMessage(varName),
fix(fixer) {
return fixer.replaceText(
node,
varRegexMatch
? `"var(--pf-t--temp--dev--tbd)"${comment}`
: `"--pf-t--temp--dev--tbd"${comment}`
);
},
});
return;
}

const newVarName =
globalNonColorCssVarNamesMap[
varName as keyof typeof globalNonColorCssVarNamesMap
] !== "SKIP";
];

const shouldReplaceVar = newVarName && newVarName !== "SKIP";

if (shouldReplaceVar) {
const newVarName =
globalNonColorCssVarNamesMap[
varName as keyof typeof globalNonColorCssVarNamesMap
];
context.report({
node,
message: getFixMessage(varName, newVarName),
fix(fixer) {
return fixer.replaceText(
node,
varRegexMatch ? `"var(${newVarName})"` : `"${newVarName}"`
);
},
});
return;
}

if (newVarName !== "SKIP") {
context.report({
node,
message: getFixMessage(varName, newVarName),
fix(fixer) {
return fixer.replaceText(
node,
node.value?.toString().startsWith("var")
? `"var(${newVarName})"`
: `"${newVarName}"`
);
},
});
}
} else if (oldCssVarNames.includes(varName)) {
if (oldCssVarNames.includes(varName)) {
context.report({
node,
message: getWarnMessage(node.value),
Expand Down
18 changes: 18 additions & 0 deletions packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,21 @@ c_alert__FontSize;
width: "var(--pf-v5-global--arrow--width)",
}}
></div>;

// Colors
import global_Color_100 from "@patternfly/react-tokens/dist/esm/global_Color_100";
import { global_Color_200 } from "@patternfly/react-tokens/dist/esm/global_Color_200";
import { global_Color_300 as color300 } from "@patternfly/react-tokens/dist/esm/global_Color_300";
import { global_BorderColor_100 } from "@patternfly/react-tokens";

global_Color_100;
global_Color_200;
color300;
global_BorderColor_100;

<div
style={{
color: "var(--pf-v5-global--Color--100)",
backgroundColor: "var(--pf-v5-global--Color--200)",
}}
></div>;
18 changes: 18 additions & 0 deletions packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,21 @@ c_alert__FontSize;
width: "var(--pf-v5-global--arrow--width)",
}}
></div>;

// Colors
import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";
import { temp_dev_tbd as global_Color_200 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";
import { temp_dev_tbd as color300 /* CODEMODS: you should update this color token, original v5 token was global_Color_300 */ } from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";
import { temp_dev_tbd as global_BorderColor_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens";

global_Color_100;
global_Color_200;
color300;
global_BorderColor_100;

<div
style={{
color: "var(--pf-t--temp--dev--tbd)"/* CODEMODS: original v5 color was --pf-v5-global--Color--100 */,
backgroundColor: "var(--pf-t--temp--dev--tbd)"/* CODEMODS: original v5 color was --pf-v5-global--Color--200 */,
}}
></div>;

0 comments on commit b45b510

Please sign in to comment.