@ereo/plugin-tailwind 0.1.22 → 0.1.23

package/dist/index.d.ts

@@ -2,6 +2,7 @@
  * @ereo/plugin-tailwind
  *
  * Zero-config Tailwind CSS integration for EreoJS.
+ * Compiles Tailwind CSS locally via PostCSS — no CDN dependency.
  */
 import type { Plugin } from '@ereo/core';
 /**
@@ -12,6 +13,8 @@ export interface TailwindPluginOptions {
     content?: string[];
     /** Path to tailwind.config.js (auto-detected by default) */
     config?: string;
+    /** Path to CSS entry file (auto-detected: app/styles.css) */
+    css?: string;
     /** Enable dark mode */
     darkMode?: 'class' | 'media' | false;
     /** Use EreoJS preset */

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAGzC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;IACrC,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAYD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CA+F5E;AAGD,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAE7D;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CAwB1E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAQzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAGzC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;IACrC,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAgBD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CA6M5E;AAGD,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAE7D;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CAwB1E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAQzC"}

package/dist/index.js

@@ -1,6 +1,9 @@
 // @bun
+var __require = import.meta.require;
+
 // src/index.ts
-import { join } from "path";
+import { join, resolve } from "path";
+import { existsSync, readFileSync } from "fs";
 
 // src/preset.ts
 var ereoPreset = {
@@ -104,36 +107,126 @@ function getEreoTailwindConfig(overrides = {}) {
     }
   };
 }
-
 // src/index.ts
 var defaults = {
   content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
   config: "tailwind.config.js",
+  css: "",
   darkMode: "class",
   usePreset: true
 };
+var DEFAULT_CSS = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`;
 function tailwind(options = {}) {
   const opts = { ...defaults, ...options };
-  let tailwindCSS = null;
-  let configLoaded = false;
+  let root = process.cwd();
+  let processor = null;
+  let cssCache = null;
+  let cacheTimestamp = 0;
+  let tailwindConfig = null;
+  function findCSSEntry() {
+    if (opts.css) {
+      const abs = resolve(root, opts.css);
+      if (existsSync(abs))
+        return abs;
+    }
+    const candidates = [
+      "app/styles.css",
+      "app/globals.css",
+      "app/global.css",
+      "src/styles.css",
+      "src/globals.css",
+      "styles/globals.css"
+    ];
+    for (const c of candidates) {
+      const abs = join(root, c);
+      if (existsSync(abs))
+        return abs;
+    }
+    return "";
+  }
+  async function loadTailwindConfig() {
+    const configPaths = [
+      opts.config ? resolve(root, opts.config) : null,
+      join(root, "tailwind.config.js"),
+      join(root, "tailwind.config.ts"),
+      join(root, "tailwind.config.mjs"),
+      join(root, "tailwind.config.cjs")
+    ].filter(Boolean);
+    for (const configPath of configPaths) {
+      try {
+        if (existsSync(configPath)) {
+          delete __require.cache?.[configPath];
+          const imported = await import(configPath);
+          return imported.default || imported;
+        }
+      } catch (e) {
+        console.warn(`  [Tailwind] Failed to load config: ${configPath}`);
+      }
+    }
+    return null;
+  }
+  async function ensureProcessor() {
+    if (processor)
+      return processor;
+    const postcss = (await import("postcss")).default;
+    const tailwindcss = (await import("tailwindcss")).default;
+    let autoprefixer;
+    try {
+      autoprefixer = (await import("autoprefixer")).default;
+    } catch {}
+    const userConfig = await loadTailwindConfig();
+    tailwindConfig = userConfig ? {
+      ...userConfig,
+      content: Array.isArray(userConfig.content) ? userConfig.content.map((p) => typeof p === "string" && !p.startsWith("/") ? resolve(root, p) : p) : userConfig.content
+    } : {
+      content: opts.content.map((p) => resolve(root, p)),
+      darkMode: opts.darkMode || "class",
+      theme: { extend: {} },
+      plugins: []
+    };
+    const plugins = [tailwindcss(tailwindConfig)];
+    if (autoprefixer)
+      plugins.push(autoprefixer());
+    processor = postcss(plugins);
+    return processor;
+  }
+  async function compileTailwind() {
+    const now = Date.now();
+    if (cssCache && now - cacheTimestamp < 1000)
+      return cssCache;
+    const proc = await ensureProcessor();
+    const cssEntryPath = findCSSEntry();
+    const inputCSS = cssEntryPath ? readFileSync(cssEntryPath, "utf-8") : DEFAULT_CSS;
+    const result = await proc.process(inputCSS, {
+      from: cssEntryPath || "__tailwind.css"
+    });
+    cssCache = result.css;
+    cacheTimestamp = now;
+    return result.css;
+  }
   return {
     name: "ereo:tailwind",
     async setup(context) {
-      const root = context.root;
+      root = context.root;
       const configPath = join(root, opts.config);
       try {
         const hasConfig = await Bun.file(configPath).exists();
         if (hasConfig) {
           console.log("  Using existing tailwind.config.js");
-          configLoaded = true;
-        } else {
-          if (opts.usePreset) {
-            console.log("  Using EreoJS Tailwind preset");
-          }
+        } else if (opts.usePreset) {
+          console.log("  Using EreoJS Tailwind preset");
         }
-      } catch (error) {
+      } catch {
         console.warn("  Warning: Could not check for Tailwind config");
       }
+      try {
+        await ensureProcessor();
+        console.log("  [Tailwind] PostCSS processor ready");
+      } catch (e) {
+        console.warn("  [Tailwind] Could not initialize processor:", e.message);
+      }
     },
     resolveId(id) {
       if (id === "virtual:tailwind.css" || id === "/__tailwind.css") {
@@ -143,40 +236,47 @@ function tailwind(options = {}) {
     },
     async load(id) {
       if (id === "\x00virtual:tailwind.css") {
-        if (tailwindCSS) {
-          return tailwindCSS;
+        try {
+          return await compileTailwind();
+        } catch (e) {
+          console.error("  [Tailwind] Compilation error:", e.message);
+          return `/* Tailwind CSS Error: ${e.message} */`;
         }
-        return `
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-        `.trim();
       }
       return null;
     },
     async transform(code, id) {
-      if (!id.endsWith(".css")) {
+      if (!id.endsWith(".css"))
         return null;
-      }
-      if (!code.includes("@tailwind")) {
+      if (!code.includes("@tailwind") && !code.includes("@apply"))
         return null;
+      try {
+        const proc = await ensureProcessor();
+        const result = await proc.process(code, { from: id });
+        return result.css;
+      } catch (e) {
+        console.error(`  [Tailwind] Transform error in ${id}:`, e.message);
+        return code;
       }
-      return code;
     },
     async configureServer(server) {
       server.middlewares.push(async (request, context, next) => {
         const url = new URL(request.url);
         if (url.pathname === "/__tailwind.css") {
-          const css = `
-/* Tailwind CSS - Development Mode */
-@import url('https://cdn.tailwindcss.com');
-          `.trim();
-          return new Response(css, {
-            headers: {
-              "Content-Type": "text/css",
-              "Cache-Control": "no-cache"
-            }
-          });
+          try {
+            const css = await compileTailwind();
+            return new Response(css, {
+              headers: {
+                "Content-Type": "text/css; charset=utf-8",
+                "Cache-Control": "no-cache, no-store, must-revalidate"
+              }
+            });
+          } catch (e) {
+            return new Response(`/* Tailwind CSS Error: ${e.message} */`, {
+              status: 500,
+              headers: { "Content-Type": "text/css" }
+            });
+          }
         }
         return next();
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ereo/plugin-tailwind",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "license": "MIT",
   "author": "Ereo Team",
   "homepage": "https://ereo.dev",
@@ -25,25 +25,30 @@
     "dist"
   ],
   "scripts": {
-    "build": "bun build ./src/index.ts --outdir ./dist --target bun --external @ereo/core --external tailwindcss && bun run build:types",
+    "build": "bun build ./src/index.ts --outdir ./dist --target bun --external @ereo/core --external tailwindcss --external postcss --external autoprefixer && bun run build:types",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
     "dev": "bun build ./src/index.ts --outdir ./dist --target bun --watch",
     "test": "bun test",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@ereo/core": "^0.1.22"
+    "@ereo/core": "^0.1.23"
   },
   "devDependencies": {
     "@types/bun": "^1.1.0",
     "typescript": "^5.4.0"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
       "optional": true
+    },
+    "autoprefixer": {
+      "optional": true
     }
   }
 }