Add vite plugin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aet/babel-tailwind",
-  "version": "0.0.1-beta.0",
+  "version": "0.0.1-beta.2",
   "main": "dist/index.js",
   "license": "MIT",
   "scripts": {
@@ -21,6 +21,7 @@
     "tailwindcss": "^3.4.3",
     "tsup": "^8.0.2",
     "typescript": "^5.4.3",
+    "vite": "^5.2.7",
     "vitest": "^1.4.0"
   },
   "peerDependencies": {

pnpm-lock.yaml

@@ -49,6 +49,9 @@ devDependencies:
   typescript:
     specifier: ^5.4.3
     version: 5.4.3
+  vite:
+    specifier: ^5.2.7
+    version: 5.2.7(@types/node@20.12.2)
   vitest:
     specifier: ^1.4.0
     version: 1.4.0(@types/node@20.12.2)

src/index.ts

@@ -3,13 +3,15 @@ import { basename, dirname, extname, join } from "node:path";
 import { once } from "lodash";
 import hash from "@emotion/hash";
 import type babel from "@babel/core";
-import { type NodePath, type types as t, transformSync } from "@babel/core";
+import type * as vite from "vite";
 import type * as esbuild from "esbuild";
+import { type NodePath, type types as t, transformSync } from "@babel/core";
 import tailwind, { type Config } from "tailwindcss";
 import postcss from "postcss";
 
 const PLUGIN_NAME = "tailwind";
 const ESBUILD_NAMESPACE = "babel-tailwind";
+const ROLLUP_PREFIX = "\0tailwind:";
 
 const definePlugin =
   <T>(fn: (runtime: typeof babel) => babel.Visitor<babel.PluginPass & T>) =>
@@ -132,6 +134,7 @@ const babelTailwind = (
         const result = Array.from(tailwindMap)
           .map(([className, value]) => `.${className} {\n  @apply ${value}\n}`)
           .join("\n");
+
         styleMap.set(join(dirname(filename), cssName), result);
       },
     },
@@ -301,9 +304,33 @@ const esbuildPlugin = (
   },
 });
 
+const vitePlugin = (styleMap: Map<string, string>, compile: Compile): vite.Plugin => ({
+  name: "tailwind",
+  resolveId(id, importer) {
+    if (id.startsWith("tailwind:")) {
+      const resolved = join(dirname(importer!), id.slice("tailwind:".length));
+      if (styleMap.has(resolved)) {
+        return {
+          id: ROLLUP_PREFIX + resolved,
+          moduleSideEffects: true,
+        };
+      }
+    }
+  },
+  async load(id: string) {
+    if (id.startsWith(ROLLUP_PREFIX)) {
+      const resolved = id.slice(ROLLUP_PREFIX.length);
+      if (styleMap.has(resolved)) {
+        const result = await compile(styleMap.get(resolved)!);
+        return result.css;
+      }
+    }
+  },
+});
+
 /**
- * Main entry. Returns the esbuild, babel plugins and utilities for processing
- * Tailwind classNames in JS.
+ * Main entry. Returns the plugins and utilities for processing Tailwind
+ * classNames in JS.
  *
  * @example
  * import { build } from "esbuild";
@@ -325,6 +352,7 @@ export function getTailwindPlugins(options: TailwindPluginOptions) {
     compile,
     babel: babelTailwind(styleMap, options),
     esbuild: esbuildPlugin(styleMap, compile),
+    vite: vitePlugin(styleMap, compile),
     styleMap,
     [Symbol.dispose]() {
       styleMap.clear();