, node: ChildNode) {
+ switch (node.type) {
+ case "atrule":
+ const obj = (collect[`@${node.name} ${node.params}`] ??= {});
+ node.each(child => {
+ walk(obj, child);
+ });
+ break;
+
+ case "decl":
+ const propName = node.prop.replace(/(-.)/g, v => v[1].toUpperCase());
+ collect[propName] = simplifyValue(propName, node.value);
+ break;
+
+ case "rule":
+ node.each(declaration => {
+ walk(collect, declaration);
+ });
+ break;
+
+ case "comment":
+ break;
+ }
+ }
+
+ walk(result, node);
+
+ return result as React.CSSProperties;
+}
diff --git a/src/esbuild-babel.ts b/src/esbuild-babel.ts
index 9711da0..ac5ff34 100644
--- a/src/esbuild-babel.ts
+++ b/src/esbuild-babel.ts
@@ -19,7 +19,7 @@ export const babelPlugin = ({
}): esbuild.Plugin => ({
name: "babel-plugin",
setup(build) {
- build.onLoad({ filter }, ({ path }) => {
+ build.onLoad({ filter, namespace: "file" }, ({ path }) => {
const load = once(() => readFileSync(path, "utf-8"));
const plugins = Array.isArray(getPlugins)
? getPlugins
diff --git a/src/esbuild-postcss.ts b/src/esbuild-postcss.ts
index 96ed10d..a57e1fd 100644
--- a/src/esbuild-postcss.ts
+++ b/src/esbuild-postcss.ts
@@ -1,16 +1,25 @@
import { dirname, join } from "node:path";
import type * as esbuild from "esbuild";
import { CssSyntaxError } from "postcss";
-import { type Compile, type StyleMap, pkgName, toCSSText } from "./shared";
+import { type Compile, type StyleMap, pkgName } from "./shared";
+import type { BuildStyleFile } from "./index";
const PLUGIN_NAME = "tailwind";
const ESBUILD_NAMESPACE = "babel-tailwind";
-export const esbuildPlugin = (styleMap: StyleMap, compile: Compile): esbuild.Plugin => ({
+export const esbuildPlugin = ({
+ styleMap,
+ compile,
+ buildStyleFile,
+}: {
+ styleMap: StyleMap;
+ compile: Compile;
+ buildStyleFile: BuildStyleFile;
+}): esbuild.Plugin => ({
name: PLUGIN_NAME,
setup(build) {
- build.onResolve({ filter: /^tailwind:.+\.css$/ }, ({ path, importer }) => {
+ build.onResolve({ filter: /^tailwind:.+\.\w+$/ }, ({ path, importer }) => {
const resolved = join(dirname(importer), path.replace(/^tailwind:/, ""));
if (styleMap.has(resolved)) {
return {
@@ -38,11 +47,8 @@ export const esbuildPlugin = (styleMap: StyleMap, compile: Compile): esbuild.Plu
const styles = styleMap.get(path)!;
try {
- const result = await compile(toCSSText(styles));
- return {
- contents: result,
- loader: "css",
- };
+ const [loader, contents] = await buildStyleFile(path);
+ return { contents, loader };
} catch (e) {
if (e instanceof CssSyntaxError) {
const lines = e.source!.split("\n");
diff --git a/src/index.test.ts b/src/index.test.ts
index da1f0ac..cccf6e1 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -1,28 +1,10 @@
/* eslint-disable unicorn/string-content */
-import { promises as fs } from "node:fs";
-import { resolve } from "node:path";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import * as esbuild from "esbuild";
-import dedent from "dedent";
-import { name } from "../package.json" with { type: "json" };
-import {
- type TailwindPluginOptions,
- babelPlugin,
- createPostCSS,
- getClassName,
- getTailwindPlugins,
-} from "./index";
-
-const folder = resolve(import.meta.dirname, "temp");
+import { describe, expect, it } from "vitest";
+import { getClassName } from "./index";
+import { getBuild } from "./__tests__/utils";
describe("babel-tailwind", () => {
- beforeEach(async () => {
- await fs.mkdir(folder, { recursive: true });
- });
-
- afterEach(async () => {
- await fs.rm(folder, { recursive: true, force: true });
- });
+ const compileESBuild = getBuild("main");
it("supports ESBuild", async () => {
const { files } = await compileESBuild({
@@ -69,13 +51,13 @@ describe("babel-tailwind", () => {
clsx: "emotion",
expectFiles: 2,
javascript: /* tsx */ `
- export function Hello() {
- return (
-
- Hello, world!
-
- );
- }
+ export function Hello() {
+ return (
+
+ Hello, world!
+
+ );
+ }
`,
});
@@ -107,37 +89,6 @@ describe("babel-tailwind", () => {
});
});
- it("reports errors with correct position", async () => {
- try {
- await compileESBuild({
- clsx: "emotion",
- jsxAttributeAction: "preserve",
- esbuild: {
- logLevel: "silent",
- },
- javascript: /* tsx */ `
- export function Hello() {
- return (
-
- Hello, world!
-
- );
- }
- `,
- });
- throw new Error("Expected an error");
- } catch (e) {
- expect(e.errors).toHaveLength(1);
- const [error] = e.errors;
- expect(error.location).toMatchObject({
- column: 14,
- length: 12,
- line: 3,
- lineText: ' ',
- });
- }
- });
-
it("supports custom jsxAttributeName", async () => {
const { files } = await compileESBuild({
clsx: "emotion",
@@ -159,51 +110,6 @@ 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("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")
- );
- });
-
it("supports grouped array css attribute", async () => {
const { files } = await compileESBuild({
clsx: "emotion",
@@ -252,76 +158,4 @@ describe("babel-tailwind", () => {
expect(files.js.text).toContain(`className: isCenter ? "${clsName}" : void 0`);
expect(files.css.text).toMatch(`.${clsName} {\n text-align: center;\n}`);
});
-
- it("supports importing tailwind/base", async () => {
- const postcss = createPostCSS({
- tailwindConfig: {},
- postCSSPlugins: [],
- });
- const base = await postcss("@tailwind base;");
- const { files } = await compileESBuild({
- clsx: "emotion",
- expectFiles: 2,
- javascript: /* tsx */ `
- import "${name}/base";
- `,
- });
-
- expect(files.js.text).toBe("");
- expect(minCSS(files.css.text)).toContain(minCSS(base));
- });
});
-
-async function write(path: string, content: string) {
- const resolved = resolve(folder, path);
- await fs.writeFile(resolved, content);
- return resolved;
-}
-
-const minCSS = (text: string) =>
- esbuild.transformSync(text, { minify: true, loader: "css" }).code;
-
-const findByExt = (outputFiles: esbuild.OutputFile[], ext: string) =>
- outputFiles.find(file => file.path.endsWith(ext))!;
-
-async function compileESBuild({
- javascript,
- esbuild: esbuildOptions,
- expectFiles,
- ...options
-}: Omit & {
- esbuild?: esbuild.BuildOptions;
- javascript: string;
- expectFiles?: number;
-}) {
- const tailwind = getTailwindPlugins({
- tailwindConfig: {},
- macroFunction: "tw",
- ...options,
- });
- const result = await esbuild.build({
- bundle: true,
- write: false,
- external: ["react/jsx-runtime", "@emotion/css", "clsx"],
- outdir: "dist",
- format: "esm",
- entryPoints: [await write("index.tsx", dedent(javascript))],
- plugins: [babelPlugin({ plugins: [tailwind.babel()] }), tailwind.esbuild()],
- ...esbuildOptions,
- });
-
- const { errors, warnings, outputFiles } = result;
- expect(errors).toHaveLength(0);
- expect(warnings).toHaveLength(0);
-
- if (expectFiles != null) {
- expect(outputFiles).toHaveLength(expectFiles);
- }
-
- return {
- outputFiles: outputFiles!,
- files: new Proxy({} as Record, {
- get: (_, ext: string) => findByExt(outputFiles!, ext),
- }),
- };
-}
diff --git a/src/index.ts b/src/index.ts
index 96851fe..dd5ffd0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,11 +7,15 @@ import { type ClassNameCollector, babelTailwind } from "./babel-tailwind";
import { esbuildPlugin } from "./esbuild-postcss";
import { vitePlugin } from "./vite-plugin";
import { type StyleMap, createPostCSS } from "./shared";
+import { convertCssToJS } from "./css-to-js";
export { babelPlugin } from "./esbuild-babel";
export { createPostCSS } from "./shared";
type GetClassName = (className: string) => string;
+export type BuildStyleFile = (
+ path: string
+) => Promise;
interface RecursiveStringObject {
[modifier: string]: string | RecursiveStringObject;
@@ -20,7 +24,7 @@ interface RecursiveStringObject {
export type CSSAttributeValue = string | (string | RecursiveStringObject)[];
/**
- * Tagged template macro function for Tailwind classes
+ * Tagged template macro function combining Tailwind classes
* @example "tw" => tw`p-2 text-center`
*/
export interface TailwindFunction {
@@ -28,6 +32,15 @@ export interface TailwindFunction {
(...args: (string | RecursiveStringObject)[]): string;
}
+/**
+ * Tagged template macro function compiling Tailwind styles
+ * @example "tws" => tws`p-2 text-center` // { padding: 2, textAlign: "center" }
+ */
+export interface TailwindStyleFunction