feat(tokens): prefix with t_ (#774)

* feat(tokens): prefix with t_

* refactor: change tTokens name to tokensToPrefixWithT

packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.md

@@ -0,0 +1,18 @@
+### tokens-prefix-with-t [(#11002)](https://github.com/patternfly/patternfly-react/pull/11002)
+
+React tokens, whose value is a Patternfly token variable (with prefix --pf-t), are now prefixed with t_
+
+#### Examples
+
+In:
+
+```jsx
+%inputExample%
+```
+
+Out:
+
+```jsx
+%outputExample%
+```
+

packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.test.ts

@@ -0,0 +1,132 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./tokens-prefix-with-t";
+
+const message = `React tokens, whose value is a Patternfly token variable (has prefix --pf-t), are now prefixed with t_`;
+
+ruleTester.run("tokens-prefix-with-t", rule, {
+  valid: [
+    // tokens wich are not "--pf-t" variables
+    {
+      code: `import c_about_modal_box from '@patternfly/react-tokens/dist/esm/c_about_modal_box';`,
+    },
+    {
+      code: `import { c_about_modal_box } from '@patternfly/react-tokens';`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { global_font_size_100 } from "@patternfly/react-tokens";
+      global_font_size_100;`,
+      output: `import { t_global_font_size_100 } from "@patternfly/react-tokens";
+      t_global_font_size_100;`,
+      errors: [
+        {
+          message,
+          type: "ImportSpecifier",
+        },
+        {
+          message,
+          type: "Identifier",
+        },
+      ],
+    },
+    {
+      // with alias
+      code: `import { global_font_size_100 as customFontSize } from "@patternfly/react-tokens";
+      customFontSize;`,
+      output: `import { t_global_font_size_100 as customFontSize } from "@patternfly/react-tokens";
+      customFontSize;`,
+      errors: [
+        {
+          message,
+          type: "ImportSpecifier",
+        },
+      ],
+    },
+    {
+      // named import - esm
+      code: `import { global_font_size_100 } from '@patternfly/react-tokens/dist/esm/global_font_size_100';
+      global_font_size_100;`,
+      output: `import { t_global_font_size_100 } from "@patternfly/react-tokens/dist/esm/t_global_font_size_100";
+      t_global_font_size_100;`,
+      errors: [
+        {
+          message,
+          type: "ImportSpecifier",
+        },
+        {
+          message,
+          type: "Identifier",
+        },
+      ],
+    },
+    {
+      // named import - js
+      code: `import { global_font_size_100 } from '@patternfly/react-tokens/dist/js/global_font_size_100';
+      global_font_size_100;`,
+      output: `import { t_global_font_size_100 } from "@patternfly/react-tokens/dist/js/t_global_font_size_100";
+      t_global_font_size_100;`,
+      errors: [
+        {
+          message,
+          type: "ImportSpecifier",
+        },
+        {
+          message,
+          type: "Identifier",
+        },
+      ],
+    },
+    {
+      // default import - esm
+      code: `import global_font_size_100 from '@patternfly/react-tokens/dist/esm/global_font_size_100';
+      global_font_size_100;`,
+      output: `import t_global_font_size_100 from "@patternfly/react-tokens/dist/esm/t_global_font_size_100";
+      t_global_font_size_100;`,
+      errors: [
+        {
+          message,
+          type: "ImportDefaultSpecifier",
+        },
+        {
+          message,
+          type: "Identifier",
+        },
+      ],
+    },
+    {
+      // default import - js
+      code: `import global_font_size_100 from '@patternfly/react-tokens/dist/js/global_font_size_100';
+      global_font_size_100;`,
+      output: `import t_global_font_size_100 from "@patternfly/react-tokens/dist/js/t_global_font_size_100";
+      t_global_font_size_100;`,
+      errors: [
+        {
+          message,
+          type: "ImportDefaultSpecifier",
+        },
+        {
+          message,
+          type: "Identifier",
+        },
+      ],
+    },
+    {
+      // default import with custom name
+      code: `import customFontSize from '@patternfly/react-tokens/dist/esm/global_font_size_100';
+      customFontSize;`,
+      output: `import t_global_font_size_100 from "@patternfly/react-tokens/dist/esm/t_global_font_size_100";
+      t_global_font_size_100;`,
+      errors: [
+        {
+          message,
+          type: "ImportDefaultSpecifier",
+        },
+        {
+          message,
+          type: "Identifier",
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokens-prefix-with-t.ts

@@ -0,0 +1,137 @@
+import { Rule } from "eslint";
+import {
+  IdentifierWithParent,
+  ImportDefaultSpecifierWithParent,
+  ImportSpecifierWithParent,
+  getDefaultImportsFromPackage,
+  getFromPackage,
+  getImportPath,
+} from "../../helpers";
+import { Identifier, ImportSpecifier } from "estree-jsx";
+import { tokensToPrefixWithT } from "../../../tokenLists";
+
+module.exports = {
+  meta: { fixable: "code" },
+  create: function (context: Rule.RuleContext) {
+    const tokensPackage = "@patternfly/react-tokens";
+
+    const { imports: tokenSpecifiers } = getFromPackage(context, tokensPackage);
+
+    const defaultTokenSpecifiers = getDefaultImportsFromPackage(
+      context,
+      tokensPackage
+    )
+      .map((specifier) => ({
+        specifier,
+        path: getImportPath(specifier),
+      }))
+      .filter(({ path }) => path !== undefined)
+      .map(({ specifier, path }) => ({
+        specifier,
+        token: (path as string).split("/").pop() as string,
+      }));
+
+    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:
+        | ImportSpecifierWithParent
+        | ImportDefaultSpecifierWithParent
+        | Identifier,
+      oldToken: string
+    ) => {
+      const newToken = `t_${oldToken}`;
+
+      context.report({
+        node,
+        message: `React tokens, whose value is a Patternfly token variable (has prefix --pf-t), are now prefixed with t_`,
+        fix(fixer) {
+          if (node.type === "Identifier") {
+            return fixer.replaceText(node, newToken);
+          }
+
+          const tokenPathFix = getTokenPathFix(fixer, node, oldToken, newToken);
+
+          return [
+            fixer.replaceText(
+              node.type === "ImportSpecifier" ? node.imported : node,
+              newToken
+            ),
+            ...(tokenPathFix ? [tokenPathFix] : []),
+          ];
+        },
+      });
+    };
+
+    return {
+      ImportSpecifier(node: ImportSpecifier) {
+        if (tokenSpecifiers.includes(node)) {
+          const token = node.imported.name;
+          if (tokensToPrefixWithT.includes(token)) {
+            replaceToken(node, token);
+          }
+        }
+      },
+      ImportDefaultSpecifier(node: ImportDefaultSpecifierWithParent) {
+        const specifierWithToken = defaultTokenSpecifiers.find(
+          ({ specifier }) => node === specifier
+        );
+
+        if (!specifierWithToken) {
+          return;
+        }
+
+        const { token } = specifierWithToken;
+
+        if (tokensToPrefixWithT.includes(token)) {
+          replaceToken(node, token);
+        }
+      },
+      Identifier(node: Identifier) {
+        const parentType = (node as IdentifierWithParent).parent?.type;
+        // handle ImportSpecifier and ImportDefaultSpecifier separately
+        if (
+          parentType === "ImportSpecifier" ||
+          parentType === "ImportDefaultSpecifier"
+        ) {
+          return;
+        }
+
+        const specifierWithToken = defaultTokenSpecifiers.find(
+          ({ specifier }) => node.name === specifier.local.name
+        );
+
+        if (specifierWithToken) {
+          const { token } = specifierWithToken;
+          if (tokensToPrefixWithT.includes(token)) {
+            replaceToken(node, token);
+          }
+        }
+
+        const unaliasedTokenSpecifier = tokenSpecifiers.find(
+          (specifier) =>
+            specifier.local.name === specifier.imported.name &&
+            node.name === specifier.local.name
+        );
+
+        if (
+          unaliasedTokenSpecifier &&
+          tokensToPrefixWithT.includes(node.name)
+        ) {
+          replaceToken(node, node.name);
+        }
+      },
+    };
+  },
+};

packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokensPrefixWithTInput.tsx

@@ -0,0 +1,3 @@
+import color_green_10 from "@patternfly/react-tokens/dist/esm/color_green_10";
+
+color_green_10;

packages/eslint-plugin-pf-codemods/src/rules/v6/tokensPrefixWithT/tokensPrefixWithTOutput.tsx

@@ -0,0 +1,3 @@
+import t_color_green_10 from "@patternfly/react-tokens/dist/esm/t_color_green_10";
+
+t_color_green_10;

packages/eslint-plugin-pf-codemods/src/tokenLists/index.ts

@@ -2,3 +2,4 @@ export * from "./oldCssVarNamesV5";
 export * from "./oldGlobalCssVarNames";
 export * from "./oldGlobalTokens";
 export * from "./oldTokens";
+export * from "./tokensToPrefixWithT";