Prefix

2024-04-27 02:18:44 -04:00 · 2024-04-27 02:18:44 -04:00 · 2a3e7390cf
commit 2a3e7390cf
parent 8010c774cd
5 changed files with 63 additions and 44 deletions
--- 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",
--- 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
--- 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<TailwindPluginOptions, "compile"> & {
  esbuild?: esbuild.BuildOptions;
  javascript: string;
  expectFiles?: number;
--- 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<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",
--- a/src/shared.ts
+++ b/src/shared.ts
@ -31,8 +31,8 @@ export type StyleMap = Map</* filename */ string, StyleMapEntry[]>;
 export function createPostCSS({
  tailwindConfig,
  postCSSPlugins,
-  directives,
-}: Pick<ResolveTailwindOptions, "tailwindConfig" | "postCSSPlugins" | "directives">) {
+  prefix,
+}: 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;
  };
 }