aet/babel-tailwind
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Alex
2024-07-06 19:17:37 -04:00
parent a05b1222b5
commit 53ac883c18
14 changed files with 259 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/__tests__/__snapshots__/attr.test.ts.snap
View File

@ -1,8 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`attr > supports conditional expression in "css" attribute 1`] = `
"// src/.temp-attr/index.tsx
import { jsx } from "react/jsx-runtime";
"import { jsx } from "react/jsx-runtime";
function Hello({
isCenter
}) {
@ -10,37 +9,30 @@ function Hello({
}
export {
Hello
};
"
};"
`;
exports[`attr > supports conditional expression in "css" attribute 2`] = `
"/* babel-tailwind:/Users/aet/Documents/Git/babel-tailwind/src/.temp-attr/index.css */
.tw-gqn2k6 {
".tw-gqn2k6 {
text-align: center;
}
"
}"
`;
exports[`attr > supports grouped array css attribute 1`] = `
"// src/.temp-attr/index.tsx
import { jsx } from "react/jsx-runtime";
"import { jsx } from "react/jsx-runtime";
function Hello() {
return /* @__PURE__ */ jsx("div", { className: "tw-gqn2k6 tw-1qtvvjy", children: "Hello, world!" });
}
export {
Hello
};
"
};"
`;
exports[`attr > supports grouped array css attribute 2`] = `
"/* babel-tailwind:/Users/aet/Documents/Git/babel-tailwind/src/.temp-attr/index.css */
.tw-gqn2k6 {
".tw-gqn2k6 {
text-align: center;
}
.tw-1qtvvjy:hover {
font-weight: 600;
}
"
}"
`;

12
src/__tests__/__snapshots__/options.test.ts.snap
View File

@ -1,21 +1,17 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`options > supports custom jsxAttributeName 1`] = `
"// src/.temp-options/index.tsx
import { jsx } from "react/jsx-runtime";
"import { jsx } from "react/jsx-runtime";
function Hello() {
return /* @__PURE__ */ jsx("div", { className: "tw-gqn2k6", children: "Hello, world!" });
}
export {
Hello
};
"
};"
`;
exports[`options > supports custom jsxAttributeName 2`] = `
"/* babel-tailwind:/Users/aet/Documents/Git/babel-tailwind/src/.temp-options/index.css */
.tw-gqn2k6 {
".tw-gqn2k6 {
text-align: center;
}
"
}"
`;

45
src/__tests__/__snapshots__/spread.test.ts.snap
View File

@ -1,8 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`spread > supports spread attribute in "css" attribute (2) 1`] = `
"// src/.temp-spread/index.tsx
import { cx as _cx } from "@emotion/css";
"import { cx as _cx } from "@emotion/css";
import * as _tslib from "tslib";
import { jsx } from "react/jsx-runtime";
function Hello(props) {
@ -14,21 +13,17 @@ function Hello(props) {
}
export {
Hello
};
"
};"
`;
exports[`spread > supports spread attribute in "css" attribute (2) 2`] = `
"/* babel-tailwind:/Users/aet/Documents/Git/babel-tailwind/src/.temp-spread/index.css */
.tw-gqn2k6 {
".tw-gqn2k6 {
text-align: center;
}
"
}"
`;
exports[`spread > supports spread attribute in "css" attribute 1`] = `
"// src/.temp-spread/index.tsx
import { cx as _cx } from "@emotion/css";
"import { cx as _cx } from "@emotion/css";
import { jsx } from "react/jsx-runtime";
function Hello({
className: _className,
@ -38,14 +33,32 @@ function Hello({
}
export {
Hello
};
"
};"
`;
exports[`spread > supports spread attribute in "css" attribute 2`] = `
"/* babel-tailwind:/Users/aet/Documents/Git/babel-tailwind/src/.temp-spread/index.css */
.tw-gqn2k6 {
".tw-gqn2k6 {
text-align: center;
}
"
}"
`;
exports[`spread > supports spread attribute in "css" attribute with an object pattern 1`] = `
"import { cx as _cx } from "@emotion/css";
import { jsx } from "react/jsx-runtime";
function Hello({
className: _className,
style,
...props
}) {
return /* @__PURE__ */ jsx("div", { ...props, className: _cx("tw-gqn2k6", _className), children: "Hello, world!" });
}
export {
Hello
};"
`;
exports[`spread > supports spread attribute in "css" attribute with an object pattern 2`] = `
".tw-gqn2k6 {
text-align: center;
}"
`;

4
src/__tests__/__snapshots__/styleObject.test.ts.snap
View File

@ -44,13 +44,11 @@ var tw_kt12th = {
}
};
// src/.temp-styleObject/index.tsx
import { jsx } from "react/jsx-runtime";
function Hello() {
return /* @__PURE__ */ jsx("div", { style: tw_kt12th, children: "Hello, world!" });
}
export {
Hello
};
"
};"
`;

41
src/__tests__/__snapshots__/tw.test.ts.snap Normal file
View File

@ -0,0 +1,41 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`babel-tailwind > passes through \`group\` className 1`] = `
"var index_default = "tw-qcda3o group";
export {
index_default as default
};"
`;
exports[`babel-tailwind > passes through \`group\` className 2`] = `
".tw-qcda3o:hover {
text-align: center;
}"
`;
exports[`babel-tailwind > supports grouped tw 1`] = `
"var index_default = "tw-4cbsua";
export {
index_default as default
};"
`;
exports[`babel-tailwind > supports grouped tw 2`] = `
".tw-4cbsua {
display: flex;
font-size: 0.875rem;
line-height: 1.25rem;
}
.group:hover .tw-4cbsua {
text-align: center;
}
.tw-4cbsua[data-nested=true] {
border-width: 1px;
}
.tw-4cbsua[data-name=hello] {
text-align: right;
}
.tw-4cbsua > div {
font-weight: 600;
}"
`;

8
src/__tests__/attr.test.ts
View File

@ -1,5 +1,5 @@
import { describe, expect, it } from "vitest";
import { getBuild } from "./utils";
import { getBuild, matchSnapshot } from "./utils";
describe("attr", () => {
const compileESBuild = getBuild("attr");
@ -19,8 +19,7 @@ describe("attr", () => {
`,
});
expect(files.js.text).toMatchSnapshot();
expect(files.css.text).toMatchSnapshot();
matchSnapshot(files);
});
it('supports conditional expression in "css" attribute', async () => {
@ -38,7 +37,6 @@ describe("attr", () => {
`,
});
expect(files.js.text).toMatchSnapshot();
expect(files.css.text).toMatchSnapshot();
matchSnapshot(files);
});
});

6
src/__tests__/options.test.ts
View File

@ -1,5 +1,5 @@
import { describe, expect, it } from "vitest";
import { getBuild } from "./utils";
import { getBuild, matchSnapshot } from "./utils";
describe("options", () => {
const compileESBuild = getBuild("options");
@ -18,9 +18,7 @@ describe("options", () => {
}
`,
});
expect(files.js.text).toMatchSnapshot();
expect(files.css.text).toMatchSnapshot();
matchSnapshot(files);
});
it("does not remove the attribute if `preserveAttribute` is true", async () => {

28
src/__tests__/spread.test.ts
View File

@ -1,6 +1,6 @@
/* eslint-disable unicorn/string-content */
import { describe, expect, it } from "vitest";
import { getBuild } from "./utils";
import { describe, it } from "vitest";
import { getBuild, matchSnapshot } from "./utils";
describe("spread", () => {
const compileESBuild = getBuild("spread");
@ -20,8 +20,25 @@ describe("spread", () => {
`,
});
expect(files.js.text).toMatchSnapshot();
expect(files.css.text).toMatchSnapshot();
matchSnapshot(files);
});
it('supports spread attribute in "css" attribute with an object pattern', async () => {
const { files } = await compileESBuild({
clsx: "emotion",
expectFiles: 2,
javascript: /* tsx */ `
export function Hello({ style, ...props }) {
return (
<div css="text-center" {...props}>
Hello, world!
</div>
);
}
`,
});
matchSnapshot(files);
});
it('supports spread attribute in "css" attribute (2)', async () => {
@ -40,7 +57,6 @@ describe("spread", () => {
`,
});
expect(files.js.text).toMatchSnapshot();
expect(files.css.text).toMatchSnapshot();
matchSnapshot(files);
});
});

8
src/__tests__/styleObject.test.ts
View File

@ -1,5 +1,5 @@
import { describe, expect, it } from "vitest";
import { getBuild } from "./utils";
import { describe, it } from "vitest";
import { getBuild, matchSnapshot } from "./utils";
describe("babel-tailwind", () => {
const compileESBuild = getBuild("styleObject");
@ -21,7 +21,7 @@ describe("babel-tailwind", () => {
`,
});
expect(files.js.text).toMatchSnapshot();
matchSnapshot(files, true);
});
it("supports .hover, .focus, .active, .group-hover, .group-focus, .group-active", async () => {
@ -40,6 +40,6 @@ describe("babel-tailwind", () => {
`,
});
expect(files.js.text).toMatchSnapshot();
matchSnapshot(files, true);
});
});

37
src/__tests__/tw.test.ts
View File

@ -1,6 +1,5 @@
import { describe, expect, it } from "vitest";
import { getClassName } from "../index";
import { getBuild } from "./utils";
import { describe, it } from "vitest";
import { getBuild, matchSnapshot } from "./utils";
describe("babel-tailwind", () => {
const compileESBuild = getBuild("tw");
@ -25,31 +24,7 @@ describe("babel-tailwind", () => {
`,
});
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")
);
matchSnapshot(files);
});
it("passes through `group` className", async () => {
@ -63,10 +38,6 @@ describe("babel-tailwind", () => {
`,
});
const clsName = getClassName("group hover:text-center");
expect(files.js.text).toContain(`"${clsName} group"`);
expect(files.css.text).toMatch(
[`.${clsName}:hover {`, " text-align: center;", "}"].join("\n")
);
matchSnapshot(files);
});
});

18
src/__tests__/utils.ts
View File

@ -1,5 +1,5 @@
import { promises as fs } from "node:fs";
import { resolve } from "node:path";
import { join, resolve } from "node:path";
import { afterEach, beforeEach, expect } from "vitest";
import * as esbuild from "esbuild";
import dedent from "dedent";
@ -17,9 +17,9 @@ export function getBuild(name: string) {
const folder = resolve(import.meta.dirname, "..", ".temp-" + name);
async function write(path: string, content: string) {
const resolved = resolve(folder, path);
const resolved = join(folder, path);
await fs.writeFile(resolved, content);
return resolved;
return `./src/.temp-${name}/${path}`;
}
beforeEach(async () => {
@ -65,9 +65,19 @@ export function getBuild(name: string) {
return {
outputFiles: outputFiles!,
files: new Proxy({} as Record<string, esbuild.OutputFile>, {
files: new Proxy({} as Files, {
get: (_, ext: string) => findByExt(outputFiles!, ext),
}),
};
};
}
type Files = Record<string, esbuild.OutputFile>;
export function matchSnapshot(files: Files, noCSS = false) {
expect(files.js.text.replace(/\/\/ src.+\n/g, "").trim()).toMatchSnapshot();
if (!noCSS) {
expect(
files.css.text.replace(/\/\* babel-tailwind:[^*]+\*\/\n/g, "").trim()
).toMatchSnapshot();
}
}