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

Extract class name composition logic

Browse Source
This commit is contained in:
Alex 2025-03-04 04:01:55 -05:00
parent 52b19b3b36
commit bd683df539
14 changed files with 933 additions and 1182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@aet/tailwind",
"version": "1.0.31",
"version": "1.0.32",
"license": "MIT",
"type": "module",
"scripts": {
@ -14,7 +14,7 @@
"exports": {
".": "./dist/index.js",
"./package.json": "./package.json",
"./classed": "./dist/classed.js",
"./utils": "./dist/utils.js",
"./css-to-js": "./dist/css-to-js.js",
"./base": {
"types": "./dist/base.d.ts"
@ -36,14 +36,14 @@
}
},
"devDependencies": {
"@aet/eslint-rules": "^2.0.36",
"@aet/eslint-rules": "^2.0.42",
"@types/babel__core": "^7.20.5",
"@types/bun": "^1.2.2",
"@types/bun": "^1.2.4",
"@types/dedent": "^0.7.2",
"@types/lodash-es": "^4.17.12",
"@types/node": "^22.13.1",
"@types/node": "^22.13.9",
"@types/postcss-safe-parser": "^5.0.4",
"@types/react": "^19.0.8",
"@types/react": "^19.0.10",
"@types/stylis": "^4.2.7",
"@vitejs/plugin-react": "^4.3.4",
"cli-highlight": "^2.1.11",
@ -52,31 +52,32 @@
"css-what": "^6.1.0",
"dedent": "^1.5.3",
"esbuild-register": "^3.6.0",
"eslint": "^9.20.0",
"eslint": "^9.21.0",
"nolyfill": "^1.0.43",
"postcss-nested": "^7.0.2",
"prettier": "^3.4.2",
"prettier": "^3.5.3",
"tailwindcss": "^3.4.17",
"tslib": "^2.8.1",
"tsup": "^8.3.6",
"typescript": "^5.7.3",
"vite": "^6.1.0",
"vitest": "^3.0.5"
"tsup": "^8.4.0",
"typescript": "^5.8.2",
"vite": "^6.2.0",
"vitest": "^3.0.7"
},
"peerDependencies": {
"tailwindcss": "^3.4.17"
},
"dependencies": {
"@babel/core": "^7.26.8",
"@babel/core": "^7.26.9",
"@emotion/hash": "^0.9.2",
"clsx": "^2.1.1",
"esbuild": "^0.25.0",
"json5": "^2.2.3",
"lodash-es": "^4.17.21",
"postcss": "^8.5.1",
"postcss": "^8.5.3",
"postcss-selector-parser": "^7.1.0",
"stylis": "^4.3.6",
"tiny-invariant": "^1.3.3",
"type-fest": "^4.33.0"
"type-fest": "^4.37.0"
},
"prettier": {
"arrowParens": "avoid",

1922
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

11
scripts/index.ts
View File

@ -1,4 +1,4 @@
#!/usr/bin/env bun
#!/usr/bin/env tsx
import { promises as fs } from "node:fs";
import { build, defineConfig } from "tsup";
@ -23,7 +23,7 @@ const tsupConfig = defineConfig({
await build({
...tsupConfig,
entry: ["src/classed.tsx", "src/css-to-js.ts"],
entry: ["src/utils.tsx", "src/css-to-js.ts"],
outDir: "dist",
external: ["react", "react/jsx-runtime", "clsx"],
clean: true,
@ -32,7 +32,7 @@ await build({
await Promise.all([
build({
...tsupConfig,
entry: ["src/classed.tsx", "src/css-to-js.ts"],
entry: ["src/utils.tsx", "src/css-to-js.ts"],
outDir: "dist",
external: ["react", "react/jsx-runtime", "clsx"],
}),
@ -63,7 +63,10 @@ await Promise.all([
fs.copyFile("LICENSE.md", "dist/LICENSE.md"),
fs.copyFile("src/macro.d.ts", "dist/macro.d.ts"),
fs.copyFile("src/react-env.d.ts", "dist/react-env.d.ts"),
Bun.write(`dist/base.d.ts`, `/**\n * \`@tailwind base\` component.\n */\nexport {};`),
fs.writeFile(
`dist/base.d.ts`,
`/**\n * \`@tailwind base\` component.\n */\nexport {};`
),
]);
process.exit(0);

2
src/__tests__/__snapshots__/tw.test.ts.snap
View File

@ -41,7 +41,7 @@ exports[`babel-tailwind > supports grouped tw 2`] = `
`;
exports[`babel-tailwind > supports styled components usage 1`] = `
"import { classed as _classed } from "@aet/tailwind/classed";
"import { classed as _classed } from "@aet/tailwind/utils";
var Div = _classed("div", "tw-gqn2k6");"
`;

2
src/__tests__/emit.test.ts
View File

@ -5,7 +5,7 @@ import { getBuild, matchSnapshot } from "./utils";
describe("emit", () => {
const compileESBuild = getBuild("emit");
it("supports emitting as CSS module", async () => {
it.only("supports emitting as CSS module", async () => {
const { files } = await compileESBuild({
clsx: "emotion",
expectFiles: 2,

4
src/__tests__/merge.test.ts
View File

@ -68,7 +68,7 @@ describe("merges with existing className attribute", () => {
const clsName = getClassName("text-center");
expect(files.js.text).toContain(
`{ ...props, className: typeof _className === "function" ? (...args) => _cx("${clsName}", _className(...args)) : _cx("${clsName}", _className),`
`{ ...props, className: _composeClassName("${clsName}", _className),`
);
});
@ -90,7 +90,7 @@ describe("merges with existing className attribute", () => {
const clsName = getClassName("text-center");
expect(files.js.text).toContain(
`{ className: typeof className === "function" ? (...args) => _cx("${clsName}", className(...args)) : _cx("${clsName}", className),`
`{ className: _composeClassName("${clsName}", className),`
);
});

2
src/__tests__/utils.ts
View File

@ -56,7 +56,7 @@ export function getBuild(name: string) {
"@emotion/css",
"clsx",
"tslib",
"@aet/tailwind/classed",
"@aet/tailwind/utils",
],
outdir: "dist",
format: "esm",

110
src/babel/index.ts
View File

@ -1,12 +1,13 @@
import { basename, dirname, extname, join } from "node:path";
import type b from "@babel/core";
import { type NodePath, type types as t } from "@babel/core";
import { type Node, type NodePath, type types as t } from "@babel/core";
import hash from "@emotion/hash";
import { memoize } from "lodash-es";
import invariant from "tiny-invariant";
import { type ResolveTailwindOptions, getClassName } from "../index";
import { type SourceLocation, type StyleMapEntry, classedName } from "../shared";
import { type SourceLocation, type StyleMapEntry, utilsName } from "../shared";
import { handleMacro } from "./macro";
import { evaluateArgs, trim } from "./utils";
@ -49,10 +50,6 @@ function getUtils({
} = options;
let cx: t.Identifier;
let tslibImport: t.Identifier;
let styleImport: t.Identifier;
let classedImport: t.Identifier;
let cssModuleImport: t.Identifier;
const cssMap = new Map<string, StyleMapEntry>();
const jsMap = new Map<string, StyleMapEntry>();
@ -87,18 +84,6 @@ function getUtils({
break;
}
function getStyleImport() {
styleImport ??= path.scope.generateUidIdentifier("styles");
return t.cloneNode(styleImport);
}
const getCssModuleImport = () => {
if (cssModuleImport == null) {
cssModuleImport = path.scope.generateUidIdentifier("cssModule");
}
return t.cloneNode(cssModuleImport);
};
function reuseImport(scope: Scope) {
if (
existingCx &&
@ -108,6 +93,32 @@ function getUtils({
}
}
function cacheNode<N extends Node>(fn: () => N) {
let cache: N | undefined;
return Object.assign(
(): N => {
cache ??= fn();
return t.cloneNode(cache);
},
{
getCache() {
return cache;
},
}
);
}
const getStyleImport = cacheNode(() => path.scope.generateUidIdentifier("styles"));
const getCssModuleImport = cacheNode(() =>
path.scope.generateUidIdentifier("cssModule")
);
const getUtilsImport = memoize(() => {
const importDecl = t.importDeclaration([], t.stringLiteral(utilsName));
path.node.body.unshift(importDecl);
return importDecl;
});
return {
program: path,
existingCx,
@ -163,31 +174,32 @@ function getUtils({
return t.cloneNode(cx);
},
getTSlibImport: () => {
if (tslibImport == null) {
tslibImport = path.scope.generateUidIdentifier("tslib");
getTSlibImport: cacheNode(() => {
const tslibImport = path.scope.generateUidIdentifier("tslib");
path.node.body.unshift(
t.importDeclaration(
[t.importNamespaceSpecifier(tslibImport)],
t.stringLiteral("tslib")
)
);
}
return t.cloneNode(tslibImport);
},
return tslibImport;
}),
getClassedImport: () => {
if (classedImport == null) {
classedImport = path.scope.generateUidIdentifier("classed");
path.node.body.unshift(
t.importDeclaration(
[t.importSpecifier(classedImport, t.identifier("classed"))],
t.stringLiteral(classedName)
)
getClsCompose: cacheNode(() => {
const clsComposeImport = path.scope.generateUidIdentifier("composeClassName");
getUtilsImport().specifiers.push(
t.importSpecifier(clsComposeImport, t.identifier("composeClassName"))
);
}
return t.cloneNode(classedImport);
},
return clsComposeImport;
}),
getClassedImport: cacheNode(() => {
const classedImport = path.scope.generateUidIdentifier("classed");
getUtilsImport().specifiers.push(
t.importSpecifier(classedImport, t.identifier("classed"))
);
return classedImport;
}),
getCssModuleImport,
@ -207,6 +219,7 @@ function getUtils({
if (!cssMap.size && !jsMap.size) return;
invariant(filename, "babel: missing state.filename");
const cssModuleImport = getCssModuleImport.getCache();
if (cssMap.size) {
const cssName =
basename(filename, extname(filename)) +
@ -338,9 +351,6 @@ export function babelTailwind(
},
}));
const $eq = (left: t.Expression, right: t.Expression) =>
t.binaryExpression("===", left, right);
const $typeof = (expr: t.Expression) => t.unaryExpression("typeof", expr);
const {
identifier: id,
jsxExpressionContainer: jsxBox,
@ -359,26 +369,10 @@ export function babelTailwind(
);
}
const wrap = (existing: b.types.Expression) => {
const callExp = call(_.getCx(path.scope), [valuePathNode, existing]);
return composeRenderProps
? // typeof className === "function"
// ? (...args) => clsx("${clsName}", className(...args))
// : clsx("${clsName}", className)
t.conditionalExpression(
$eq($typeof(existing), t.stringLiteral("function")),
t.arrowFunctionExpression(
[t.restElement(id("args"))],
call(_.getCx(path.scope), [
valuePathNode,
call(existing, [t.spreadElement(id("args"))]),
])
),
/* else */ callExp
)
: callExp;
};
const wrap = (existing: b.types.Expression) =>
composeRenderProps
? call(_.getClsCompose(), [valuePathNode, existing])
: call(_.getCx(path.scope), [valuePathNode, existing]);
// There is an existing className attribute
if (classNameAttribute) {

2
src/babel/utils.ts
View File

@ -1,6 +1,6 @@
import type { NodePath } from "@babel/core";
import { isPlainObject } from "lodash-es";
import invariant from "tiny-invariant";
import { type NodePath } from "@babel/core";
export function evaluateArgs(path: NodePath) {
const { confident, value } = path.evaluate();

2
src/index.ts
View File

@ -151,7 +151,7 @@ export function getTailwindPlugins(options: TailwindPluginOptions) {
const compiled = await compile(
styles
.map(({ classNames, key }) => {
const tw = without(classNames, "group").join(" ");
const tw = without(classNames, "group", "peer").join(" ");
return [
`.${key} {`,
addSourceAsComment && ` /* @preserve ${tw} */`,

2
src/shared-v4.ts
View File

@ -6,7 +6,7 @@ declare const __PKG_NAME__: string;
export const pkgName = __PKG_NAME__;
export const macroNames = [`${pkgName}/macro`, `${pkgName}/µ`];
export const classedName = `${pkgName}/classed`;
export const utilsName = `${pkgName}/utils`;
interface LineColumn {
line: number;

2
src/shared.ts
View File

@ -7,7 +7,7 @@ declare const __PKG_NAME__: string;
export const pkgName = __PKG_NAME__;
export const macroNames = [`${pkgName}/macro`, `${pkgName}/µ`];
export const classedName = `${pkgName}/classed`;
export const utilsName = `${pkgName}/utils`;
interface LineColumn {
line: number;

7
src/classed.tsx → src/utils.tsx
View File

@ -67,3 +67,10 @@ export const classed: {
component.className = className;
return component;
};
export function composeClassName<T>(
value: string,
prop: string | ((values: T) => string) | undefined
) {
return typeof prop === "function" ? (arg: T) => cx(value, prop(arg)) : cx(value, prop);
}

2
src/vite-plugin.ts
View File

@ -62,4 +62,4 @@ export const vitePlugin = ({
* `babel-plugin-macros` compatible `isMacrosName` function that works with this plugin.
*/
export const isMacrosName = (v: string) =>
!macroNames.includes(v) && /[./]macro(\.c?js)?$/.test(v);
!macroNames.includes(v) && /[./]macro(?:\.c?js)?$/.test(v);