Add extra processing options

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aet/babel-tailwind",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.5",
   "main": "dist/index.js",
   "license": "MIT",
   "private": true,
@@ -12,7 +12,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@aet/eslint-rules": "^0.0.19",
+    "@aet/eslint-rules": "^0.0.21",
     "@types/babel__core": "^7.20.5",
     "@types/bun": "^1.0.12",
     "@types/lodash": "^4.17.0",

src/esbuild-babel.ts

@@ -0,0 +1,51 @@
+import { readFileSync } from "node:fs";
+import { extname } from "node:path";
+import { once } from "lodash";
+import type babel from "@babel/core";
+import type * as esbuild from "esbuild";
+import { transformSync } from "@babel/core";
+
+/**
+ * An esbuild plugin that processes files with Babel if `getPlugins` returns any plugins.
+ */
+export const babelPlugin = ({
+  filter = /\.[jt]sx?$/,
+  plugins: getPlugins,
+}: {
+  filter?: RegExp;
+  plugins:
+    | babel.PluginItem[]
+    | ((file: { path: string; contents: string }) => babel.PluginItem[]);
+}): esbuild.Plugin => ({
+  name: "babel-plugin",
+  setup(build) {
+    build.onLoad({ filter }, ({ path }) => {
+      const load = once(() => readFileSync(path, "utf-8"));
+      const plugins = Array.isArray(getPlugins)
+        ? getPlugins
+        : getPlugins({
+            path,
+            get contents() {
+              return load();
+            },
+          });
+
+      if (!plugins.length) {
+        return;
+      }
+
+      const { code } = transformSync(load(), {
+        parserOpts: {
+          plugins: ["jsx", "decorators", "typescript", "importAttributes"],
+        },
+        filename: path,
+        plugins,
+      })!;
+
+      return {
+        contents: code!,
+        loader: extname(path).slice(1) as "js" | "ts",
+      };
+    });
+  },
+});

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(
-      {
+      { clsx: "emotion" },
-        tailwindConfig: {},
-        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 js = findByExt(outputFiles, ".js");
-    const css = outputFiles.find(file => file.path.endsWith(".css"))!;
+    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) =>
+  it("does not remove the attribute if `preserveAttribute` is true", async () => {
-    transformSync(text, { minify: true, loader: "css" })!.code;
+    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(
-      {
+      { clsx: "emotion" },
-        tailwindConfig: {},
-        clsx: "emotion",
-      },
       /* tsx */ `
         import "${name}/base";
       `
     );
     expect(outputFiles).toHaveLength(2);
 
-    const js = outputFiles.find(file => file.path.endsWith(".js"))!;
+    const js = findByExt(outputFiles, ".js");
-    const css = outputFiles.find(file => file.path.endsWith(".css"))!;
+    const css = findByExt(outputFiles, ".css");
 
     // expect(js.text).toContain(`import "./base.css";`);
     expect(js.text).toBe("");

src/index.ts

@@ -1,14 +1,14 @@
-import { readFileSync } from "node:fs";
 import { basename, dirname, extname, join } from "node:path";
-import { once } from "lodash";
 import hash from "@emotion/hash";
 import type babel from "@babel/core";
 import type * as vite from "vite";
 import type * as esbuild from "esbuild";
-import { type NodePath, type types as t, transformSync } from "@babel/core";
+import { type NodePath, type types as t } from "@babel/core";
 import tailwind, { type Config } from "tailwindcss";
 import postcss from "postcss";
 
+export { babelPlugin } from "./esbuild-babel";
+
 const PLUGIN_NAME = "tailwind";
 const ESBUILD_NAMESPACE = "babel-tailwind";
 const ROLLUP_PREFIX = "\0tailwind:";
@@ -50,7 +50,7 @@ export interface TailwindPluginOptions {
   /**
    * Tailwind CSS configuration
    */
-  tailwindConfig: Omit<Config, "content">;
+  tailwindConfig?: Omit<Config, "content">;
 
   /**
    * Directives to prefix to all Tailwind stylesheets
@@ -68,6 +68,12 @@ export interface TailwindPluginOptions {
    */
   jsxAttributeName?: string;
 
+  /**
+   * What to do with the original attribute after processing
+   * @default "delete"
+   */
+  jsxAttributeAction?: "delete" | "preserve" | ["rename", string];
+
   /**
    * Tagged template macro function to use for Tailwind classes
    * @default "tw"
@@ -108,6 +114,7 @@ function babelTailwind(
     clsx,
     getClassName: getClass = getClassName,
     taggedTemplateName,
+    jsxAttributeAction = "delete",
     jsxAttributeName = "css",
   }: TailwindPluginOptions
 ) {
@@ -190,8 +197,13 @@ function babelTailwind(
 
     JSXAttribute(path, { tailwindMap, getCx }) {
       const { name } = path.node;
+      if (name.name !== jsxAttributeName) return;
+
       const valuePath = path.get("value");
-      if (name.name !== jsxAttributeName || !valuePath.node) return;
+      if (!valuePath.node) return;
+
+      const copy =
+        jsxAttributeAction === "delete" ? undefined : t.cloneNode(valuePath.node, true);
 
       const parent = path.parent as t.JSXOpeningElement;
       const classNameAttribute = parent.attributes.find(
@@ -246,56 +258,19 @@ function babelTailwind(
           t.jsxAttribute(t.jsxIdentifier("className"), valuePath.node)
         );
       }
+
+      if (jsxAttributeAction === "delete") {
         path.remove();
+      } else {
+        path.node.value = copy!;
+        if (Array.isArray(jsxAttributeAction) && jsxAttributeAction[0] === "rename") {
+          path.node.name.name = jsxAttributeAction[1];
+        }
+      }
     },
   }));
 }
 
-/**
- * An esbuild plugin that processes files with Babel if `getPlugins` returns any plugins.
- */
-export const babelPlugin = ({
-  filter = /\.[jt]sx?$/,
-  plugins: getPlugins,
-}: {
-  filter?: RegExp;
-  plugins:
-    | babel.PluginItem[]
-    | ((file: { path: string; contents: string }) => babel.PluginItem[]);
-}): esbuild.Plugin => ({
-  name: "babel-plugin",
-  setup(build) {
-    build.onLoad({ filter }, ({ path }) => {
-      const load = once(() => readFileSync(path, "utf-8"));
-      const plugins = Array.isArray(getPlugins)
-        ? getPlugins
-        : getPlugins({
-            path,
-            get contents() {
-              return load();
-            },
-          });
-
-      if (!plugins.length) {
-        return;
-      }
-
-      const { code } = transformSync(load(), {
-        parserOpts: {
-          plugins: ["jsx", "decorators", "typescript", "importAttributes"],
-        },
-        filename: path,
-        plugins,
-      })!;
-
-      return {
-        contents: code!,
-        loader: extname(path).slice(1) as "js" | "ts",
-      };
-    });
-  },
-});
-
 type Compile = ReturnType<typeof createPostCSS>;
 
 /** @internal */