Add extra processing options

src/index.test.ts

@@ -1,14 +1,14 @@
 import { promises as fs } from "node:fs";
 import { resolve } from "node:path";
-import { build, transformSync } from "esbuild";
+import { type OutputFile, build, transformSync } from "esbuild";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { name } from "../package.json" with { type: "json" };
 import {
   type TailwindPluginOptions,
   babelPlugin,
+  createPostCSS,
   getClassName,
   getTailwindPlugins,
-  createPostCSS,
 } from "./index";
 
 const folder = resolve(import.meta.dirname, "temp");
@@ -28,8 +28,17 @@ describe("babel-tailwind", () => {
     return resolved;
   }
 
+  const minCSS = (text: string) =>
+    transformSync(text, { minify: true, loader: "css" }).code;
+
+  const findByExt = (outputFiles: OutputFile[], ext: string) =>
+    outputFiles.find(file => file.path.endsWith(ext))!;
+
   async function compileESBuild(options: TailwindPluginOptions, javascript: string) {
-    const tailwind = getTailwindPlugins(options);
+    const tailwind = getTailwindPlugins({
+      tailwindConfig: {},
+      ...options,
+    });
     const result = await build({
       bundle: true,
       write: false,
@@ -37,7 +46,7 @@ describe("babel-tailwind", () => {
       outdir: "dist",
       format: "esm",
       entryPoints: [await write("index.tsx", javascript)],
-      plugins: [babelPlugin({ getPlugins: () => [tailwind.babel] }), tailwind.esbuild],
+      plugins: [babelPlugin({ plugins: [tailwind.babel] }), tailwind.esbuild],
     });
 
     const { errors, warnings, outputFiles } = result;
@@ -49,10 +58,7 @@ describe("babel-tailwind", () => {
 
   it("supports ESBuild", async () => {
     const outputFiles = await compileESBuild(
-      {
-        tailwindConfig: {},
-        clsx: "emotion",
-      },
+      { clsx: "emotion" },
       /* tsx */ `
         export function Hello() {
           return (
@@ -65,33 +71,69 @@ describe("babel-tailwind", () => {
     );
     expect(outputFiles).toHaveLength(2);
 
-    const js = outputFiles.find(file => file.path.endsWith(".js"))!;
-    const css = outputFiles.find(file => file.path.endsWith(".css"))!;
+    const js = findByExt(outputFiles, ".js");
+    const css = findByExt(outputFiles, ".css");
 
     const clsName = getClassName("text-center");
     expect(js.text).toContain(`className: "${clsName}"`);
     expect(css.text).toMatch(`.${clsName} {\n  text-align: center;\n}`);
   });
 
-  const minCSS = (text: string) =>
-    transformSync(text, { minify: true, loader: "css" })!.code;
+  it("does not remove the attribute if `preserveAttribute` is true", async () => {
+    const outputFiles = await compileESBuild(
+      { clsx: "emotion", jsxAttributeAction: "preserve" },
+      /* tsx */ `
+        export function Hello() {
+          return (
+            <div css="text-center">
+              Hello, world!
+            </div>
+          );
+        }
+      `
+    );
+    expect(outputFiles).toHaveLength(2);
+
+    const js = findByExt(outputFiles, ".js");
+    expect(js.text).toContain(`css: "text-center"`);
+  });
+
+  it("supports custom jsxAttributeName", async () => {
+    const outputFiles = await compileESBuild(
+      { clsx: "emotion", jsxAttributeName: "tw" },
+      /* tsx */ `
+        export function Hello() {
+          return (
+            <div tw="text-center">
+              Hello, world!
+            </div>
+          );
+        }
+      `
+    );
+    expect(outputFiles).toHaveLength(2);
+
+    const js = findByExt(outputFiles, ".js");
+    const css = findByExt(outputFiles, ".css");
+
+    const clsName = getClassName("text-center");
+    expect(js.text).toContain(`className: "${clsName}"`);
+    expect(css.text).toMatch(`.${clsName} {\n  text-align: center;\n}`);
+  });
 
   it("supports importing tailwind/base", async () => {
     const postcss = createPostCSS({ tailwindConfig: {} });
     const base = (await postcss("@tailwind base;")).css;
     const outputFiles = await compileESBuild(
-      {
-        tailwindConfig: {},
-        clsx: "emotion",
-      },
+      { clsx: "emotion" },
       /* tsx */ `
         import "${name}/base";
       `
     );
     expect(outputFiles).toHaveLength(2);
 
-    const js = outputFiles.find(file => file.path.endsWith(".js"))!;
-    const css = outputFiles.find(file => file.path.endsWith(".css"))!;
+    const js = findByExt(outputFiles, ".js");
+    const css = findByExt(outputFiles, ".css");
 
     // expect(js.text).toContain(`import "./base.css";`);
     expect(js.text).toBe("");