From 973e700616da91138818d099b2849f60f527eed3 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Tue, 10 Sep 2024 18:17:26 +0200 Subject: [PATCH 1/8] feat(tokens): provide autofix for global non-color tokens --- .../eslint-plugin-pf-codemods/src/index.ts | 7 +- .../src/ruleCustomization.ts | 1 - .../rules/v6/tokensWarn/tokens-warn.test.ts | 5 +- .../src/rules/v6/tokensWarn/tokens-warn.ts | 178 ++++++++++-- .../rules/v6/tokensWarn/tokensWarnInput.tsx | 31 +- .../rules/v6/tokensWarn/tokensWarnOutput.tsx | 31 +- .../src/tokenLists/index.ts | 4 + .../tokenLists/oldCssVarNamesV5.ts | 2 +- .../src/tokenLists/oldGlobalCssVarNames.ts | 271 ++++++++++++++++++ .../src/tokenLists/oldGlobalTokens.ts | 227 +++++++++++++++ .../tokensWarn => }/tokenLists/oldTokens.ts | 0 11 files changed, 706 insertions(+), 51 deletions(-) create mode 100644 packages/eslint-plugin-pf-codemods/src/tokenLists/index.ts rename packages/eslint-plugin-pf-codemods/src/{rules/v6/tokensWarn => }/tokenLists/oldCssVarNamesV5.ts (99%) create mode 100644 packages/eslint-plugin-pf-codemods/src/tokenLists/oldGlobalCssVarNames.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/tokenLists/oldGlobalTokens.ts rename packages/eslint-plugin-pf-codemods/src/{rules/v6/tokensWarn => }/tokenLists/oldTokens.ts (100%) diff --git a/packages/eslint-plugin-pf-codemods/src/index.ts b/packages/eslint-plugin-pf-codemods/src/index.ts index 0418d2fe9..21e8fe7a1 100644 --- a/packages/eslint-plugin-pf-codemods/src/index.ts +++ b/packages/eslint-plugin-pf-codemods/src/index.ts @@ -1,3 +1,4 @@ -export * from './configs'; -export * from './ruleCuration'; -export * from './ruleCustomization' \ No newline at end of file +export * from "./configs"; +export * from "./ruleCuration"; +export * from "./ruleCustomization"; +export * from "./tokenLists"; diff --git a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts index 487f2cb0a..c876b161a 100644 --- a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts +++ b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts @@ -49,7 +49,6 @@ export const warningRules = [ "tabs-update-markup", "tabs-warn-children-type-changed", "Th-Td-warn-update-markup", - "tokens-warn", "toolbarLabelGroupContent-updated-markup", "tooltip-warn-triggerRef-may-be-required", "treeView-warn-selectable-styling-modifier-removed", diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts index 2e97bea21..62df94a06 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts @@ -105,10 +105,11 @@ ruleTester.run("tokens-warn", rule, { }, { code: `
`, - output: `
`, + output: `
`, errors: [ { - message: getWarnMessage("var(--pf-v5-global--BorderWidth--lg)"), + message: + "--pf-v5-global--BorderWidth--lg is an old CSS token and has been replaced with --pf-t--global--border--width--extra-strong. If you want to use a different token, check our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.", type: "Literal", }, ], diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts index ca9eebf26..24dad1e69 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts @@ -1,72 +1,195 @@ import { Rule } from "eslint"; import { + IdentifierWithParent, getDefaultDeclarationString, getDefaultImportsFromPackage, getFromPackage, } from "../../helpers"; -import { ImportDeclaration, ImportSpecifier, Literal } from "estree-jsx"; -import { oldTokens } from "./tokenLists/oldTokens"; -import { oldCssVarNamesV5 } from "./tokenLists/oldCssVarNamesV5"; +import { + Identifier, + ImportDeclaration, + ImportSpecifier, + Literal, +} from "estree-jsx"; +import { + oldTokens, + oldCssVarNamesV5, + globalNonColorTokensMap, + oldGlobalNonColorTokens, + oldGlobalNonColorCssVarNames, + globalNonColorCssVarNamesMap, +} from "../../../tokenLists"; module.exports = { - meta: {}, + meta: { fixable: "code" }, create: function (context: Rule.RuleContext) { const tokensPackage = "@patternfly/react-tokens"; const { imports: tokenSpecifiers } = getFromPackage(context, tokensPackage); - const defaultTokensWithDeclaration = getDefaultImportsFromPackage( + const defaultTokenImports = getDefaultImportsFromPackage( context, tokensPackage ) .map((specifier) => ({ + specifier, path: getDefaultDeclarationString(specifier), declaration: specifier.parent, })) .filter(({ path }) => path !== undefined) - .map(({ path, declaration }) => ({ + .map(({ specifier, path, declaration }) => ({ + specifier, token: (path as string).split("/").pop() as string, declaration, })); - const getMessage = (tokenName: string) => + const getWarnMessage = (tokenName: string) => `${tokenName} is an old CSS token. About half of our tokens have been replaced with newer ones. To find a suitable replacement token, check our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.`; + 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 shouldReplaceToken = (token: string) => + oldGlobalNonColorTokens.includes(token) && + globalNonColorTokensMap[token as keyof typeof globalNonColorTokensMap] !== + "SKIP"; + + const replaceToken = ( + node: ImportDeclaration | ImportSpecifier | Identifier, + oldToken: string + ) => { + const newToken = + globalNonColorTokensMap[ + oldToken as keyof typeof globalNonColorTokensMap + ]; + + context.report({ + node, + message: getFixMessage(oldToken, newToken), + fix(fixer) { + if (node.type === "ImportDeclaration") { + const newDeclaration = node.source.value + ?.toString() + .replace(oldToken, newToken) as string; + + return [ + fixer.replaceText(node.specifiers[0], newToken), + fixer.replaceText(node.source, `"${newDeclaration}"`), + ]; + } + + if (node.type === "ImportSpecifier") { + return fixer.replaceText(node.imported, newToken); + } + + return fixer.replaceText(node, newToken); + }, + }); + }; + + const replaceTokenOrWarn = ( + node: ImportSpecifier | ImportDeclaration, + token: string + ) => { + if (shouldReplaceToken(token)) { + replaceToken(node, token); + } else if (oldTokens.includes(token)) { + context.report({ + node, + message: getWarnMessage(token), + }); + } + }; + return { ImportSpecifier(node: ImportSpecifier) { if (tokenSpecifiers.includes(node)) { - const tokenName = node.imported.name; - if (oldTokens.includes(tokenName)) { - context.report({ - node, - message: getMessage(tokenName), - }); - } + const token = node.imported.name; + replaceTokenOrWarn(node, token); } }, ImportDeclaration(node: ImportDeclaration) { - const tokenWithDeclaration = defaultTokensWithDeclaration.find( + const tokenWithDeclaration = defaultTokenImports.find( ({ declaration }) => node.source.value === declaration?.source.value ); + if (!tokenWithDeclaration) { + return; + } + + replaceTokenOrWarn(node, tokenWithDeclaration.token); + }, + Identifier(node: Identifier) { + const parentType = (node as IdentifierWithParent).parent?.type; + // handle ImportSpecifier and ImportDeclaration separately if ( - tokenWithDeclaration && - oldTokens.includes(tokenWithDeclaration.token) + parentType === "ImportSpecifier" || + parentType === "ImportDefaultSpecifier" ) { - context.report({ - node, - message: getMessage(tokenWithDeclaration.token), - }); + return; + } + + const tokenInfo = defaultTokenImports.find( + ({ specifier }) => node.name === specifier.local.name + ); + + if (tokenInfo && shouldReplaceToken(tokenInfo.token)) { + replaceToken(node, tokenInfo.token); + } + + const unaliasedTokenSpecifier = tokenSpecifiers.find( + (specifier) => + specifier.local.name === specifier.imported.name && + node.name === specifier.local.name + ); + + if (unaliasedTokenSpecifier && shouldReplaceToken(node.name)) { + replaceToken(node, node.name); } }, Literal(node: Literal) { - if ( - typeof node.value === "string" && - [...oldCssVarNames, ...oldCssVars].includes(node.value) - ) { + if (typeof node.value !== "string") { + return; + } + + let varName = node.value; + const varRegex = /var\(([^)]+)\)/; + const match = node.value.match(varRegex); + + if (match) { + varName = match[1]; + } + + const shouldReplaceVar = + oldGlobalNonColorCssVarNames.includes(varName) && + globalNonColorCssVarNamesMap[ + varName as keyof typeof globalNonColorCssVarNamesMap + ] !== "SKIP"; + + if (shouldReplaceVar) { + const newVarName = + globalNonColorCssVarNamesMap[ + varName as keyof typeof globalNonColorCssVarNamesMap + ]; + + 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)) { context.report({ node, - message: getMessage(node.value), + message: getWarnMessage(node.value), }); } }, @@ -74,9 +197,8 @@ module.exports = { }, }; -// consumers may run class-name-updater before codemods, so we have to check also old tokens with v6 prefix +// consumers may have run the old class-name-updater before codemods, so we should check also old tokens with v6 prefix const oldCssVarNamesV6 = oldCssVarNamesV5.map((cssVarName) => cssVarName.replace("v5", "v6") ); const oldCssVarNames = [...oldCssVarNamesV5, ...oldCssVarNamesV6]; -const oldCssVars = oldCssVarNames.map((cssVarName) => `var(${cssVarName})`); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx index fa7840bcb..48521d18e 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx @@ -1,14 +1,29 @@ +// replacements (fixable with --fix) +import global_BorderWidth_lg from "@patternfly/react-tokens/dist/esm/global_BorderWidth_lg"; +import { global_FontWeight_normal } from "@patternfly/react-tokens"; + +global_BorderWidth_lg; +global_FontWeight_normal; + +document.documentElement.style.setProperty("--pf-v5-global--ZIndex--lg", "3"); +
; + +// warnings (not fixable) import global_warning_color_100 from "@patternfly/react-tokens/dist/esm/global_warning_color_100"; import { c_alert__FontSize } from "@patternfly/react-tokens"; global_warning_color_100; c_alert__FontSize; -<> -
-
-; +
; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx index fa7840bcb..72c2f3395 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx @@ -1,14 +1,29 @@ +// replacements (fixable with --fix) +import global_border_width_extra_strong from "@patternfly/react-tokens/dist/esm/global_border_width_extra_strong"; +import { global_font_weight_body_default } from "@patternfly/react-tokens"; + +global_border_width_extra_strong; +global_font_weight_body_default; + +document.documentElement.style.setProperty("--pf-t--global--z-index--lg", "3"); +
; + +// warnings (not fixable) import global_warning_color_100 from "@patternfly/react-tokens/dist/esm/global_warning_color_100"; import { c_alert__FontSize } from "@patternfly/react-tokens"; global_warning_color_100; c_alert__FontSize; -<> -
-
-; +
; diff --git a/packages/eslint-plugin-pf-codemods/src/tokenLists/index.ts b/packages/eslint-plugin-pf-codemods/src/tokenLists/index.ts new file mode 100644 index 000000000..c10fd44e7 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/tokenLists/index.ts @@ -0,0 +1,4 @@ +export * from "./oldCssVarNamesV5"; +export * from "./oldGlobalCssVarNames"; +export * from "./oldGlobalTokens"; +export * from "./oldTokens"; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokenLists/oldCssVarNamesV5.ts b/packages/eslint-plugin-pf-codemods/src/tokenLists/oldCssVarNamesV5.ts similarity index 99% rename from packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokenLists/oldCssVarNamesV5.ts rename to packages/eslint-plugin-pf-codemods/src/tokenLists/oldCssVarNamesV5.ts index 9776278e9..7887402fd 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokenLists/oldCssVarNamesV5.ts +++ b/packages/eslint-plugin-pf-codemods/src/tokenLists/oldCssVarNamesV5.ts @@ -1,4 +1,4 @@ -// names of css variables of the oldTokens list +// names of css variables for each token of the oldTokens list export const oldCssVarNamesV5 = [ "--pf-v5-c-about-modal-box__brand--PaddingBottom", "--pf-v5-c-about-modal-box__brand--PaddingLeft", diff --git a/packages/eslint-plugin-pf-codemods/src/tokenLists/oldGlobalCssVarNames.ts b/packages/eslint-plugin-pf-codemods/src/tokenLists/oldGlobalCssVarNames.ts new file mode 100644 index 000000000..2a6939d08 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/tokenLists/oldGlobalCssVarNames.ts @@ -0,0 +1,271 @@ +// Map of old global non-color CSS vars used in V5 and their suitable replacement CSS var in V6 +// values and optional replacements are described in oldGlobalTokens.ts file +export const globalNonColorCssVarNamesMap = { + "--pf-v5-global--BorderRadius--lg": "--pf-t--global--border--radius--large", + "--pf-v5-global--BorderRadius--sm": "--pf-t--global--border--radius--small", + "--pf-v5-global--BorderWidth--lg": + "--pf-t--global--border--width--extra-strong", + "--pf-v5-global--BorderWidth--md": "--pf-t--global--border--width--strong", + "--pf-v5-global--BorderWidth--sm": "--pf-t--global--border--width--regular", + "--pf-v5-global--BorderWidth--xl": + "--pf-t--global--border--width--extra-strong", + "--pf-v5-global--BoxShadow--inset": "SKIP", + "--pf-v5-global--BoxShadow--lg": "--pf-t--global--box-shadow--lg", + "--pf-v5-global--BoxShadow--lg-bottom": + "--pf-t--global--box-shadow--lg--bottom", + "--pf-v5-global--BoxShadow--lg-left": "--pf-t--global--box-shadow--lg--left", + "--pf-v5-global--BoxShadow--lg-right": + "--pf-t--global--box-shadow--lg--right", + "--pf-v5-global--BoxShadow--lg-top": "--pf-t--global--box-shadow--lg--top", + "--pf-v5-global--BoxShadow--md": "--pf-t--global--box-shadow--md", + "--pf-v5-global--BoxShadow--md-bottom": + "--pf-t--global--box-shadow--md--bottom", + "--pf-v5-global--BoxShadow--md-left": "--pf-t--global--box-shadow--md--left", + "--pf-v5-global--BoxShadow--md-right": + "--pf-t--global--box-shadow--md--right", + "--pf-v5-global--BoxShadow--md-top": "--pf-t--global--box-shadow--md--top", + "--pf-v5-global--BoxShadow--sm": "--pf-t--global--box-shadow--sm", + "--pf-v5-global--BoxShadow--sm-bottom": + "--pf-t--global--box-shadow--sm--bottom", + "--pf-v5-global--BoxShadow--sm-left": "--pf-t--global--box-shadow--sm--left", + "--pf-v5-global--BoxShadow--sm-right": + "--pf-t--global--box-shadow--sm--right", + "--pf-v5-global--BoxShadow--sm-top": "--pf-t--global--box-shadow--sm--top", + "--pf-v5-global--BoxShadow--xl": "--pf-t--global--box-shadow--lg", + "--pf-v5-global--BoxShadow--xl-bottom": + "--pf-t--global--box-shadow--lg--bottom", + "--pf-v5-global--BoxShadow--xl-left": "--pf-t--global--box-shadow--lg--left", + "--pf-v5-global--BoxShadow--xl-right": + "--pf-t--global--box-shadow--lg--right", + "--pf-v5-global--BoxShadow--xl-top": "--pf-t--global--box-shadow--lg--top", + "--pf-v5-global--FontFamily--heading": + "--pf-t--global--font--family--heading", + "--pf-v5-global--FontFamily--heading--vf": + "--pf-t--global--font--family--heading", + "--pf-v5-global--FontFamily--monospace": "--pf-t--global--font--family--mono", + "--pf-v5-global--FontFamily--monospace--vf": + "--pf-t--global--font--family--mono", + "--pf-v5-global--FontFamily--text": "--pf-t--global--font--family--body", + "--pf-v5-global--FontFamily--text--vf": "--pf-t--global--font--family--body", + "--pf-v5-global--FontSize--2xl": "--pf-t--global--font--size--2xl", + "--pf-v5-global--FontSize--3xl": "--pf-t--global--font--size--3xl", + "--pf-v5-global--FontSize--4xl": "--pf-t--global--font--size--4xl", + "--pf-v5-global--FontSize--lg": "--pf-t--global--font--size--lg", + "--pf-v5-global--FontSize--md": "--pf-t--global--font--size--md", + "--pf-v5-global--FontSize--sm": "--pf-t--global--font--size--sm", + "--pf-v5-global--FontSize--xl": "--pf-t--global--font--size--xl", + "--pf-v5-global--FontSize--xs": "--pf-t--global--font--size--xs", + "--pf-v5-global--FontWeight--bold": + "--pf-t--global--font--weight--heading--bold", + "--pf-v5-global--FontWeight--normal": + "--pf-t--global--font--weight--body--default", + "--pf-v5-global--LineHeight--md": "--pf-t--global--font--line-height--body", + "--pf-v5-global--LineHeight--sm": + "--pf-t--global--font--line-height--heading", + "--pf-v5-global--ListStyle": "--pf-t--global--list-style", + "--pf-v5-global--TimingFunction": + "--pf-t--global--transition--timing-function", + "--pf-v5-global--Transition": "--pf-t--global--transition", + "--pf-v5-global--TransitionDuration": "--pf-t--global--transition--duration", + "--pf-v5-global--ZIndex--2xl": "--pf-t--global--z-index--2xl", + "--pf-v5-global--ZIndex--lg": "--pf-t--global--z-index--lg", + "--pf-v5-global--ZIndex--md": "--pf-t--global--z-index--md", + "--pf-v5-global--ZIndex--sm": "--pf-t--global--z-index--sm", + "--pf-v5-global--ZIndex--xl": "--pf-t--global--z-index--xl", + "--pf-v5-global--ZIndex--xs": "--pf-t--global--z-index--xs", + "--pf-v5-global--arrow--width": "SKIP", + "--pf-v5-global--arrow--width-lg": "SKIP", + "--pf-v5-global--font-path": "SKIP", + "--pf-v5-global--fonticon-path": "SKIP", + "--pf-v5-global--gutter": "--pf-t--global--spacer--gutter--default", + "--pf-v5-global--gutter--md": "--pf-t--global--spacer--lg", + "--pf-v5-global--height-breakpoint--2xl": + "--pf-t--global--breakpoint--height--2xl", + "--pf-v5-global--height-breakpoint--lg": + "--pf-t--global--breakpoint--height--lg", + "--pf-v5-global--height-breakpoint--md": + "--pf-t--global--breakpoint--height--md", + "--pf-v5-global--height-breakpoint--sm": + "--pf-t--global--breakpoint--height--sm", + "--pf-v5-global--height-breakpoint--xl": + "--pf-t--global--breakpoint--height--xl", + "--pf-v5-global--icon--FontSize--lg": "--pf-t--global--icon--size--font--2xl", + "--pf-v5-global--icon--FontSize--md": "--pf-t--global--icon--size--font--md", + "--pf-v5-global--icon--FontSize--sm": "--pf-t--global--icon--size--font--xs", + "--pf-v5-global--icon--FontSize--xl": "--pf-t--global--icon--size--font--4xl", + "--pf-v5-global--link--TextDecoration": + "--pf-t--global--text-decoration--link--line--default", + "--pf-v5-global--link--TextDecoration--hover": + "--pf-t--global--text-decoration--link--line--hover", + "--pf-v5-global--spacer--form-element": "--pf-t--global--spacer--xs", + "--pf-v5-global--target-size--MinHeight": "SKIP", + "--pf-v5-global--target-size--MinWidth": "SKIP", + + // These CSS vars have the same React token names in V5 and V6, but vars need an update: [-v5-] transforms to [-t--] + "--pf-v5-global--breakpoint--2xl": "--pf-t--global--breakpoint--2xl", + "--pf-v5-global--breakpoint--lg": "--pf-t--global--breakpoint--lg", + "--pf-v5-global--breakpoint--md": "--pf-t--global--breakpoint--md", + "--pf-v5-global--breakpoint--sm": "--pf-t--global--breakpoint--sm", + "--pf-v5-global--breakpoint--xl": "--pf-t--global--breakpoint--xl", + "--pf-v5-global--breakpoint--xs": "--pf-t--global--breakpoint--xs", + "--pf-v5-global--inverse--multiplier": "--pf-t--global--inverse--multiplier", + "--pf-v5-global--spacer--2xl": "--pf-t--global--spacer--2xl", + "--pf-v5-global--spacer--3xl": "--pf-t--global--spacer--3xl", + "--pf-v5-global--spacer--4xl": "--pf-t--global--spacer--4xl", + "--pf-v5-global--spacer--lg": "--pf-t--global--spacer--lg", + "--pf-v5-global--spacer--md": "--pf-t--global--spacer--md", + "--pf-v5-global--spacer--sm": "--pf-t--global--spacer--sm", + "--pf-v5-global--spacer--xl": "--pf-t--global--spacer--xl", + "--pf-v5-global--spacer--xs": "--pf-t--global--spacer--xs", +}; + +export const oldGlobalNonColorCssVarNames = Object.keys( + globalNonColorCssVarNamesMap +); + +export const oldGlobalColorCssVarNames = [ + "--pf-v5-global--BackgroundColor--100", + "--pf-v5-global--BackgroundColor--150", + "--pf-v5-global--BackgroundColor--200", + "--pf-v5-global--BackgroundColor--dark-100", + "--pf-v5-global--BackgroundColor--dark-200", + "--pf-v5-global--BackgroundColor--dark-300", + "--pf-v5-global--BackgroundColor--dark-400", + "--pf-v5-global--BackgroundColor--dark-transparent-100", + "--pf-v5-global--BackgroundColor--dark-transparent-200", + "--pf-v5-global--BackgroundColor--light-100", + "--pf-v5-global--BackgroundColor--light-200", + "--pf-v5-global--BackgroundColor--light-300", + "--pf-v5-global--BorderColor--100", + "--pf-v5-global--BorderColor--200", + "--pf-v5-global--BorderColor--300", + "--pf-v5-global--BorderColor--dark-100", + "--pf-v5-global--BorderColor--light-100", + "--pf-v5-global--Color--100", + "--pf-v5-global--Color--200", + "--pf-v5-global--Color--300", + "--pf-v5-global--Color--400", + "--pf-v5-global--Color--dark-100", + "--pf-v5-global--Color--dark-200", + "--pf-v5-global--Color--light-100", + "--pf-v5-global--Color--light-200", + "--pf-v5-global--Color--light-300", + "--pf-v5-global--active-color--100", + "--pf-v5-global--active-color--200", + "--pf-v5-global--active-color--300", + "--pf-v5-global--active-color--400", + "--pf-v5-global--custom-color--100", + "--pf-v5-global--custom-color--200", + "--pf-v5-global--custom-color--300", + "--pf-v5-global--danger-color--100", + "--pf-v5-global--danger-color--200", + "--pf-v5-global--danger-color--300", + "--pf-v5-global--disabled-color--100", + "--pf-v5-global--disabled-color--200", + "--pf-v5-global--disabled-color--300", + "--pf-v5-global--icon--Color--dark", + "--pf-v5-global--icon--Color--dark--dark", + "--pf-v5-global--icon--Color--dark--light", + "--pf-v5-global--icon--Color--light", + "--pf-v5-global--icon--Color--light--dark", + "--pf-v5-global--icon--Color--light--light", + "--pf-v5-global--info-color--100", + "--pf-v5-global--info-color--200", + "--pf-v5-global--link--Color", + "--pf-v5-global--link--Color--dark", + "--pf-v5-global--link--Color--dark--hover", + "--pf-v5-global--link--Color--hover", + "--pf-v5-global--link--Color--light", + "--pf-v5-global--link--Color--light--hover", + "--pf-v5-global--link--Color--visited", + "--pf-v5-global--palette--black-100", + "--pf-v5-global--palette--black-1000", + "--pf-v5-global--palette--black-150", + "--pf-v5-global--palette--black-200", + "--pf-v5-global--palette--black-300", + "--pf-v5-global--palette--black-400", + "--pf-v5-global--palette--black-500", + "--pf-v5-global--palette--black-600", + "--pf-v5-global--palette--black-700", + "--pf-v5-global--palette--black-800", + "--pf-v5-global--palette--black-850", + "--pf-v5-global--palette--black-900", + "--pf-v5-global--palette--blue-100", + "--pf-v5-global--palette--blue-200", + "--pf-v5-global--palette--blue-300", + "--pf-v5-global--palette--blue-400", + "--pf-v5-global--palette--blue-50", + "--pf-v5-global--palette--blue-500", + "--pf-v5-global--palette--blue-600", + "--pf-v5-global--palette--blue-700", + "--pf-v5-global--palette--cyan-100", + "--pf-v5-global--palette--cyan-200", + "--pf-v5-global--palette--cyan-300", + "--pf-v5-global--palette--cyan-400", + "--pf-v5-global--palette--cyan-50", + "--pf-v5-global--palette--cyan-500", + "--pf-v5-global--palette--cyan-600", + "--pf-v5-global--palette--cyan-700", + "--pf-v5-global--palette--gold-100", + "--pf-v5-global--palette--gold-200", + "--pf-v5-global--palette--gold-300", + "--pf-v5-global--palette--gold-400", + "--pf-v5-global--palette--gold-50", + "--pf-v5-global--palette--gold-500", + "--pf-v5-global--palette--gold-600", + "--pf-v5-global--palette--gold-700", + "--pf-v5-global--palette--green-100", + "--pf-v5-global--palette--green-200", + "--pf-v5-global--palette--green-300", + "--pf-v5-global--palette--green-400", + "--pf-v5-global--palette--green-50", + "--pf-v5-global--palette--green-500", + "--pf-v5-global--palette--green-600", + "--pf-v5-global--palette--green-700", + "--pf-v5-global--palette--light-blue-100", + "--pf-v5-global--palette--light-blue-200", + "--pf-v5-global--palette--light-blue-300", + "--pf-v5-global--palette--light-blue-400", + "--pf-v5-global--palette--light-blue-500", + "--pf-v5-global--palette--light-blue-600", + "--pf-v5-global--palette--light-blue-700", + "--pf-v5-global--palette--light-green-100", + "--pf-v5-global--palette--light-green-200", + "--pf-v5-global--palette--light-green-300", + "--pf-v5-global--palette--light-green-400", + "--pf-v5-global--palette--light-green-500", + "--pf-v5-global--palette--light-green-600", + "--pf-v5-global--palette--light-green-700", + "--pf-v5-global--palette--orange-100", + "--pf-v5-global--palette--orange-200", + "--pf-v5-global--palette--orange-300", + "--pf-v5-global--palette--orange-400", + "--pf-v5-global--palette--orange-50", + "--pf-v5-global--palette--orange-500", + "--pf-v5-global--palette--orange-600", + "--pf-v5-global--palette--orange-700", + "--pf-v5-global--palette--purple-100", + "--pf-v5-global--palette--purple-200", + "--pf-v5-global--palette--purple-300", + "--pf-v5-global--palette--purple-400", + "--pf-v5-global--palette--purple-50", + "--pf-v5-global--palette--purple-500", + "--pf-v5-global--palette--purple-600", + "--pf-v5-global--palette--purple-700", + "--pf-v5-global--palette--red-100", + "--pf-v5-global--palette--red-200", + "--pf-v5-global--palette--red-300", + "--pf-v5-global--palette--red-400", + "--pf-v5-global--palette--red-50", + "--pf-v5-global--palette--red-500", + "--pf-v5-global--palette--white", + "--pf-v5-global--primary-color--100", + "--pf-v5-global--primary-color--200", + "--pf-v5-global--primary-color--dark-100", + "--pf-v5-global--primary-color--light-100", + "--pf-v5-global--secondary-color--100", + "--pf-v5-global--success-color--100", + "--pf-v5-global--success-color--200", + "--pf-v5-global--warning-color--100", + "--pf-v5-global--warning-color--200", +]; diff --git a/packages/eslint-plugin-pf-codemods/src/tokenLists/oldGlobalTokens.ts b/packages/eslint-plugin-pf-codemods/src/tokenLists/oldGlobalTokens.ts new file mode 100644 index 000000000..31c4148b4 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/tokenLists/oldGlobalTokens.ts @@ -0,0 +1,227 @@ +// Map of old global non-color tokens used in V5 and their suitable replacement token in V6 +export const globalNonColorTokensMap = { + global_BorderRadius_lg: "global_border_radius_large", // 30em -> 24px + global_BorderRadius_sm: "global_border_radius_small", // 3px -> 6px (optionally global_border_radius_tiny = 4px) + global_BorderWidth_lg: "global_border_width_extra_strong", + global_BorderWidth_md: "global_border_width_strong", + global_BorderWidth_sm: "global_border_width_regular", + global_BorderWidth_xl: "global_border_width_extra_strong", // 4px -> 3px + global_BoxShadow_inset: "SKIP", // NO SUITABLE REPLACEMENT, value: inset 0 0 0.625rem 0 rgba(3, 3, 3, 0.25) + global_BoxShadow_lg: "global_box_shadow_lg", + global_BoxShadow_lg_bottom: "global_box_shadow_lg_bottom", + global_BoxShadow_lg_left: "global_box_shadow_lg_left", + global_BoxShadow_lg_right: "global_box_shadow_lg_right", + global_BoxShadow_lg_top: "global_box_shadow_lg_top", + global_BoxShadow_md: "global_box_shadow_md", + global_BoxShadow_md_bottom: "global_box_shadow_md_bottom", + global_BoxShadow_md_left: "global_box_shadow_md_left", + global_BoxShadow_md_right: "global_box_shadow_md_right", + global_BoxShadow_md_top: "global_box_shadow_md_top", + global_BoxShadow_sm: "global_box_shadow_sm", + global_BoxShadow_sm_bottom: "global_box_shadow_sm_bottom", + global_BoxShadow_sm_left: "global_box_shadow_sm_left", + global_BoxShadow_sm_right: "global_box_shadow_sm_right", + global_BoxShadow_sm_top: "global_box_shadow_sm_top", + global_BoxShadow_xl: "global_box_shadow_lg", // no 'xl' shadow available, will use 'lg' + global_BoxShadow_xl_bottom: "global_box_shadow_lg_bottom", + global_BoxShadow_xl_left: "global_box_shadow_lg_left", + global_BoxShadow_xl_right: "global_box_shadow_lg_right", + global_BoxShadow_xl_top: "global_box_shadow_lg_top", + global_FontFamily_heading: "global_font_family_heading", // (optionally use global_font_family_heading_legacy) + global_FontFamily_heading_vf: "global_font_family_heading", // (optionally use global_font_family_heading_legacy) + global_FontFamily_monospace: "global_font_family_mono", // (optionally use global_font_family_mono_legacy) + global_FontFamily_monospace_vf: "global_font_family_mono", // (optionally use global_font_family_mono_legacy) + global_FontFamily_text: "global_font_family_body", // (optionally use global_font_family_body_legacy) + global_FontFamily_text_vf: "global_font_family_body", // (optionally use global_font_family_body_legacy) + global_FontSize_2xl: "global_font_size_2xl", // 1.5rem -> 1.375rem + global_FontSize_3xl: "global_font_size_3xl", + global_FontSize_4xl: "global_font_size_4xl", + global_FontSize_lg: "global_font_size_lg", + global_FontSize_md: "global_font_size_md", + global_FontSize_sm: "global_font_size_sm", + global_FontSize_xl: "global_font_size_xl", + global_FontSize_xs: "global_font_size_xs", + global_FontWeight_bold: "global_font_weight_heading_bold", // or global_font_weight_heading_default + global_FontWeight_normal: "global_font_weight_body_default", + global_LineHeight_md: "global_font_line_height_body", + global_LineHeight_sm: "global_font_line_height_heading", + global_ListStyle: "global_list_style", + global_TimingFunction: "global_transition_timing_function", + global_Transition: "global_transition", + global_TransitionDuration: "global_transition_duration", + global_ZIndex_2xl: "global_z_index_2xl", + global_ZIndex_lg: "global_z_index_lg", + global_ZIndex_md: "global_z_index_md", + global_ZIndex_sm: "global_z_index_sm", + global_ZIndex_xl: "global_z_index_xl", + global_ZIndex_xs: "global_z_index_xs", + global_arrow_width: "SKIP", // NO SUITABLE REPLACEMENT, value: 0.9375rem + global_arrow_width_lg: "SKIP", // NO SUITABLE REPLACEMENT, value: 1.5625rem + global_font_path: "SKIP", // NO SUITABLE REPLACEMENT, value: "./assets/fonts" + global_fonticon_path: "SKIP", // NO SUITABLE REPLACEMENT, value: "./assets/pficon" + global_gutter: "global_spacer_gutter_default", + global_gutter_md: "global_spacer_lg", + global_height_breakpoint_2xl: "global_breakpoint_height_2xl", + global_height_breakpoint_lg: "global_breakpoint_height_lg", + global_height_breakpoint_md: "global_breakpoint_height_md", + global_height_breakpoint_sm: "global_breakpoint_height_sm", + global_height_breakpoint_xl: "global_breakpoint_height_xl", + global_icon_FontSize_lg: "global_icon_size_font_2xl", // 1.5rem -> 1.375rem + global_icon_FontSize_md: "global_icon_size_font_md", + global_icon_FontSize_sm: "global_icon_size_font_xs", + global_icon_FontSize_xl: "global_icon_size_font_4xl", // 3.375rem -> 2.25rem + global_link_TextDecoration: "global_text_decoration_link_line_default", // optionally global_text_decoration_line_100 for no underline + global_link_TextDecoration_hover: "global_text_decoration_link_line_hover", + global_spacer_form_element: "global_spacer_xs", // 0.375rem -> 0.25rem (or global_spacer_sm = 0.5rem) + global_target_size_MinHeight: "SKIP", // NO SUITABLE REPLACEMENT, value: 44px + global_target_size_MinWidth: "SKIP", // NO SUITABLE REPLACEMENT, value: 44px +}; + +export const oldGlobalNonColorTokens = Object.keys(globalNonColorTokensMap); + +export const oldGlobalColorTokens = [ + "global_BackgroundColor_100", + "global_BackgroundColor_150", + "global_BackgroundColor_200", + "global_BackgroundColor_dark_100", + "global_BackgroundColor_dark_200", + "global_BackgroundColor_dark_300", + "global_BackgroundColor_dark_400", + "global_BackgroundColor_dark_transparent_100", + "global_BackgroundColor_dark_transparent_200", + "global_BackgroundColor_light_100", + "global_BackgroundColor_light_200", + "global_BackgroundColor_light_300", + "global_BorderColor_100", + "global_BorderColor_200", + "global_BorderColor_300", + "global_BorderColor_dark_100", + "global_BorderColor_light_100", + "global_Color_100", + "global_Color_200", + "global_Color_300", + "global_Color_400", + "global_Color_dark_100", + "global_Color_dark_200", + "global_Color_light_100", + "global_Color_light_200", + "global_Color_light_300", + "global_active_color_100", + "global_active_color_200", + "global_active_color_300", + "global_active_color_400", + "global_custom_color_100", + "global_custom_color_200", + "global_custom_color_300", + "global_danger_color_100", + "global_danger_color_200", + "global_danger_color_300", + "global_disabled_color_100", + "global_disabled_color_200", + "global_disabled_color_300", + "global_icon_Color_dark", + "global_icon_Color_dark_dark", + "global_icon_Color_dark_light", + "global_icon_Color_light", + "global_icon_Color_light_dark", + "global_icon_Color_light_light", + "global_info_color_100", + "global_info_color_200", + "global_link_Color", + "global_link_Color_dark", + "global_link_Color_dark_hover", + "global_link_Color_hover", + "global_link_Color_light", + "global_link_Color_light_hover", + "global_link_Color_visited", + "global_palette_black_100", + "global_palette_black_1000", + "global_palette_black_150", + "global_palette_black_200", + "global_palette_black_300", + "global_palette_black_400", + "global_palette_black_500", + "global_palette_black_600", + "global_palette_black_700", + "global_palette_black_800", + "global_palette_black_850", + "global_palette_black_900", + "global_palette_blue_100", + "global_palette_blue_200", + "global_palette_blue_300", + "global_palette_blue_400", + "global_palette_blue_50", + "global_palette_blue_500", + "global_palette_blue_600", + "global_palette_blue_700", + "global_palette_cyan_100", + "global_palette_cyan_200", + "global_palette_cyan_300", + "global_palette_cyan_400", + "global_palette_cyan_50", + "global_palette_cyan_500", + "global_palette_cyan_600", + "global_palette_cyan_700", + "global_palette_gold_100", + "global_palette_gold_200", + "global_palette_gold_300", + "global_palette_gold_400", + "global_palette_gold_50", + "global_palette_gold_500", + "global_palette_gold_600", + "global_palette_gold_700", + "global_palette_green_100", + "global_palette_green_200", + "global_palette_green_300", + "global_palette_green_400", + "global_palette_green_50", + "global_palette_green_500", + "global_palette_green_600", + "global_palette_green_700", + "global_palette_light_blue_100", + "global_palette_light_blue_200", + "global_palette_light_blue_300", + "global_palette_light_blue_400", + "global_palette_light_blue_500", + "global_palette_light_blue_600", + "global_palette_light_blue_700", + "global_palette_light_green_100", + "global_palette_light_green_200", + "global_palette_light_green_300", + "global_palette_light_green_400", + "global_palette_light_green_500", + "global_palette_light_green_600", + "global_palette_light_green_700", + "global_palette_orange_100", + "global_palette_orange_200", + "global_palette_orange_300", + "global_palette_orange_400", + "global_palette_orange_50", + "global_palette_orange_500", + "global_palette_orange_600", + "global_palette_orange_700", + "global_palette_purple_100", + "global_palette_purple_200", + "global_palette_purple_300", + "global_palette_purple_400", + "global_palette_purple_50", + "global_palette_purple_500", + "global_palette_purple_600", + "global_palette_purple_700", + "global_palette_red_100", + "global_palette_red_200", + "global_palette_red_300", + "global_palette_red_400", + "global_palette_red_50", + "global_palette_red_500", + "global_palette_white", + "global_primary_color_100", + "global_primary_color_200", + "global_primary_color_dark_100", + "global_primary_color_light_100", + "global_secondary_color_100", + "global_success_color_100", + "global_success_color_200", + "global_warning_color_100", + "global_warning_color_200", +]; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokenLists/oldTokens.ts b/packages/eslint-plugin-pf-codemods/src/tokenLists/oldTokens.ts similarity index 100% rename from packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokenLists/oldTokens.ts rename to packages/eslint-plugin-pf-codemods/src/tokenLists/oldTokens.ts From a20df7007c25eee346336595f2bc717cc9449562 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 16 Sep 2024 13:14:58 +0200 Subject: [PATCH 2/8] refactor(getDefaultDeclarationString helper): rename to getImportPath --- .../src/rules/helpers/getComponentImportName.ts | 4 ++-- .../src/rules/helpers/getDefaultDeclarationString.ts | 8 -------- .../src/rules/helpers/getImportPath.ts | 11 +++++++++++ .../src/rules/helpers/index.ts | 2 +- .../src/rules/helpers/renameComponent.ts | 4 ++-- .../src/rules/v6/tokensWarn/tokens-warn.ts | 5 +++-- 6 files changed, 19 insertions(+), 15 deletions(-) delete mode 100644 packages/eslint-plugin-pf-codemods/src/rules/helpers/getDefaultDeclarationString.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/helpers/getImportPath.ts diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/getComponentImportName.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/getComponentImportName.ts index 2d7c83229..b2b9fc524 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/helpers/getComponentImportName.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/helpers/getComponentImportName.ts @@ -1,6 +1,6 @@ import { ImportSpecifier } from "estree-jsx"; import { ImportDefaultSpecifierWithParent } from "./interfaces"; -import { getDefaultDeclarationString } from "./getDefaultDeclarationString"; +import { getImportPath } from "./getImportPath"; /** Gets the name of an import based on the specifier and an array of names that should be looked for in default import paths */ export function getComponentImportName( @@ -12,6 +12,6 @@ export function getComponentImportName( } return potentialNames.find((name) => - getDefaultDeclarationString(importSpecifier)?.includes(name) + getImportPath(importSpecifier)?.includes(name) ); } diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/getDefaultDeclarationString.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/getDefaultDeclarationString.ts deleted file mode 100644 index 68258614e..000000000 --- a/packages/eslint-plugin-pf-codemods/src/rules/helpers/getDefaultDeclarationString.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ImportDefaultSpecifierWithParent } from "./interfaces"; - -/** Gets the import path string for a default import */ -export function getDefaultDeclarationString( - defaultImportSpecifier: ImportDefaultSpecifierWithParent -) { - return defaultImportSpecifier?.parent?.source.value?.toString(); -} diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/getImportPath.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/getImportPath.ts new file mode 100644 index 000000000..263632b4b --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/helpers/getImportPath.ts @@ -0,0 +1,11 @@ +import { + ImportDefaultSpecifierWithParent, + ImportSpecifierWithParent, +} from "./interfaces"; + +/** Gets the import path string for an import specifier (named or default) */ +export function getImportPath( + importSpecifier: ImportDefaultSpecifierWithParent | ImportSpecifierWithParent +) { + return importSpecifier?.parent?.source.value?.toString(); +} diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/index.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/index.ts index 314f1deb5..1026caeac 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/helpers/index.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/helpers/index.ts @@ -6,10 +6,10 @@ export * from "./getAttributeName"; export * from "./getChildJSXElementByName"; export * from "./getCodeModDataTag"; export * from "./getComponentImportName"; -export * from "./getDefaultDeclarationString"; export * from "./getEndRange"; export * from "./getFromPackage"; export * from "./getImportedName"; +export * from "./getImportPath"; export * from "./getLocalComponentName"; export * from "./getNodeForAttributeFixer"; export * from "./getNodeName"; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/renameComponent.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/renameComponent.ts index 5c78f3de6..902ca5ccd 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/helpers/renameComponent.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/helpers/renameComponent.ts @@ -6,7 +6,7 @@ import { JSXOpeningElementWithParent, } from "./interfaces"; import { - getDefaultDeclarationString, + getImportPath, getComponentImportName, getNodeName, hasCodeModDataTag, @@ -90,7 +90,7 @@ export function renameComponent( } return oldNames.some((name) => - getDefaultDeclarationString(imp)?.includes(name) + getImportPath(imp)?.includes(name) ); }); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts index 24dad1e69..fae2f5943 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts @@ -1,9 +1,10 @@ import { Rule } from "eslint"; import { IdentifierWithParent, - getDefaultDeclarationString, + ImportSpecifierWithParent, getDefaultImportsFromPackage, getFromPackage, + getImportPath, } from "../../helpers"; import { Identifier, @@ -33,7 +34,7 @@ module.exports = { ) .map((specifier) => ({ specifier, - path: getDefaultDeclarationString(specifier), + path: getImportPath(specifier), declaration: specifier.parent, })) .filter(({ path }) => path !== undefined) From b45b5106bd2f49c9c7fcb04afe2ed74f9d238d88 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 16 Sep 2024 13:17:39 +0200 Subject: [PATCH 3/8] feat(tokens): handle color tokens autofix --- .../src/rules/v6/tokensWarn/tokens-warn.ts | 139 ++++++++++++++---- .../rules/v6/tokensWarn/tokensWarnInput.tsx | 18 +++ .../rules/v6/tokensWarn/tokensWarnOutput.tsx | 18 +++ 3 files changed, 145 insertions(+), 30 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts index fae2f5943..837e34c64 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts @@ -17,8 +17,9 @@ import { oldCssVarNamesV5, globalNonColorTokensMap, oldGlobalNonColorTokens, - oldGlobalNonColorCssVarNames, globalNonColorCssVarNamesMap, + oldGlobalColorCssVarNames, + oldGlobalColorTokens, } from "../../../tokenLists"; module.exports = { @@ -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] !== @@ -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), @@ -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) { @@ -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; @@ -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), diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx index 48521d18e..03b2a7b91 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx @@ -27,3 +27,21 @@ c_alert__FontSize; width: "var(--pf-v5-global--arrow--width)", }} >; + +// 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; + +
; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx index 72c2f3395..92da6db81 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx @@ -27,3 +27,21 @@ c_alert__FontSize; width: "var(--pf-v5-global--arrow--width)", }} >; + +// 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; + +
; From ff8e9fd1088428ccc6664c18eef3f9cdd3ebce37 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 16 Sep 2024 15:47:58 +0200 Subject: [PATCH 4/8] test(tokens): add tests --- .../rules/v6/tokensWarn/tokens-warn.test.ts | 354 ++++++++++++++++-- 1 file changed, 323 insertions(+), 31 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts index 62df94a06..111bc7b0f 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts @@ -4,6 +4,14 @@ import * as rule from "./tokens-warn"; const getWarnMessage = (tokenName: string) => `${tokenName} is an old CSS token. About half of our tokens have been replaced with newer ones. To find a suitable replacement token, check our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.`; +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 = true) => + `${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.`; + ruleTester.run("tokens-warn", rule, { valid: [ // token existing in V6 @@ -16,89 +24,271 @@ ruleTester.run("tokens-warn", rule, { }, ], invalid: [ + // WARNINGS - tokens { - code: `import { global_info_color_100 } from '@patternfly/react-tokens';`, - output: `import { global_info_color_100 } from '@patternfly/react-tokens';`, + code: `import { c_badge_PaddingLeft } from '@patternfly/react-tokens';`, + output: `import { c_badge_PaddingLeft } from '@patternfly/react-tokens';`, errors: [ { - message: getWarnMessage("global_info_color_100"), + message: getWarnMessage("c_badge_PaddingLeft"), type: "ImportSpecifier", }, ], }, - // with alias { - code: `import { global_info_color_100 as infoColor } from '@patternfly/react-tokens';`, - output: `import { global_info_color_100 as infoColor } from '@patternfly/react-tokens';`, + // with alias + code: `import { c_badge_PaddingLeft as badgePL } from '@patternfly/react-tokens';`, + output: `import { c_badge_PaddingLeft as badgePL } from '@patternfly/react-tokens';`, errors: [ { - message: getWarnMessage("global_info_color_100"), + message: getWarnMessage("c_badge_PaddingLeft"), type: "ImportSpecifier", }, ], }, { // named import - esm - code: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/esm/global_info_color_100';`, - output: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/esm/global_info_color_100';`, + code: `import { c_badge_PaddingLeft } from '@patternfly/react-tokens/dist/esm/c_badge_PaddingLeft';`, + output: `import { c_badge_PaddingLeft } from '@patternfly/react-tokens/dist/esm/c_badge_PaddingLeft';`, errors: [ { - message: getWarnMessage("global_info_color_100"), + message: getWarnMessage("c_badge_PaddingLeft"), type: "ImportSpecifier", }, ], }, { // named import - js - code: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/js/global_info_color_100';`, - output: `import { global_info_color_100 } from '@patternfly/react-tokens/dist/js/global_info_color_100';`, + code: `import { c_badge_PaddingLeft } from '@patternfly/react-tokens/dist/js/c_badge_PaddingLeft';`, + output: `import { c_badge_PaddingLeft } from '@patternfly/react-tokens/dist/js/c_badge_PaddingLeft';`, errors: [ { - message: getWarnMessage("global_info_color_100"), + message: getWarnMessage("c_badge_PaddingLeft"), type: "ImportSpecifier", }, ], }, { // default import - esm - code: `import global_info_color_100 from '@patternfly/react-tokens/dist/esm/global_info_color_100';`, - output: `import global_info_color_100 from '@patternfly/react-tokens/dist/esm/global_info_color_100';`, + code: `import c_badge_PaddingLeft from '@patternfly/react-tokens/dist/esm/c_badge_PaddingLeft';`, + output: `import c_badge_PaddingLeft from '@patternfly/react-tokens/dist/esm/c_badge_PaddingLeft';`, errors: [ { - message: getWarnMessage("global_info_color_100"), - type: "ImportDeclaration", + message: getWarnMessage("c_badge_PaddingLeft"), + type: "ImportDefaultSpecifier", }, ], }, { // default import - js - code: `import global_info_color_100 from '@patternfly/react-tokens/dist/js/global_info_color_100';`, - output: `import global_info_color_100 from '@patternfly/react-tokens/dist/js/global_info_color_100';`, + code: `import c_badge_PaddingLeft from '@patternfly/react-tokens/dist/js/c_badge_PaddingLeft';`, + output: `import c_badge_PaddingLeft from '@patternfly/react-tokens/dist/js/c_badge_PaddingLeft';`, errors: [ { - message: getWarnMessage("global_info_color_100"), - type: "ImportDeclaration", + message: getWarnMessage("c_badge_PaddingLeft"), + type: "ImportDefaultSpecifier", }, ], }, { // default import with custom name - code: `import someToken from '@patternfly/react-tokens/dist/esm/global_info_color_100';`, - output: `import someToken from '@patternfly/react-tokens/dist/esm/global_info_color_100';`, + code: `import someToken from '@patternfly/react-tokens/dist/esm/c_badge_PaddingLeft';`, + output: `import someToken from '@patternfly/react-tokens/dist/esm/c_badge_PaddingLeft';`, + errors: [ + { + message: getWarnMessage("c_badge_PaddingLeft"), + type: "ImportDefaultSpecifier", + }, + ], + }, + + // WARNINGS - CSS variables + { + code: `document.documentElement.style.setProperty("--pf-v5-c-button--PaddingTop", "2rem");`, + output: `document.documentElement.style.setProperty("--pf-v5-c-button--PaddingTop", "2rem");`, errors: [ { - message: getWarnMessage("global_info_color_100"), - type: "ImportDeclaration", + message: getWarnMessage("--pf-v5-c-button--PaddingTop"), + type: "Literal", }, ], }, - // CSS variables in strings { - code: `
`, - output: `
`, + code: `
Some banner
`, + output: `
Some banner
`, errors: [ { - message: getWarnMessage("--pf-v5-global--success-color--200"), + message: getWarnMessage("--pf-v5-c-banner--PaddingBottom"), + type: "Literal", + }, + ], + }, + + // FIXES - non color tokens + { + code: `import { global_FontWeight_normal } from "@patternfly/react-tokens"; + global_FontWeight_normal;`, + output: `import { global_font_weight_body_default } from "@patternfly/react-tokens"; + global_font_weight_body_default;`, + errors: [ + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "ImportSpecifier", + }, + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "Identifier", + }, + ], + }, + { + // with alias + code: `import { global_FontWeight_normal as fontW_normal } from "@patternfly/react-tokens"; + fontW_normal;`, + output: `import { global_font_weight_body_default as fontW_normal } from "@patternfly/react-tokens"; + fontW_normal;`, + errors: [ + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "ImportSpecifier", + }, + ], + }, + { + // named import - esm + code: `import { global_FontWeight_normal } from '@patternfly/react-tokens/dist/esm/global_FontWeight_normal'; + global_FontWeight_normal;`, + output: `import { global_font_weight_body_default } from "@patternfly/react-tokens/dist/esm/global_font_weight_body_default"; + global_font_weight_body_default;`, + errors: [ + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "ImportSpecifier", + }, + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "Identifier", + }, + ], + }, + { + // named import - js + code: `import { global_FontWeight_normal } from '@patternfly/react-tokens/dist/js/global_FontWeight_normal'; + global_FontWeight_normal;`, + output: `import { global_font_weight_body_default } from "@patternfly/react-tokens/dist/js/global_font_weight_body_default"; + global_font_weight_body_default;`, + errors: [ + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "ImportSpecifier", + }, + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "Identifier", + }, + ], + }, + { + // named import - esm + code: `import global_FontWeight_normal from '@patternfly/react-tokens/dist/esm/global_FontWeight_normal'; + global_FontWeight_normal;`, + output: `import global_font_weight_body_default from "@patternfly/react-tokens/dist/esm/global_font_weight_body_default"; + global_font_weight_body_default;`, + errors: [ + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "ImportDefaultSpecifier", + }, + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "Identifier", + }, + ], + }, + { + // named import - js + code: `import global_FontWeight_normal from '@patternfly/react-tokens/dist/js/global_FontWeight_normal'; + global_FontWeight_normal;`, + output: `import global_font_weight_body_default from "@patternfly/react-tokens/dist/js/global_font_weight_body_default"; + global_font_weight_body_default;`, + errors: [ + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "ImportDefaultSpecifier", + }, + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "Identifier", + }, + ], + }, + { + // default import with custom name + code: `import fontWeightNormal from '@patternfly/react-tokens/dist/esm/global_FontWeight_normal'; + fontWeightNormal;`, + output: `import global_font_weight_body_default from "@patternfly/react-tokens/dist/esm/global_font_weight_body_default"; + global_font_weight_body_default;`, + errors: [ + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "ImportDefaultSpecifier", + }, + { + message: getFixMessage( + "global_FontWeight_normal", + "global_font_weight_body_default" + ), + type: "Identifier", + }, + ], + }, + + // FIXES - non color CSS variables + { + code: `document.documentElement.style.setProperty("--pf-v5-global--ZIndex--lg", "3");`, + output: `document.documentElement.style.setProperty("--pf-t--global--z-index--lg", "3");`, + errors: [ + { + message: getFixMessage( + "--pf-v5-global--ZIndex--lg", + "--pf-t--global--z-index--lg" + ), type: "Literal", }, ], @@ -108,8 +298,110 @@ ruleTester.run("tokens-warn", rule, { output: `
`, errors: [ { - message: - "--pf-v5-global--BorderWidth--lg is an old CSS token and has been replaced with --pf-t--global--border--width--extra-strong. If you want to use a different token, check our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.", + message: getFixMessage( + "--pf-v5-global--BorderWidth--lg", + "--pf-t--global--border--width--extra-strong" + ), + type: "Literal", + }, + ], + }, + + // FIXES - color tokens + { + code: `import { global_Color_100 } from "@patternfly/react-tokens";`, + output: `import { temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens";`, + errors: [ + { + message: getColorFixMessage("global_Color_100"), + type: "ImportSpecifier", + }, + ], + }, + { + // with alias + code: `import { global_Color_100 as color100 } from "@patternfly/react-tokens";`, + output: `import { temp_dev_tbd as color100 /* CODEMODS: you should update this color token, original v5 token was global_Color_100 */ } from "@patternfly/react-tokens";`, + errors: [ + { + message: getColorFixMessage("global_Color_100"), + type: "ImportSpecifier", + }, + ], + }, + { + // named import - esm + code: `import { global_Color_100 } from '@patternfly/react-tokens/dist/esm/global_Color_100';`, + output: `import { temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";`, + errors: [ + { + message: getColorFixMessage("global_Color_100"), + type: "ImportSpecifier", + }, + ], + }, + { + // named import - js + code: `import { global_Color_100 } from '@patternfly/react-tokens/dist/js/global_Color_100';`, + output: `import { temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/js/temp_dev_tbd";`, + errors: [ + { + message: getColorFixMessage("global_Color_100"), + type: "ImportSpecifier", + }, + ], + }, + { + // default import - esm + code: `import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';`, + output: `import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";`, + errors: [ + { + message: getColorFixMessage("global_Color_100"), + type: "ImportDefaultSpecifier", + }, + ], + }, + { + // default import - js + code: `import global_Color_100 from '@patternfly/react-tokens/dist/js/global_Color_100';`, + output: `import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/js/temp_dev_tbd";`, + errors: [ + { + message: getColorFixMessage("global_Color_100"), + type: "ImportDefaultSpecifier", + }, + ], + }, + { + // default import with custom name + code: `import someColor from '@patternfly/react-tokens/dist/esm/global_Color_100';`, + output: `import someColor/* CODEMODS: you should update this color token, original v5 token was global_Color_100 */ from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";`, + errors: [ + { + message: getColorFixMessage("global_Color_100"), + type: "ImportDefaultSpecifier", + }, + ], + }, + + // FIXES - color CSS variables + { + code: `document.documentElement.style.setProperty("--pf-v5-global--success-color--200", "#abc");`, + output: `document.documentElement.style.setProperty("--pf-t--temp--dev--tbd"/* CODEMODS: original v5 color was --pf-v5-global--success-color--200 */, "#abc");`, + errors: [ + { + message: getColorFixMessage("--pf-v5-global--success-color--200", false), + type: "Literal", + }, + ], + }, + { + code: `
`, + output: `
`, + errors: [ + { + message: getColorFixMessage("--pf-v5-global--Color--100", false), type: "Literal", }, ], From 6188763e7520aecb2cc7fc6b1f0df743287cc9ef Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 16 Sep 2024 15:48:51 +0200 Subject: [PATCH 5/8] refactor(tokens) --- .../src/rules/v6/tokensWarn/tokens-warn.ts | 134 +++++++++--------- 1 file changed, 66 insertions(+), 68 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts index 837e34c64..f90c9ee06 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts @@ -1,17 +1,13 @@ import { Rule } from "eslint"; import { IdentifierWithParent, + ImportDefaultSpecifierWithParent, ImportSpecifierWithParent, getDefaultImportsFromPackage, getFromPackage, getImportPath, } from "../../helpers"; -import { - Identifier, - ImportDeclaration, - ImportSpecifier, - Literal, -} from "estree-jsx"; +import { Identifier, ImportSpecifier, Literal } from "estree-jsx"; import { oldTokens, oldCssVarNamesV5, @@ -29,20 +25,18 @@ module.exports = { const { imports: tokenSpecifiers } = getFromPackage(context, tokensPackage); - const defaultTokenImports = getDefaultImportsFromPackage( + const defaultTokenSpecifiers = getDefaultImportsFromPackage( context, tokensPackage ) .map((specifier) => ({ specifier, path: getImportPath(specifier), - declaration: specifier.parent, })) .filter(({ path }) => path !== undefined) - .map(({ specifier, path, declaration }) => ({ + .map(({ specifier, path }) => ({ specifier, token: (path as string).split("/").pop() as string, - declaration, })); const getWarnMessage = (tokenName: string) => @@ -51,7 +45,7 @@ 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) => + const getColorFixMessage = (oldToken: string, isReactToken = true) => `${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.`; @@ -61,8 +55,24 @@ module.exports = { globalNonColorTokensMap[token as keyof typeof globalNonColorTokensMap] !== "SKIP"; + const getTokenPathFix = ( + fixer: Rule.RuleFixer, + node: ImportSpecifierWithParent | ImportDefaultSpecifierWithParent, + oldToken: string, + newToken: string + ) => { + const packagePath = getImportPath(node); + if (packagePath && packagePath.includes(oldToken)) { + const newPath = packagePath.replace(oldToken, newToken); + return fixer.replaceText(node.parent?.source!, `"${newPath}"`); + } + }; + const replaceToken = ( - node: ImportDeclaration | ImportSpecifier | Identifier, + node: + | ImportSpecifierWithParent + | ImportDefaultSpecifierWithParent + | Identifier, oldToken: string ) => { const newToken = @@ -74,71 +84,59 @@ module.exports = { node, message: getFixMessage(oldToken, newToken), fix(fixer) { - if (node.type === "ImportDeclaration") { - const newDeclaration = node.source.value - ?.toString() - .replace(oldToken, newToken) as string; - - return [ - fixer.replaceText(node.specifiers[0], newToken), - fixer.replaceText(node.source, `"${newDeclaration}"`), - ]; + if (node.type === "Identifier") { + return fixer.replaceText(node, newToken); } - if (node.type === "ImportSpecifier") { - return fixer.replaceText(node.imported, newToken); - } + const tokenPathFix = getTokenPathFix(fixer, node, oldToken, newToken); - return fixer.replaceText(node, newToken); + return [ + fixer.replaceText( + node.type === "ImportSpecifier" ? node.imported : node, + newToken + ), + ...(tokenPathFix ? [tokenPathFix] : []), + ]; }, }); }; const updateColorTokenImport = ( - node: ImportSpecifierWithParent | ImportDeclaration, + node: ImportSpecifierWithParent | ImportDefaultSpecifierWithParent, 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; - } + // either has an aliased named import, or a default import with a custom name (not matching the token in an import path) + const hasAlias = node.local.name !== token; - 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}` : "" + hasAlias ? `, original v5 token was ${token}` : "" } */`; context.report({ node, - message: getColorFixMessage(token, true), + message: getColorFixMessage(token), fix(fixer) { - const fixes = [ - fixer.replaceText( - node, - `temp_dev_tbd as ${node.local.name} ${comment}` - ), - ]; + const fixes = []; + const tokenPathFix = getTokenPathFix( + fixer, + node, + token, + "temp_dev_tbd" + ); + + if (tokenPathFix) { + fixes.push(tokenPathFix); + } - 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}"`)); + if (node.type === "ImportSpecifier") { + fixes.push( + fixer.replaceText( + node, + `temp_dev_tbd as ${node.local.name} ${comment}` + ) + ); + } else { + fixes.push(fixer.insertTextAfter(node, comment)); } return fixes; @@ -147,7 +145,7 @@ module.exports = { }; const handleToken = ( - node: ImportSpecifier | ImportDeclaration, + node: ImportSpecifierWithParent | ImportDefaultSpecifierWithParent, token: string ) => { if (oldGlobalColorTokens.includes(token)) { @@ -175,16 +173,16 @@ module.exports = { handleToken(node, token); } }, - ImportDeclaration(node: ImportDeclaration) { - const tokenWithDeclaration = defaultTokenImports.find( - ({ declaration }) => node.source.value === declaration?.source.value + ImportDefaultSpecifier(node: ImportDefaultSpecifierWithParent) { + const specifierWithToken = defaultTokenSpecifiers.find( + ({ specifier }) => node === specifier ); - if (!tokenWithDeclaration) { + if (!specifierWithToken) { return; } - handleToken(node, tokenWithDeclaration.token); + handleToken(node, specifierWithToken.token); }, Identifier(node: Identifier) { const parentType = (node as IdentifierWithParent).parent?.type; @@ -196,7 +194,7 @@ module.exports = { return; } - const tokenInfo = defaultTokenImports.find( + const tokenInfo = defaultTokenSpecifiers.find( ({ specifier }) => node.name === specifier.local.name ); @@ -232,7 +230,7 @@ module.exports = { context.report({ node, - message: getColorFixMessage(varName), + message: getColorFixMessage(varName, false), fix(fixer) { return fixer.replaceText( node, @@ -269,7 +267,7 @@ module.exports = { if (oldCssVarNames.includes(varName)) { context.report({ node, - message: getWarnMessage(node.value), + message: getWarnMessage(varName), }); } }, From a2ec8573187b7d9d2377cae80833eb91170e9de8 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 16 Sep 2024 16:04:14 +0200 Subject: [PATCH 6/8] refactor(tokens): rename rule --- .../rules/v6/tokensUpdate/tokens-update.md | 24 +++++++++++++++++++ .../tokens-update.test.ts} | 2 +- .../tokens-update.ts} | 0 .../tokensUpdateInput.tsx} | 6 ++--- .../tokensUpdateOutput.tsx} | 6 ++--- .../src/rules/v6/tokensWarn/tokens-warn.md | 17 ------------- 6 files changed, 31 insertions(+), 24 deletions(-) create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md rename packages/eslint-plugin-pf-codemods/src/rules/v6/{tokensWarn/tokens-warn.test.ts => tokensUpdate/tokens-update.test.ts} (99%) rename packages/eslint-plugin-pf-codemods/src/rules/v6/{tokensWarn/tokens-warn.ts => tokensUpdate/tokens-update.ts} (100%) rename packages/eslint-plugin-pf-codemods/src/rules/v6/{tokensWarn/tokensWarnInput.tsx => tokensUpdate/tokensUpdateInput.tsx} (87%) rename packages/eslint-plugin-pf-codemods/src/rules/v6/{tokensWarn/tokensWarnOutput.tsx => tokensUpdate/tokensUpdateOutput.tsx} (90%) delete mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.md diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md new file mode 100644 index 000000000..42a0b4f82 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md @@ -0,0 +1,24 @@ +### tokens-update + +We have updated our CSS tokens. About half of our tokens have been replaced with newer ones. + +- this rule provides an autofix for global non color tokens +- global color tokens will be replaced with a temporary hot pink color token (`temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` class) + - don't forget to replace these tokens later +- other non-global (component or chart) tokens need to be replaced manually + +To find a suitable replacement token, check our [v6 token documentation](https://staging-v6.patternfly.org/tokens/all-patternfly-tokens). + +#### Examples + +In: + +```jsx +%inputExample% +``` + +Out: + +```jsx +%outputExample% +``` diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts similarity index 99% rename from packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts rename to packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts index 111bc7b0f..4f169a93a 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts @@ -1,5 +1,5 @@ const ruleTester = require("../../ruletester"); -import * as rule from "./tokens-warn"; +import * as rule from "./tokens-update"; const getWarnMessage = (tokenName: string) => `${tokenName} is an old CSS token. About half of our tokens have been replaced with newer ones. To find a suitable replacement token, check our new documentation https://staging-v6.patternfly.org/tokens/all-patternfly-tokens.`; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.ts similarity index 100% rename from packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.ts rename to packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.ts diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateInput.tsx similarity index 87% rename from packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx rename to packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateInput.tsx index 03b2a7b91..48c20abbc 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnInput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateInput.tsx @@ -15,15 +15,15 @@ document.documentElement.style.setProperty("--pf-v5-global--ZIndex--lg", "3"); >; // warnings (not fixable) -import global_warning_color_100 from "@patternfly/react-tokens/dist/esm/global_warning_color_100"; +import c_badge_PaddingLeft from "@patternfly/react-tokens/dist/esm/c_badge_PaddingLeft"; import { c_alert__FontSize } from "@patternfly/react-tokens"; -global_warning_color_100; +c_badge_PaddingLeft; c_alert__FontSize;
; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx similarity index 90% rename from packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx rename to packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx index 92da6db81..a1c42a916 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokensWarnOutput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx @@ -15,15 +15,15 @@ document.documentElement.style.setProperty("--pf-t--global--z-index--lg", "3"); >; // warnings (not fixable) -import global_warning_color_100 from "@patternfly/react-tokens/dist/esm/global_warning_color_100"; +import c_badge_PaddingLeft from "@patternfly/react-tokens/dist/esm/c_badge_PaddingLeft"; import { c_alert__FontSize } from "@patternfly/react-tokens"; -global_warning_color_100; +c_badge_PaddingLeft; c_alert__FontSize;
; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.md deleted file mode 100644 index 43f4b5e3f..000000000 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensWarn/tokens-warn.md +++ /dev/null @@ -1,17 +0,0 @@ -### tokens-warn - -We have updated our CSS tokens. About half of our tokens have been replaced with newer ones. To find a suitable replacement token, check our [v6 token documentation](https://staging-v6.patternfly.org/tokens/all-patternfly-tokens). - -#### Examples - -In: - -```jsx -%inputExample% -``` - -Out: - -```jsx -%outputExample% -``` From 9faaa8360656eec5234b2785feee539f8bd2cc31 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Fri, 20 Sep 2024 11:20:18 +0200 Subject: [PATCH 7/8] feat(tokens): update temp_dev_tbd token to t_temp_dev_tbd --- .../rules/v6/tokensUpdate/tokens-update.md | 2 +- .../v6/tokensUpdate/tokens-update.test.ts | 20 +++++++++---------- .../rules/v6/tokensUpdate/tokens-update.ts | 6 +++--- .../v6/tokensUpdate/tokensUpdateOutput.tsx | 8 ++++---- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md index 42a0b4f82..0389e5e3e 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md @@ -3,7 +3,7 @@ We have updated our CSS tokens. About half of our tokens have been replaced with newer ones. - this rule provides an autofix for global non color tokens -- global color tokens will be replaced with a temporary hot pink color token (`temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` class) +- global color tokens will be replaced with a temporary hot pink color token (`t_temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` class) - don't forget to replace these tokens later - other non-global (component or chart) tokens need to be replaced manually diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts index 4f169a93a..183482d72 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.test.ts @@ -9,7 +9,7 @@ const getFixMessage = (oldToken: string, newToken: string) => const getColorFixMessage = (oldToken: string, isReactToken = true) => `${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" + isReactToken ? "t_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.`; ruleTester.run("tokens-warn", rule, { @@ -210,7 +210,7 @@ ruleTester.run("tokens-warn", rule, { ], }, { - // named import - esm + // default import - esm code: `import global_FontWeight_normal from '@patternfly/react-tokens/dist/esm/global_FontWeight_normal'; global_FontWeight_normal;`, output: `import global_font_weight_body_default from "@patternfly/react-tokens/dist/esm/global_font_weight_body_default"; @@ -233,7 +233,7 @@ ruleTester.run("tokens-warn", rule, { ], }, { - // named import - js + // default import - js code: `import global_FontWeight_normal from '@patternfly/react-tokens/dist/js/global_FontWeight_normal'; global_FontWeight_normal;`, output: `import global_font_weight_body_default from "@patternfly/react-tokens/dist/js/global_font_weight_body_default"; @@ -310,7 +310,7 @@ ruleTester.run("tokens-warn", rule, { // FIXES - color tokens { code: `import { global_Color_100 } from "@patternfly/react-tokens";`, - output: `import { temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens";`, + output: `import { t_temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -321,7 +321,7 @@ ruleTester.run("tokens-warn", rule, { { // with alias code: `import { global_Color_100 as color100 } from "@patternfly/react-tokens";`, - output: `import { temp_dev_tbd as color100 /* CODEMODS: you should update this color token, original v5 token was global_Color_100 */ } from "@patternfly/react-tokens";`, + output: `import { t_temp_dev_tbd as color100 /* CODEMODS: you should update this color token, original v5 token was global_Color_100 */ } from "@patternfly/react-tokens";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -332,7 +332,7 @@ ruleTester.run("tokens-warn", rule, { { // named import - esm code: `import { global_Color_100 } from '@patternfly/react-tokens/dist/esm/global_Color_100';`, - output: `import { temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";`, + output: `import { t_temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -343,7 +343,7 @@ ruleTester.run("tokens-warn", rule, { { // named import - js code: `import { global_Color_100 } from '@patternfly/react-tokens/dist/js/global_Color_100';`, - output: `import { temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/js/temp_dev_tbd";`, + output: `import { t_temp_dev_tbd as global_Color_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/js/t_temp_dev_tbd";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -354,7 +354,7 @@ ruleTester.run("tokens-warn", rule, { { // default import - esm code: `import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';`, - output: `import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";`, + output: `import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -365,7 +365,7 @@ ruleTester.run("tokens-warn", rule, { { // default import - js code: `import global_Color_100 from '@patternfly/react-tokens/dist/js/global_Color_100';`, - output: `import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/js/temp_dev_tbd";`, + output: `import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/js/t_temp_dev_tbd";`, errors: [ { message: getColorFixMessage("global_Color_100"), @@ -376,7 +376,7 @@ ruleTester.run("tokens-warn", rule, { { // default import with custom name code: `import someColor from '@patternfly/react-tokens/dist/esm/global_Color_100';`, - output: `import someColor/* CODEMODS: you should update this color token, original v5 token was global_Color_100 */ from "@patternfly/react-tokens/dist/esm/temp_dev_tbd";`, + output: `import someColor/* CODEMODS: you should update this color token, original v5 token was global_Color_100 */ from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd";`, errors: [ { message: getColorFixMessage("global_Color_100"), diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.ts index f90c9ee06..094d9864c 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.ts @@ -47,7 +47,7 @@ module.exports = { const getColorFixMessage = (oldToken: string, isReactToken = true) => `${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" + isReactToken ? "t_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) => @@ -121,7 +121,7 @@ module.exports = { fixer, node, token, - "temp_dev_tbd" + "t_temp_dev_tbd" ); if (tokenPathFix) { @@ -132,7 +132,7 @@ module.exports = { fixes.push( fixer.replaceText( node, - `temp_dev_tbd as ${node.local.name} ${comment}` + `t_temp_dev_tbd as ${node.local.name} ${comment}` ) ); } else { diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx index a1c42a916..bb8ae527c 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokensUpdateOutput.tsx @@ -29,10 +29,10 @@ c_alert__FontSize; >; // 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"; +import global_Color_100/* CODEMODS: you should update this color token */ from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd"; +import { t_temp_dev_tbd as global_Color_200 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens/dist/esm/t_temp_dev_tbd"; +import { t_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/t_temp_dev_tbd"; +import { t_temp_dev_tbd as global_BorderColor_100 /* CODEMODS: you should update this color token */ } from "@patternfly/react-tokens"; global_Color_100; global_Color_200; From 6906ca937e442611033d55a85896dda33fa7554a Mon Sep 17 00:00:00 2001 From: adamviktora <84135613+adamviktora@users.noreply.github.com> Date: Mon, 23 Sep 2024 16:52:45 +0200 Subject: [PATCH 8/8] docs: update description Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- .../src/rules/v6/tokensUpdate/tokens-update.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md index 0389e5e3e..eaac6cab4 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/tokensUpdate/tokens-update.md @@ -3,8 +3,7 @@ We have updated our CSS tokens. About half of our tokens have been replaced with newer ones. - this rule provides an autofix for global non color tokens -- global color tokens will be replaced with a temporary hot pink color token (`t_temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` class) - - don't forget to replace these tokens later +- global color tokens will be replaced with a temporary hot pink color token **that must be manually replaced** (`t_temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` CSS variable) - other non-global (component or chart) tokens need to be replaced manually To find a suitable replacement token, check our [v6 token documentation](https://staging-v6.patternfly.org/tokens/all-patternfly-tokens).