This commit is contained in:
Alex 2024-07-27 03:34:29 -04:00
parent 2c51fceac3
commit 398a586717
2 changed files with 18 additions and 4 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@aet/tailwind", "name": "@aet/tailwind",
"version": "1.0.0", "version": "1.0.2",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"build": "./scripts/index.ts", "build": "./scripts/index.ts",
@ -67,4 +67,4 @@
"singleQuote": false, "singleQuote": false,
"trailingComma": "es5" "trailingComma": "es5"
} }
} }

View File

@ -1,6 +1,7 @@
import hash from "@emotion/hash"; import hash from "@emotion/hash";
import type { Config } from "tailwindcss"; import type { Config } from "tailwindcss";
import type { SetRequired } from "type-fest"; import type { SetRequired } from "type-fest";
import { transformSync } from "esbuild";
import type postcss from "postcss"; import type postcss from "postcss";
import { memoize, without } from "lodash"; import { memoize, without } from "lodash";
import { type ClassNameCollector, babelTailwind } from "./babel-tailwind"; import { type ClassNameCollector, babelTailwind } from "./babel-tailwind";
@ -77,6 +78,11 @@ export interface TailwindPluginOptions {
* Using the vite plugin? * Using the vite plugin?
*/ */
vite?: boolean; vite?: boolean;
/**
* Keep the original classnames in the CSS output
*/
addSourceAsComment?: boolean;
} }
export type ResolveTailwindOptions = SetRequired< export type ResolveTailwindOptions = SetRequired<
@ -112,6 +118,7 @@ export const getClassName: GetClassName = cls => "tw-" + hash(cls);
* }); * });
*/ */
export function getTailwindPlugins(options: TailwindPluginOptions) { export function getTailwindPlugins(options: TailwindPluginOptions) {
const { addSourceAsComment } = options;
const resolvedOptions: ResolveTailwindOptions = { const resolvedOptions: ResolveTailwindOptions = {
getClassName, getClassName,
jsxAttributeAction: "delete", jsxAttributeAction: "delete",
@ -133,12 +140,19 @@ export function getTailwindPlugins(options: TailwindPluginOptions) {
styles styles
.map(({ classNames, key }) => { .map(({ classNames, key }) => {
const tw = without(classNames, "group").join(" "); const tw = without(classNames, "group").join(" ");
return `.${key} {\n /* @apply ${tw} */\n @apply ${tw}\n}`; return [
`.${key} {`,
addSourceAsComment && ` /* @preserve ${tw} */`,
` @apply ${tw};`,
"}",
]
.filter(Boolean)
.join("\n");
}) })
.join("\n") .join("\n")
); );
if (path.endsWith(".css")) { if (path.endsWith(".css")) {
return ["css", compiled] as const; return ["css", transformSync(compiled, { loader: "css" }).code] as const;
} else if (path.endsWith(".js")) { } else if (path.endsWith(".js")) {
const js = convertCssToJS(compiled, x => x.slice(1)); const js = convertCssToJS(compiled, x => x.slice(1));
return ["js", js] as const; return ["js", js] as const;