Support grouped tw

This commit is contained in:
Alex
2024-06-29 10:47:23 -04:00
parent 2a6df0dd4a
commit eaa888e920
7 changed files with 88 additions and 53 deletions

View File

@ -159,6 +159,25 @@ describe("babel-tailwind", () => {
expect(files.css.text).toMatch(`.${clsName} {\n text-align: center;\n}`);
});
it("supports grouped tw", async () => {
const { files } = await compileESBuild({
clsx: "emotion",
expectFiles: 2,
javascript: /* tsx */ `
export default tw({
"group-hover": "text-center",
"[&>div]": "font-semibold",
})
`,
});
const clsName = getClassName("group-hover:text-center [&>div]:font-semibold");
expect(files.js.text).toContain(`= "${clsName}"`);
expect(files.css.text).toMatch(
`.group:hover .${clsName} {\n text-align: center;\n}\n.${clsName} > div {\n font-weight: 600;\n}`
);
});
it("supports importing tailwind/base", async () => {
const postcss = createPostCSS({
tailwindConfig: {},
@ -202,6 +221,7 @@ async function compileESBuild({
}) {
const tailwind = getTailwindPlugins({
tailwindConfig: {},
macroFunction: "tw",
...options,
});
const result = await esbuild.build({