diff --git a/package.json b/package.json index 994faf9..7da5ce2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@aet/tailwind", - "version": "1.0.0", + "version": "1.0.2", "license": "MIT", "scripts": { "build": "./scripts/index.ts", @@ -67,4 +67,4 @@ "singleQuote": false, "trailingComma": "es5" } -} +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 9fbfecc..3f4f6d8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,7 @@ import hash from "@emotion/hash"; import type { Config } from "tailwindcss"; import type { SetRequired } from "type-fest"; +import { transformSync } from "esbuild"; import type postcss from "postcss"; import { memoize, without } from "lodash"; import { type ClassNameCollector, babelTailwind } from "./babel-tailwind"; @@ -77,6 +78,11 @@ export interface TailwindPluginOptions { * Using the vite plugin? */ vite?: boolean; + + /** + * Keep the original classnames in the CSS output + */ + addSourceAsComment?: boolean; } export type ResolveTailwindOptions = SetRequired< @@ -112,6 +118,7 @@ export const getClassName: GetClassName = cls => "tw-" + hash(cls); * }); */ export function getTailwindPlugins(options: TailwindPluginOptions) { + const { addSourceAsComment } = options; const resolvedOptions: ResolveTailwindOptions = { getClassName, jsxAttributeAction: "delete", @@ -133,12 +140,19 @@ export function getTailwindPlugins(options: TailwindPluginOptions) { styles .map(({ classNames, key }) => { 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") ); if (path.endsWith(".css")) { - return ["css", compiled] as const; + return ["css", transformSync(compiled, { loader: "css" }).code] as const; } else if (path.endsWith(".js")) { const js = convertCssToJS(compiled, x => x.slice(1)); return ["js", js] as const;