feat(tailwindcss-transformer): Add support for cx, cva and clsx

.changeset/gold-vans-yell.md

@@ -0,0 +1,2 @@
+---
+---

packages/tailwindcss-transformer/src/__tests__/__snapshots__/transform-classname-cn.test.ts.snap

@@ -1,7 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className with cn 1`] = `
-"const Button: React.FC<ButtonProps> = ({ children, className }) => {
-    return <button className={cn("cl-c2153e59")}>{children}</button>;
-  }"
+exports[`className with cn/cx/clsx 1`] = `
+"const ButtonCn: React.FC<ButtonProps> = ({ children, className }) => {
+      return <button className={cn("cl-c2153e59")}>{children}</button>;
+    }
+
+    const ButtonCx: React.FC<ButtonProps> = ({ children, className }) => {
+      return <button className={cx("cl-c2153e59")}>{children}</button>;
+    }
+
+    const ButtonClsx: React.FC<ButtonProps> = ({ children, className }) => {
+      return <button className={clsx("cl-c2153e59")}>{children}</button>;
+    }"
 `;

packages/tailwindcss-transformer/src/__tests__/__snapshots__/transform-cn-object.test.ts.snap

@@ -1,7 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className with cn 1`] = `
-"const Button: React.FC<ButtonProps> = ({ children, intent, className }) => {
-    return <button className={cn({ danger: "cl-5a7355a7", 'success': "cl-c14c13cf" }[intent])}>{children}</button>;
-  }"
+exports[`className with cn/cx/clsx 1`] = `
+"const ButtonCn: React.FC<ButtonProps> = ({ children, intent, className }) => {
+      return <button className={cn({ danger: "cl-5a7355a7", 'success': "cl-c14c13cf" }[intent])}>{children}</button>;
+    }
+
+    const ButtonCx: React.FC<ButtonProps> = ({ children, intent, className }) => {
+      return <button className={cx({ danger: "cl-5a7355a7", 'success': "cl-c14c13cf" }[intent])}>{children}</button>;
+    }
+
+    const ButtonClsx: React.FC<ButtonProps> = ({ children, intent, className }) => {
+      return <button className={clsx({ danger: "cl-5a7355a7", 'success': "cl-c14c13cf" }[intent])}>{children}</button>;
+    }"
 `;

packages/tailwindcss-transformer/src/__tests__/__snapshots__/transform-cn.test.ts.snap

@@ -1,13 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cn 1`] = `
-"const Button: React.FC<ButtonProps> = ({ children, className }) => {
-    const buttonClasses = cn(
-      (something === 'flex' || 'flex') && "cl-222f930b",
-      ["cl-222f930b", "cl-222f930b"],
-      something === 'flex' || something === 'flex' ? (something ? "cl-222f930b" : "cl-222f930b") : "cl-222f930b",
-      className,
-    );
-    return <button className={buttonClasses}>{children}</button>;
-  };"
+exports[`cn/cx/clsx 1`] = `
+"const ButtonCn: React.FC<ButtonProps> = ({ children, className }) => {
+      const buttonClasses = cn(
+        (something === 'flex' || 'flex') && "cl-222f930b",
+        ["cl-222f930b", "cl-222f930b"],
+        something === 'flex' || something === 'flex' ? (something ? "cl-222f930b" : "cl-222f930b") : "cl-222f930b",
+        className,
+      );
+      return <button className={buttonClasses}>{children}</button>;
+    };
+
+    const ButtonCx: React.FC<ButtonProps> = ({ children, className }) => {
+      const buttonClasses = cx(
+        (something === 'flex' || 'flex') && "cl-222f930b",
+        ["cl-222f930b", "cl-222f930b"],
+        something === 'flex' || something === 'flex' ? (something ? "cl-222f930b" : "cl-222f930b") : "cl-222f930b",
+        className,
+      );
+      return <button className={buttonClasses}>{children}</button>;
+    };
+
+    const ButtonClsx: React.FC<ButtonProps> = ({ children, className }) => {
+      const buttonClasses = clsx(
+        (something === 'flex' || 'flex') && "cl-222f930b",
+        ["cl-222f930b", "cl-222f930b"],
+        something === 'flex' || something === 'flex' ? (something ? "cl-222f930b" : "cl-222f930b") : "cl-222f930b",
+        className,
+      );
+      return <button className={buttonClasses}>{children}</button>;
+    };"
 `;

packages/tailwindcss-transformer/src/__tests__/__snapshots__/transform-cva.test.ts.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`cva 1`] = `
+"const button = cva({
+      base: "cl-7e77acd4",
+      variants: {
+        intent: {
+          primary: [
+            "cl-44eeb93b",
+            "cl-5e9a40ae",
+            "cl-e9c0d2f3",
+            "cl-d8b3f644",
+          ],
+          secondary: "cl-6537e500",
+        },
+        size: {
+          small: "cl-716a7c80",
+          medium: "cl-3f348faf",
+        },
+      },
+      compoundVariants: [
+        {
+          intent: "primary",
+          size: "medium",
+          className: "cl-d2cf63c7"
+        },
+      ],
+      defaultVariants: {
+        intent: "primary",
+        size: "medium",
+      },
+    });
+
+    const Button: React.FC<ButtonProps> = ({ children, intent, size, className }) => {
+      return <button className={button({ intent, size, className: ["cl-5e9a40ae", className] })}>{children}</button>;
+    }
+
+    const ButtonLink: React.FC<LinkProps> = ({ children, intent, size, className }) => {
+      return <a className={button({ intent, size, className })}>{children}</a>
+    }"
+`;

packages/tailwindcss-transformer/src/__tests__/transform-classname-cn.test.ts

@@ -1,10 +1,18 @@
 import { transform } from '../index';
 
-test('className with cn', () => {
+test('className with cn/cx/clsx', () => {
   const result = transform(
-    `const Button: React.FC<ButtonProps> = ({ children, className }) => {
-    return <button className={cn('bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded')}>{children}</button>
-  }`,
+    `const ButtonCn: React.FC<ButtonProps> = ({ children, className }) => {
+      return <button className={cn('bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded')}>{children}</button>
+    }
+
+    const ButtonCx: React.FC<ButtonProps> = ({ children, className }) => {
+      return <button className={cx('bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded')}>{children}</button>
+    }
+
+    const ButtonClsx: React.FC<ButtonProps> = ({ children, className }) => {
+      return <button className={clsx('bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded')}>{children}</button>
+    }`,
     {
       styleCache: new Map(),
     },

packages/tailwindcss-transformer/src/__tests__/transform-cn-object.test.ts

@@ -1,10 +1,18 @@
 import { transform } from '../index';
 
-test('className with cn', () => {
+test('className with cn/cx/clsx', () => {
   const result = transform(
-    `const Button: React.FC<ButtonProps> = ({ children, intent, className }) => {
-    return <button className={cn({ danger: 'bg-red-500', 'success': 'bg-green-500' }[intent])}>{children}</button>
-  }`,
+    `const ButtonCn: React.FC<ButtonProps> = ({ children, intent, className }) => {
+      return <button className={cn({ danger: 'bg-red-500', 'success': 'bg-green-500' }[intent])}>{children}</button>
+    }
+
+    const ButtonCx: React.FC<ButtonProps> = ({ children, intent, className }) => {
+      return <button className={cx({ danger: 'bg-red-500', 'success': 'bg-green-500' }[intent])}>{children}</button>
+    }
+
+    const ButtonClsx: React.FC<ButtonProps> = ({ children, intent, className }) => {
+      return <button className={clsx({ danger: 'bg-red-500', 'success': 'bg-green-500' }[intent])}>{children}</button>
+    }`,
     {
       styleCache: new Map(),
     },

packages/tailwindcss-transformer/src/__tests__/transform-cn.test.ts

@@ -1,16 +1,36 @@
 import { transform } from '../index';
 
-test('cn', () => {
+test('cn/cx/clsx', () => {
   const result = transform(
-    `const Button: React.FC<ButtonProps> = ({ children, className }) => {
-    const buttonClasses = cn(
-      (something === 'flex' || 'flex') && 'flex',
-      ['flex', 'flex'],
-      something === 'flex' || something === 'flex' ? (something ? 'flex' : 'flex') : 'flex',
-      className,
-    );
-    return <button className={buttonClasses}>{children}</button>;
-  };`,
+    `const ButtonCn: React.FC<ButtonProps> = ({ children, className }) => {
+      const buttonClasses = cn(
+        (something === 'flex' || 'flex') && 'flex',
+        ['flex', 'flex'],
+        something === 'flex' || something === 'flex' ? (something ? 'flex' : 'flex') : 'flex',
+        className,
+      );
+      return <button className={buttonClasses}>{children}</button>;
+    };
+
+    const ButtonCx: React.FC<ButtonProps> = ({ children, className }) => {
+      const buttonClasses = cx(
+        (something === 'flex' || 'flex') && 'flex',
+        ['flex', 'flex'],
+        something === 'flex' || something === 'flex' ? (something ? 'flex' : 'flex') : 'flex',
+        className,
+      );
+      return <button className={buttonClasses}>{children}</button>;
+    };
+
+    const ButtonClsx: React.FC<ButtonProps> = ({ children, className }) => {
+      const buttonClasses = clsx(
+        (something === 'flex' || 'flex') && 'flex',
+        ['flex', 'flex'],
+        something === 'flex' || something === 'flex' ? (something ? 'flex' : 'flex') : 'flex',
+        className,
+      );
+      return <button className={buttonClasses}>{children}</button>;
+    };`,
     {
       styleCache: new Map(),
     },

packages/tailwindcss-transformer/src/__tests__/transform-cva.test.ts

@@ -0,0 +1,47 @@
+import { transform } from '../index';
+
+test('cva', () => {
+  const result = transform(
+    `const button = cva({
+      base: "rounded border font-semibold",
+      variants: {
+        intent: {
+          primary: [
+            "bg-blue-500",
+            "text-white",
+            "border-transparent",
+            "hover:bg-blue-600",
+          ],
+          secondary: "border-gray-400 bg-white text-gray-800 hover:bg-gray-100",
+        },
+        size: {
+          small: "px-2 py-1 text-sm",
+          medium: "px-4 py-2 text-base",
+        },
+      },
+      compoundVariants: [
+        {
+          intent: "primary",
+          size: "medium",
+          className: "uppercase"
+        },
+      ],
+      defaultVariants: {
+        intent: "primary",
+        size: "medium",
+      },
+    });
+
+    const Button: React.FC<ButtonProps> = ({ children, intent, size, className }) => {
+      return <button className={button({ intent, size, className: ['text-white', className] })}>{children}</button>
+    }
+
+    const ButtonLink: React.FC<LinkProps> = ({ children, intent, size, className }) => {
+      return <a className={button({ intent, size, className })}>{children}</a>
+    }`,
+    {
+      styleCache: new Map(),
+    },
+  );
+  expect(result).toMatchSnapshot();
+});

packages/tailwindcss-transformer/src/index.ts

@@ -73,12 +73,37 @@ export function transform(code: string, ctx: { styleCache: StyleCache }) {
       }
       this.traverse(path);
     },
-    // visit cn function calls containing TW classes
+    // visit a `className` property within any object containing TW classes
+    visitObjectProperty(path) {
+      const node = path.node;
+      if (path.node.key.type === 'Identifier' && path.node.key.name === 'className') {
+        visitNode(node, ctx);
+      }
+      this.traverse(path);
+    },
+    // visit function calls containing TW classes
     visitCallExpression(path) {
       const node = path.node;
-      if (node.callee.type === 'Identifier' && node.callee.name === 'cn') {
+      // `className` concatenation functions
+      if (node.callee.type === 'Identifier' && ['cn', 'cx', 'clsx'].includes(node.callee.name)) {
         visitNode(node, ctx);
       }
+      // cva functions (note: only compatible with cva@1.0)
+      if (
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'cva' &&
+        node.arguments[0]?.type === 'ObjectExpression'
+      ) {
+        for (const property of node.arguments[0].properties) {
+          if (
+            property.type === 'ObjectProperty' &&
+            property.key.type === 'Identifier' &&
+            ['base', 'variants'].includes(property.key.name)
+          ) {
+            visitNode(property, ctx);
+          }
+        }
+      }
       this.traverse(path);
     },
   });