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
2025-06-13 01:08:36 -04:00
parent bd683df539
commit 1d0a8a1c36
11 changed files with 1347 additions and 1285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/__tests__/__snapshots__/group.test.ts.snap Normal file
View File

@ -0,0 +1,33 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`group > supports group 1`] = `
"import { jsx, jsxs } from "react/jsx-runtime";
function Hello() {
return /* @__PURE__ */ jsx("li", { className: "tw-1d1woxu", children: /* @__PURE__ */ jsxs("a", { href: "tel:{person.phone}", className: "tw-gbesv1", children: [
/* @__PURE__ */ jsx("span", { className: "tw-1psr9tm", children: "Call" }),
/* @__PURE__ */ jsx("svg", { className: "tw-f3p2y0" })
] }) });
}
export {
Hello
};"
`;
exports[`group > supports group 2`] = `
".tw-gbesv1 {
visibility: hidden;
}
.group\\/item:hover .tw-gbesv1 {
visibility: visible;
}
.group\\/edit:hover .tw-1psr9tm {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.group\\/edit:hover .tw-f3p2y0 {
--tw-translate-x: 0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}"
`;

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

@ -1,8 +1,8 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`spread > supports spread attribute in "css" attribute (2) 1`] = `
"import { cx as _cx } from "@emotion/css";
import * as _tslib from "tslib";
"import * as _tslib from "tslib";
import { cx as _cx } from "@emotion/css";
import { jsx } from "react/jsx-runtime";
function Hello(props) {
props = {

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

@ -61,115 +61,4 @@ describe("attr", () => {
matchSnapshot(files);
});
it("fails", async () => {
const { files } = await compileESBuild({
clsx: "emotion",
expectFiles: 2,
javascript: /* tsx */ `
type Type = "dependencies" | "devDependencies" | "peerDependencies"
const Version = classed("span", tw\`text-[var(--color-fg-muted)]\`)
function TreeItem({
name,
version,
type,
}: {
name: string
version: string
type: Type
}) {
const [open, toggle] = useToggle(false)
const query = useQuery({
...getRegistryPackageInfo(name),
enabled: open,
})
const versions = query.data ? Object.keys(query.data.versions) : undefined
const matchingVersion = versions
? semverMaxSatisfying(versions, version)
: undefined
const currentVersion =
matchingVersion != null ? query.data?.versions[matchingVersion] : undefined
const data = currentVersion
? Object.entries(currentVersion[type] ?? {})
: undefined
const isDeprecated = true
const hasNoDeps = data?.length === 0
const Icon = hasNoDeps ? SmallMinus : open ? ChevronDown : ChevronRight
return (
<li data-loading={query.isLoading}>
<div css="flex items-center gap-1 ps-0">
<span css="leading-3">
<Icon
className={Classes.TREE_NODE_CARET}
css={["min-w-0 p-0", hasNoDeps && "cursor-default"]}
onClick={hasNoDeps ? undefined : toggle}
/>
</span>
<Link href={\`/package/\${name}\`}>{name}</Link>
<span
css={[
"text-[var(--color-fg-muted)]",
isDeprecated && "italic line-through opacity-80",
]}
>
{version}
</span>
</div>
{!open || hasNoDeps ? null : query.error ? (
<div css="mb-2 ml-4 mt-1 max-w-96">
<Callout compact intent={Intent.DANGER} css="rounded-md">
{(query.error as Error).message}
</Callout>
</div>
) : data ? (
<ul className={Classes.LIST} css="ml-0 list-none">
{data.map(([dep, version]) => (
<TreeItem key={dep} name={dep} version={version} type={type} />
))}
</ul>
) : (
<div className={Classes.SKELETON} css="mb-2 ml-5 mt-1 h-4 w-40" />
)}
</li>
)
}
export function DepList({
title,
deps,
type,
}: {
title: string
deps: Record<string, string>
count?: number
type: Type
}) {
const entries = Object.entries(deps)
return (
<div className="wmde-markdown-var">
<H4>
{title} ({entries.length})
</H4>
<ul className={Classes.LIST} css="list-none p-0">
{entries.map(([dep, version]) => (
<TreeItem key={dep} name={dep} version={version} type={type} />
))}
</ul>
</div>
)
}
`,
});
files;
});
});

26
src/__tests__/group.test.ts Normal file
View File

@ -0,0 +1,26 @@
import { describe, it } from "vitest";
import { getBuild, matchSnapshot } from "./utils";
describe("group", () => {
const compileESBuild = getBuild("group");
it("supports group", async () => {
const { files } = await compileESBuild({
clsx: "emotion",
// expectFiles: 2,
javascript: /* tsx */ `
export function Hello() {
return (
<li css="group/item">
<a css="group/edit invisible group-hover/item:visible" href="tel:{person.phone}">
<span css="group-hover/edit:text-gray-700">Call</span>
<svg css="group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500"></svg>
</a>
</li>
);
}
`,
});
matchSnapshot(files);
});
});

8
src/__tests__/utils.ts
View File

@ -1,6 +1,7 @@
import { promises as fs } from "node:fs";
import { join, resolve } from "node:path";
import type { PluginItem } from "@babel/core";
import dedent from "dedent";
import * as esbuild from "esbuild";
import { afterEach, beforeEach, expect } from "vitest";
@ -35,12 +36,14 @@ export function getBuild(name: string) {
return async function compileESBuild({
javascript,
esbuild: esbuildOptions,
babelPlugins,
expectFiles,
...options
}: Omit<TailwindPluginOptions, "compile"> & {
esbuild?: esbuild.BuildOptions;
javascript: string;
expectFiles?: number;
babelPlugins?: PluginItem[];
}) {
const tailwind = getTailwindPlugins({
tailwindConfig: {},
@ -61,7 +64,10 @@ export function getBuild(name: string) {
outdir: "dist",
format: "esm",
entryPoints: [await write("index.tsx", dedent(javascript))],
plugins: [babelPlugin({ plugins: [tailwind.babel()] }), tailwind.esbuild()],
plugins: [
babelPlugin({ plugins: [tailwind.babel(), ...(babelPlugins ?? [])] }),
tailwind.esbuild(),
],
...esbuildOptions,
});