Add style object support

src/__tests__/tw.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { getClassName } from "../index";
+import { getBuild } from "./utils";
+
+describe("babel-tailwind", () => {
+  const compileESBuild = getBuild("tw");
+  it("supports grouped tw", async () => {
+    const { files } = await compileESBuild({
+      clsx: "emotion",
+      expectFiles: 2,
+      javascript: `
+      export default tw("text-sm", \`flex\`, {
+        "group-hover": "text-center",
+        "[&>div]": \`font-semibold\`,
+        data: {
+          "name='hello'": "text-right",
+          nested: {
+            true: "border",
+          }
+        },
+      })
+    `,
+    });
+
+    const clsName = getClassName(
+      "text-sm flex group-hover:text-center [&>div]:font-semibold data-[name='hello']:text-right data-[nested=true]:border"
+    );
+    expect(files.js.text).toContain(`= "${clsName}"`);
+    expect(files.css.text).toMatch(
+      [
+        `.${clsName} {`,
+        "  display: flex;",
+        "  font-size: 0.875rem;",
+        "  line-height: 1.25rem;",
+        "}",
+        `.group:hover .${clsName} {`,
+        "  text-align: center;",
+        "}",
+        `.${clsName}[data-nested=true] {`,
+        "  border-width: 1px;",
+        "}",
+        `.${clsName}[data-name=hello] {`,
+        "  text-align: right;",
+        "}",
+        `.${clsName} > div {`,
+        "  font-weight: 600;",
+        "}",
+      ].join("\n")
+    );
+  });
+});