composeRenderProps

src/index.ts

@@ -1,7 +1,9 @@
+import { createRequire } from "node:module";
+
 import hash from "@emotion/hash";
+import type { BabelOptions, Options as ReactOptions } from "@vitejs/plugin-react";
 import { transformSync } from "esbuild";
 import { memoize, without } from "lodash-es";
-import type postcss from "postcss";
 import type { Config } from "tailwindcss";
 import type { SetRequired } from "type-fest";
 
@@ -21,6 +23,8 @@ export type BuildStyleFile = (
   path: string
 ) => Promise<readonly ["css" | "local-css", string] | readonly ["js", string]>;
 
+const require = createRequire(import.meta.url);
+
 export interface TailwindPluginOptions {
   /**
    * Tailwind CSS configuration
@@ -37,11 +41,6 @@ export interface TailwindPluginOptions {
    */
   prefix?: string;
 
-  /**
-   * Additional PostCSS plugins (optional)
-   */
-  postCSSPlugins?: postcss.AcceptedPlugin[];
-
   /**
    * Attribute to use for tailwind classes in JSX
    * @default "css"
@@ -65,6 +64,11 @@ export interface TailwindPluginOptions {
    */
   clsx: "clsx" | "classnames" | "emotion";
 
+  /**
+   * Use react-aria-component’s `composeRenderProps` function.
+   */
+  composeRenderProps?: boolean;
+
   /**
    * @internal
    */
@@ -101,12 +105,7 @@ export interface TailwindPluginOptions {
 
 export type ResolveTailwindOptions = SetRequired<
   TailwindPluginOptions,
-  | "clsx"
-  | "jsxAttributeAction"
-  | "jsxAttributeName"
-  | "postCSSPlugins"
-  | "styleMap"
-  | "tailwindConfig"
+  "clsx" | "jsxAttributeAction" | "jsxAttributeName" | "styleMap" | "tailwindConfig"
 >;
 
 /**
@@ -137,7 +136,6 @@ export function getTailwindPlugins(options: TailwindPluginOptions) {
     getClassName,
     jsxAttributeAction: "delete",
     jsxAttributeName: "css",
-    postCSSPlugins: [],
     styleMap: new Map(),
     tailwindConfig: {},
     ...options,
@@ -178,15 +176,40 @@ export function getTailwindPlugins(options: TailwindPluginOptions) {
     }
   };
 
+  const babel = (onCollect?: ClassNameCollector) =>
+    babelTailwind(resolvedOptions, onCollect);
+
+  const patchBabelOptions = (options: BabelOptions) => {
+    (options.plugins ??= []).push(babel());
+  };
+
   return {
     compile,
     babel: (onCollect?: ClassNameCollector) => babelTailwind(resolvedOptions, onCollect),
     esbuild: () => esbuildPlugin({ styleMap, compile, buildStyleFile }),
-    /** Requires `options.vite` to be `true`. */
     vite: () => {
       resolvedOptions.vite = true;
       return vitePlugin({ styleMap, compile, buildStyleFile });
     },
+    react(options: ReactOptions = {}) {
+      const reactModule = require("@vitejs/plugin-react");
+      const reactPlugin: typeof import("@vitejs/plugin-react").default =
+        "default" in reactModule ? reactModule.default : reactModule;
+
+      options.babel ??= {};
+      if (typeof options.babel === "function") {
+        const fn = options.babel;
+        options.babel = (id, options) => {
+          const result = fn(id, options);
+          patchBabelOptions(result);
+          return result;
+        };
+      } else {
+        patchBabelOptions(options.babel);
+      }
+
+      return reactPlugin(options);
+    },
     styleMap,
     options,
     getCompiler,