Initial commit

src/index.test.ts

@@ -0,0 +1,73 @@
+import { promises as fs } from "node:fs";
+import { resolve } from "node:path";
+import { build } from "esbuild";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  type TailwindPluginOptions,
+  babelPlugin,
+  getClassName,
+  getTailwindPlugins,
+} from "./index";
+
+const folder = resolve(import.meta.dirname, "temp");
+
+describe("babel-tailwind", () => {
+  beforeEach(async () => {
+    await fs.mkdir(folder, { recursive: true });
+  });
+
+  afterEach(async () => {
+    await fs.rm(folder, { recursive: true, force: true });
+  });
+
+  async function write(path: string, content: string) {
+    const resolved = resolve(folder, path);
+    await fs.writeFile(resolved, content);
+    return resolved;
+  }
+
+  async function compile(options: TailwindPluginOptions, javascript: string) {
+    const tailwind = getTailwindPlugins(options);
+    const result = await build({
+      bundle: true,
+      write: false,
+      external: ["react/jsx-runtime"],
+      outdir: "dist",
+      format: "esm",
+      entryPoints: [await write("index.tsx", javascript)],
+      plugins: [babelPlugin({ getPlugins: () => [tailwind.babel] }), tailwind.esbuild],
+    });
+
+    const { errors, warnings, outputFiles } = result;
+    expect(errors).toHaveLength(0);
+    expect(warnings).toHaveLength(0);
+
+    return outputFiles;
+  }
+
+  it("renders", async () => {
+    const outputFiles = await compile(
+      {
+        tailwindConfig: {},
+        clsx: "emotion",
+      },
+      /* tsx */ `
+        export function Hello() {
+          return (
+            <div css="text-center">
+              Hello, world!
+            </div>
+          );
+        }
+      `
+    );
+    expect(outputFiles).toHaveLength(2);
+
+    const js = outputFiles.find(file => file.path.endsWith(".js"))!;
+    const css = outputFiles.find(file => file.path.endsWith(".css"))!;
+
+    const clsName = getClassName("text-center");
+    expect(js.text).toContain(`className: "${clsName}"`);
+    expect(css.text).toMatch(`.${clsName} {\n  text-align: center;\n}`);
+  });
+});