Prefix

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",

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
+    specifier: ^1.5.2
-    version: 1.5.0(@types/node@20.12.7)
+    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:
+  /@vitest/expect@1.5.2:
-    resolution: {integrity: sha512-0pzuCI6KYi2SIC3LQezmxujU9RK/vwC1U9R0rLuGlNGcOuDWxqWKu6nUdFsX9tH1WU0SXtAxToOsEjeUn1s3hA==}
+    resolution: {integrity: sha512-rf7MTD1WCoDlN3FfYJ9Llfp0PbdtOMZ3FIF0AVkDnKbp3oiMW1c8AmvRZBcqbAhDUAvF52e9zx4WQM1r3oraVA==}
     dependencies:
-      '@vitest/spy': 1.5.0
+      '@vitest/spy': 1.5.2
-      '@vitest/utils': 1.5.0
+      '@vitest/utils': 1.5.2
       chai: 4.4.1
     dev: true
 
-  /@vitest/runner@1.5.0:
+  /@vitest/runner@1.5.2:
-    resolution: {integrity: sha512-7HWwdxXP5yDoe7DTpbif9l6ZmDwCzcSIK38kTSIt6CFEpMjX4EpCgT6wUmS0xTXqMI6E/ONmfgRKmaujpabjZQ==}
+    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:
+  /@vitest/snapshot@1.5.2:
-    resolution: {integrity: sha512-qpv3fSEuNrhAO3FpH6YYRdaECnnRjg9VxbhdtPwPRnzSfHVXnNzzrpX4cJxqiwgRMo7uRMWDFBlsBq4Cr+rO3A==}
+    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:
+  /@vitest/spy@1.5.2:
-    resolution: {integrity: sha512-vu6vi6ew5N5MMHJjD5PoakMRKYdmIrNJmyfkhRpQt5d9Ewhw9nZ5Aqynbi3N61bvk9UvZ5UysMT6ayIrZ8GA9w==}
+    resolution: {integrity: sha512-xCcPvI8JpCtgikT9nLpHPL1/81AYqZy1GCy4+MCHBE7xi8jgsYkULpW5hrx5PGLgOQjUpb6fd15lqcriJ40tfQ==}
     dependencies:
       tinyspy: 2.2.1
     dev: true
 
-  /@vitest/utils@1.5.0:
+  /@vitest/utils@1.5.2:
-    resolution: {integrity: sha512-BDU0GNL8MWkRkSRdNFvCUCAVOeHaUlVJ9Tx0TYBZyXaaOTmGtUFObzchCivIBrIwKzvZA7A9sCejVhXM2aY98A==}
+    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):
+  /vite-node@1.5.2(@types/node@20.12.7):
-    resolution: {integrity: sha512-tV8h6gMj6vPzVCa7l+VGq9lwoJjW8Y79vst8QZZGiuRAfijU+EEWuc0kFpmndQrWhMMhet1jdSF+40KSZUqIIw==}
+    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):
+  /vitest@1.5.2(@types/node@20.12.7):
-    resolution: {integrity: sha512-d8UKgR0m2kjdxDWX6911uwxout6GHS0XaGH1cksSIVVG8kRlE7G7aBw7myKQCvDI5dT4j7ZMa+l706BIORMDLw==}
+    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/browser': 1.5.2
-      '@vitest/ui': 1.5.0
+      '@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/expect': 1.5.2
-      '@vitest/runner': 1.5.0
+      '@vitest/runner': 1.5.2
-      '@vitest/snapshot': 1.5.0
+      '@vitest/snapshot': 1.5.2
-      '@vitest/spy': 1.5.0
+      '@vitest/spy': 1.5.2
-      '@vitest/utils': 1.5.0
+      '@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

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<TailwindPluginOptions, "compile"> & {
   esbuild?: esbuild.BuildOptions;
   javascript: string;
   expectFiles?: number;

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<Config, "content">;
 
   /**
-   * 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<string>;
+  compile?(css: string): Promise<string>;
 }
 
-export type ResolveTailwindOptions = Required<TailwindPluginOptions>;
+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",

src/shared.ts

@@ -31,8 +31,8 @@ export type StyleMap = Map</* filename */ string, StyleMapEntry[]>;
 export function createPostCSS({
   tailwindConfig,
   postCSSPlugins,
-  directives,
+  prefix,
-}: Pick<ResolveTailwindOptions, "tailwindConfig" | "postCSSPlugins" | "directives">) {
+}: Pick<ResolveTailwindOptions, "tailwindConfig" | "postCSSPlugins" | "prefix">) {
   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;
   };
 }