Optimization

src/__tests__/__snapshots__/emit.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`emit > supports emitting as CSS module 1`] = `
-"// babel-tailwind:/Users/aet/Documents/Git/babel-tailwind/src/.temp-attr/index.module.css
+"// babel-tailwind:/Users/aet/Documents/Git/babel-tailwind/src/.temp-emit/index.module.css
 var index_default = {
   "tw-gqn2k6": "index_tw-gqn2k6",
   "tw-1qtvvjy": "index_tw-1qtvvjy"

src/__tests__/emit.test.ts

@@ -3,7 +3,7 @@ import { describe, it } from "vitest";
 import { getBuild, matchSnapshot } from "./utils";
 
 describe("emit", () => {
-  const compileESBuild = getBuild("attr");
+  const compileESBuild = getBuild("emit");
 
   it("supports emitting as CSS module", async () => {
     const { files } = await compileESBuild({

src/__tests__/error.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+
 import { getBuild } from "./utils";
 
 describe("babel-tailwind", () => {

src/__tests__/merge.test.ts

@@ -45,8 +45,50 @@ describe("merges with existing className attribute", () => {
 
     const clsName = getClassName("text-center");
     expect(files.js.text).toContain(
-      `className: ({\n    isEntering\n  }) => _cx(isEntering ? "enter" : "exit", "${clsName}")`
+      `className: ({\n    isEntering\n  }) => _cx("${clsName}", isEntering ? "enter" : "exit")`
     );
     expect(files.css.text).toMatch(`.${clsName} {\n  text-align: center;\n}`);
   });
+
+  it("reuses clsx in scope", async () => {
+    const { files } = await compileESBuild({
+      clsx: "clsx",
+      expectFiles: 2,
+      javascript: /* tsx */ `
+        import { clsx } from "clsx";
+
+        export function Hello(className) {
+          return (
+            <div className={clsx("font-semibold", className)} css="text-center" />
+          );
+        }
+      `,
+    });
+
+    expect([...files.js.text.match(/from "clsx"/g)!]).toHaveLength(1);
+    expect(files.js.text).toContain(
+      '{ className: clsx("tw-gqn2k6", "font-semibold", className)'
+    );
+  });
+
+  it("does not reuse invalid clsx", async () => {
+    const { files } = await compileESBuild({
+      clsx: "clsx",
+      expectFiles: 2,
+      javascript: /* tsx */ `
+        import { clsx } from "clsx";
+
+        export function Hello(className) {
+          let clsx = () => {};
+          return (
+            <div className={clsx("font-semibold", className)} css="text-center" />
+          );
+        }
+      `,
+    });
+
+    expect(files.js.text).toContain(
+      'className: _cx("tw-gqn2k6", clsx("font-semibold", className))'
+    );
+  });
 });