Add style object support
This commit is contained in:
51
src/__tests__/tw.test.ts
Normal file
51
src/__tests__/tw.test.ts
Normal file
@ -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")
|
||||
);
|
||||
});
|
||||
});
|
Reference in New Issue
Block a user