diff --git a/packages/eslint-plugin-pf-codemods/src/index.ts b/packages/eslint-plugin-pf-codemods/src/index.ts index 0418d2fe..21e8fe7a 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 487f2cb0..c876b161 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 2e97bea2..62df94a0 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 ca9eebf2..24dad1e6 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 fa7840bc..48521d18 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 fa7840bc..72c2f339 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 00000000..c10fd44e --- /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 9776278e..7887402f 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 00000000..2a6939d0 --- /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 00000000..31c4148b --- /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