composeRenderProps

src/__tests__/base.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { createPostCSS } from "../index";
+import { createPostCSS, getClassName } from "../index";
 
 import { getBuild, minCSS, name } from "./utils";
 
@@ -10,7 +10,6 @@ describe("babel-tailwind", () => {
   it("supports importing tailwind/base", async () => {
     const postcss = createPostCSS({
       tailwindConfig: {},
-      postCSSPlugins: [],
     });
     const base = await postcss("@tailwind base;");
     const { files } = await compileESBuild({
@@ -24,4 +23,23 @@ describe("babel-tailwind", () => {
     expect(files.js.text).toBe("");
     expect(minCSS(files.css.text)).toContain(minCSS(base));
   });
+
+  it("supports composeRenderProps", async () => {
+    const { files } = await compileESBuild({
+      clsx: "clsx",
+      expectFiles: 2,
+      javascript: /* tsx */ `
+        export function Hello() {
+          return (
+            <div css="text-center">
+              Hello, world!
+            </div>
+          );
+        }
+      `,
+    });
+
+    const clsName = getClassName("text-center");
+    expect(files.js.text).toContain(`{ className: "${clsName}",`);
+  });
 });

src/__tests__/merge.test.ts

@@ -50,6 +50,31 @@ describe("merges with existing className attribute", () => {
     expect(files.css.text).toMatch(`.${clsName} {\n  text-align: center;\n}`);
   });
 
+  it("supports composeRenderProps", async () => {
+    const { files } = await compileESBuild({
+      clsx: "clsx",
+      expectFiles: 2,
+      composeRenderProps: true,
+      javascript: /* tsx */ `
+        export function Hello(props) {
+          return (
+            <div {...props} css="text-center">
+              Hello, world!
+            </div>
+          );
+        }
+      `,
+    });
+
+    const clsName = getClassName("text-center");
+    expect(files.js.text).toContain(
+      `import { composeRenderProps as _composeRenderProps } from "react-aria-component";`
+    );
+    expect(files.js.text).toContain(
+      `...props, className: _composeRenderProps(_className, (n) => _cx("${clsName}", n)),`
+    );
+  });
+
   it("reuses clsx in scope", async () => {
     const { files } = await compileESBuild({
       clsx: "clsx",

src/__tests__/utils.ts

@@ -52,6 +52,7 @@ export function getBuild(name: string) {
       external: [
         "react",
         "react/jsx-runtime",
+        "react-aria-component",
         "@emotion/css",
         "clsx",
         "tslib",