Codemods for quick migration of large scale projects

[emilbonnek]

We recently adopted tailwind-merge and we had a decently sized React project with a lot of className={`foo ${bar}`}'s across the project in many different files. To switch over to using twMerge calls I made a little jscodeshift codemod which should be pretty plug-and-play if someone else wants to use it as well.

1. Copy this to a file named twmerge-transform.js

/**
 * This is a codemod that transforms JSX attributes ending with "classname" (case insensitive)
 * that have a template literal inside a JSX expression container (e.g. <div className={`foo ${bar}`}>)
 * into a call to twMerge (e.g. <div className={twMerge("foo", bar)}>). It also adds the import where needed.
 */
module.exports = function (fileInfo, api) {
  const j = api.jscodeshift;

  const root = j(fileInfo.source);
  let hasTransformationOccurred = false;

  // Find all JSX attributes ending with "classname" (case insensitive)
  root
    .find(j.JSXAttribute)
    .filter((path) => /classname$/i.test(path.node.name.name))
    // Filter for attributes where the value is a template literal inside a JSX expression container (e.g. <div className={`foo ${bar}`}>)
    .filter(
      (path) =>
        j.JSXExpressionContainer.check(path.node.value) &&
        j.TemplateLiteral.check(path.node.value.expression),
    )
    .forEach((path) => {
      const template = path.node.value.expression;

      // Extract static class strings from the template literals (e.g. "foo" in <div className={`foo ${bar}`}>)
      const staticClasses = template.quasis
        .map((quasi) => quasi.value.cooked.trim())
        .filter(Boolean)
        .join(" ");

      // Extract identifiers (like variable names) from the template literals (e.g. "bar" in <div className={`foo ${bar}`}>)
      const dynamicClassNames = template.expressions
        .filter((exp) => exp.type === "Identifier")
        .map((exp) => exp.name);

      // If there are static classes or dynamic class names, replace the original JSX value with a call to twMerge (e.g. <div className={twMerge("foo", bar)}>)
      if (staticClasses || dynamicClassNames.length) {
        const twMergeArguments = [
          j.literal(staticClasses),
          ...dynamicClassNames.map((name) => j.identifier(name)),
        ].filter(Boolean);

        path.node.value = j.jsxExpressionContainer(
          j.callExpression(j.identifier("twMerge"), twMergeArguments),
        );
        hasTransformationOccurred = true;
      }
    });

  // If a transformation occurred in this file, check if there's already an import for 'twMerge' If not, add the import at the top of the file
  if (hasTransformationOccurred) {
    const existingImport = root.find(j.ImportDeclaration, {
      source: {
        type: "Literal",
        value: "tailwind-merge",
      },
    });

    if (existingImport.size() === 0) {
      root
        .get()
        .node.program.body.unshift(
          j.importDeclaration(
            [j.importSpecifier(j.identifier("twMerge"))],
            j.literal("tailwind-merge"),
          ),
        );
    }
  }

  return root.toSource();
};

2. Install jscodeshift globally

npm install -g jscodeshift

3. Run the codemod on all .tsx files in the project

jscodeshift -t ./twmerge-transform.js --extensions=tsx --parser=tsx  ./

4. You probably want to re-run your formatter (e.g. prettier) since jscodeshift sometimes leaves the code looking funny.

[dcastil]

Nice, this is awesome! Thanks for sharing! 🙏