diff --git a/package.json b/package.json index fad5b20..a3f4a1e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@aet/tailwind", - "version": "0.0.1-beta.5", + "version": "0.0.1-beta.6", "main": "dist/index.js", "license": "MIT", "private": true, @@ -33,7 +33,7 @@ "tsup": "^8.0.2", "typescript": "^5.4.5", "vite": "^5.2.10", - "vitest": "^1.5.0" + "vitest": "^1.5.2" }, "peerDependencies": { "tailwindcss": "^3.4.3" @@ -42,7 +42,8 @@ "@babel/core": "^7.24.4", "@emotion/hash": "^0.9.1", "lodash": "^4.17.21", - "postcss": "^8.4.38" + "postcss": "^8.4.38", + "type-fest": "^4.17.0" }, "prettier": { "arrowParens": "avoid", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d2bd03f..cb32e4b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ dependencies: postcss: specifier: ^8.4.38 version: 8.4.38 + type-fest: + specifier: ^4.17.0 + version: 4.17.0 devDependencies: '@aet/eslint-rules': @@ -83,8 +86,8 @@ devDependencies: specifier: ^5.2.10 version: 5.2.10(@types/node@20.12.7) vitest: - specifier: ^1.5.0 - version: 1.5.0(@types/node@20.12.7) + specifier: ^1.5.2 + version: 1.5.2(@types/node@20.12.7) packages: @@ -1256,38 +1259,38 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vitest/expect@1.5.0: - resolution: {integrity: sha512-0pzuCI6KYi2SIC3LQezmxujU9RK/vwC1U9R0rLuGlNGcOuDWxqWKu6nUdFsX9tH1WU0SXtAxToOsEjeUn1s3hA==} + /@vitest/expect@1.5.2: + resolution: {integrity: sha512-rf7MTD1WCoDlN3FfYJ9Llfp0PbdtOMZ3FIF0AVkDnKbp3oiMW1c8AmvRZBcqbAhDUAvF52e9zx4WQM1r3oraVA==} dependencies: - '@vitest/spy': 1.5.0 - '@vitest/utils': 1.5.0 + '@vitest/spy': 1.5.2 + '@vitest/utils': 1.5.2 chai: 4.4.1 dev: true - /@vitest/runner@1.5.0: - resolution: {integrity: sha512-7HWwdxXP5yDoe7DTpbif9l6ZmDwCzcSIK38kTSIt6CFEpMjX4EpCgT6wUmS0xTXqMI6E/ONmfgRKmaujpabjZQ==} + /@vitest/runner@1.5.2: + resolution: {integrity: sha512-7IJ7sJhMZrqx7HIEpv3WrMYcq8ZNz9L6alo81Y6f8hV5mIE6yVZsFoivLZmr0D777klm1ReqonE9LyChdcmw6g==} dependencies: - '@vitest/utils': 1.5.0 + '@vitest/utils': 1.5.2 p-limit: 5.0.0 pathe: 1.1.2 dev: true - /@vitest/snapshot@1.5.0: - resolution: {integrity: sha512-qpv3fSEuNrhAO3FpH6YYRdaECnnRjg9VxbhdtPwPRnzSfHVXnNzzrpX4cJxqiwgRMo7uRMWDFBlsBq4Cr+rO3A==} + /@vitest/snapshot@1.5.2: + resolution: {integrity: sha512-CTEp/lTYos8fuCc9+Z55Ga5NVPKUgExritjF5VY7heRFUfheoAqBneUlvXSUJHUZPjnPmyZA96yLRJDP1QATFQ==} dependencies: magic-string: 0.30.8 pathe: 1.1.2 pretty-format: 29.7.0 dev: true - /@vitest/spy@1.5.0: - resolution: {integrity: sha512-vu6vi6ew5N5MMHJjD5PoakMRKYdmIrNJmyfkhRpQt5d9Ewhw9nZ5Aqynbi3N61bvk9UvZ5UysMT6ayIrZ8GA9w==} + /@vitest/spy@1.5.2: + resolution: {integrity: sha512-xCcPvI8JpCtgikT9nLpHPL1/81AYqZy1GCy4+MCHBE7xi8jgsYkULpW5hrx5PGLgOQjUpb6fd15lqcriJ40tfQ==} dependencies: tinyspy: 2.2.1 dev: true - /@vitest/utils@1.5.0: - resolution: {integrity: sha512-BDU0GNL8MWkRkSRdNFvCUCAVOeHaUlVJ9Tx0TYBZyXaaOTmGtUFObzchCivIBrIwKzvZA7A9sCejVhXM2aY98A==} + /@vitest/utils@1.5.2: + resolution: {integrity: sha512-sWOmyofuXLJ85VvXNsroZur7mOJGiQeM0JN3/0D1uU8U9bGFM69X1iqHaRXl6R8BwaLY6yPCogP257zxTzkUdA==} dependencies: diff-sequences: 29.6.3 estree-walker: 3.0.3 @@ -3515,6 +3518,11 @@ packages: engines: {node: '>=8'} dev: true + /type-fest@4.17.0: + resolution: {integrity: sha512-9flrz1zkfLRH3jO3bLflmTxryzKMxVa7841VeMgBaNQGY6vH4RCcpN/sQLB7mQQYh1GZ5utT2deypMuCy4yicw==} + engines: {node: '>=16'} + dev: false + /typescript@5.4.5: resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==} engines: {node: '>=14.17'} @@ -3556,8 +3564,8 @@ packages: spdx-expression-parse: 3.0.1 dev: true - /vite-node@1.5.0(@types/node@20.12.7): - resolution: {integrity: sha512-tV8h6gMj6vPzVCa7l+VGq9lwoJjW8Y79vst8QZZGiuRAfijU+EEWuc0kFpmndQrWhMMhet1jdSF+40KSZUqIIw==} + /vite-node@1.5.2(@types/node@20.12.7): + resolution: {integrity: sha512-Y8p91kz9zU+bWtF7HGt6DVw2JbhyuB2RlZix3FPYAYmUyZ3n7iTp8eSyLyY6sxtPegvxQtmlTMhfPhUfCUF93A==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true dependencies: @@ -3613,15 +3621,15 @@ packages: fsevents: 2.3.3 dev: true - /vitest@1.5.0(@types/node@20.12.7): - resolution: {integrity: sha512-d8UKgR0m2kjdxDWX6911uwxout6GHS0XaGH1cksSIVVG8kRlE7G7aBw7myKQCvDI5dT4j7ZMa+l706BIORMDLw==} + /vitest@1.5.2(@types/node@20.12.7): + resolution: {integrity: sha512-l9gwIkq16ug3xY7BxHwcBQovLZG75zZL0PlsiYQbf76Rz6QGs54416UWMtC0jXeihvHvcHrf2ROEjkQRVpoZYw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: '@edge-runtime/vm': '*' '@types/node': ^18.0.0 || >=20.0.0 - '@vitest/browser': 1.5.0 - '@vitest/ui': 1.5.0 + '@vitest/browser': 1.5.2 + '@vitest/ui': 1.5.2 happy-dom: '*' jsdom: '*' peerDependenciesMeta: @@ -3639,11 +3647,11 @@ packages: optional: true dependencies: '@types/node': 20.12.7 - '@vitest/expect': 1.5.0 - '@vitest/runner': 1.5.0 - '@vitest/snapshot': 1.5.0 - '@vitest/spy': 1.5.0 - '@vitest/utils': 1.5.0 + '@vitest/expect': 1.5.2 + '@vitest/runner': 1.5.2 + '@vitest/snapshot': 1.5.2 + '@vitest/spy': 1.5.2 + '@vitest/utils': 1.5.2 acorn-walk: 8.3.2 chai: 4.4.1 debug: 4.3.4 @@ -3657,7 +3665,7 @@ packages: tinybench: 2.6.0 tinypool: 0.8.3 vite: 5.2.10(@types/node@20.12.7) - vite-node: 1.5.0(@types/node@20.12.7) + vite-node: 1.5.2(@types/node@20.12.7) why-is-node-running: 2.2.2 transitivePeerDependencies: - less diff --git a/src/index.test.ts b/src/index.test.ts index 9cc0566..c6d2a6b 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -163,7 +163,6 @@ describe("babel-tailwind", () => { const postcss = createPostCSS({ tailwindConfig: {}, postCSSPlugins: [], - directives: [], }); const base = await postcss("@tailwind base;"); const { files } = await compileESBuild({ @@ -196,7 +195,7 @@ async function compileESBuild({ esbuild: esbuildOptions, expectFiles, ...options -}: TailwindPluginOptions & { +}: Omit & { esbuild?: esbuild.BuildOptions; javascript: string; expectFiles?: number; diff --git a/src/index.ts b/src/index.ts index b88c960..a41570b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,11 +1,12 @@ import hash from "@emotion/hash"; import type { Config } from "tailwindcss"; +import type { SetRequired } from "type-fest"; import type postcss from "postcss"; import { memoize } from "lodash"; import { type ClassNameCollector, babelTailwind } from "./babel-tailwind"; import { esbuildPlugin } from "./esbuild-postcss"; import { vitePlugin } from "./vite-plugin"; -import { type StyleMap, createPostCSS, type tailwindDirectives } from "./shared"; +import { type StyleMap, createPostCSS } from "./shared"; export { babelPlugin } from "./esbuild-babel"; export { createPostCSS } from "./shared"; @@ -25,9 +26,14 @@ export interface TailwindPluginOptions { tailwindConfig?: Omit; /** - * Directives to prefix to all Tailwind stylesheets + * Prefix to all Tailwind stylesheets + * + * @example + * tailwind base; + * tailwind components; + * tailwind utilities; */ - directives?: (typeof tailwindDirectives)[number][] | "all" | undefined; + prefix?: string; /** * Additional PostCSS plugins (optional) @@ -76,10 +82,19 @@ export interface TailwindPluginOptions { * @example * async css => (await postcss.process(css, { plugins: [tailwindcss()] })).css */ - compile(css: string): Promise; + compile?(css: string): Promise; } -export type ResolveTailwindOptions = Required; +export type ResolveTailwindOptions = SetRequired< + TailwindPluginOptions, + | "clsx" + | "jsxAttributeAction" + | "jsxAttributeName" + | "postCSSPlugins" + | "styleMap" + | "tailwindConfig" + | "taggedTemplateName" +>; /** * Hashes and prefixes a string of Tailwind class names. @@ -105,7 +120,6 @@ export const getClassName: GetClassName = cls => "tw-" + hash(cls); */ export function getTailwindPlugins(options: TailwindPluginOptions) { const resolvedOptions: ResolveTailwindOptions = { - directives: undefined, getClassName, jsxAttributeAction: "delete", jsxAttributeName: "css", diff --git a/src/shared.ts b/src/shared.ts index df733ad..ff7c8a7 100644 --- a/src/shared.ts +++ b/src/shared.ts @@ -31,8 +31,8 @@ export type StyleMap = Map; export function createPostCSS({ tailwindConfig, postCSSPlugins, - directives, -}: Pick) { + prefix, +}: Pick) { const post = postcss([ tailwind({ ...tailwindConfig, @@ -41,11 +41,8 @@ export function createPostCSS({ ...postCSSPlugins, ]); - const appliedDirectives = directives === "all" ? tailwindDirectives : directives; - const directiveTexts = appliedDirectives?.map(d => `@tailwind ${d};\n`).join("") ?? ""; - return async (css: string) => { - const result = await post.process(directiveTexts + css, { from: undefined }); + const result = await post.process((prefix ?? "") + css, { from: undefined }); return result.css; }; }