import { describe, it } from "vitest";

import { getBuild, matchSnapshot } from "./utils";

describe("babel-tailwind", () => {
  const compileESBuild = getBuild("tw");

  it("supports grouped tw", async () => {
    const { files } = await compileESBuild({
      clsx: "emotion",
      expectFiles: 2,
      javascript: `
      import { tw } from "@aet/tailwind/macro";

      export default tw("text-sm", \`flex\`, {
        "group-hover": "text-center",
        "[&>div]": \`font-semibold\`,
        data: {
          "name='hello'": "text-right",
          nested: {
            true: "border",
          }
        },
      })
    `,
    });

    matchSnapshot(files);
  });

  it("passes through `group` className", async () => {
    const { files } = await compileESBuild({
      clsx: "emotion",
      expectFiles: 2,
      javascript: `
      import { tw } from "@aet/tailwind/macro";

      export default tw\`group hover:text-center\`;
    `,
    });

    matchSnapshot(files);
  });

  it("supports styled components usage", async () => {
    const { files } = await compileESBuild({
      clsx: "emotion",
      expectFiles: 2,
      javascript: `
        import {tw} from "@aet/tailwind/macro";

        const Div = tw.div\`
          text-center
        \`;
      `,
    });

    matchSnapshot(files);
  });
});