@kbach/react 0.5.23 → 0.5.24

package/dist/vite-plugin.d.mts

@@ -7,6 +7,13 @@ import { F as FrameworkConfig } from './types-CV5vXnSH.mjs';
  * Vite plugin — scans source files for Kbach className/kb props and generates CSS.
  * Zero setup: just add kbach() to your plugins array.
  * Only generates CSS for classes you actually use (like Tailwind).
+ *
+ * How it works (same as Tailwind):
+ *   1. Scans your source files at startup for className/kb props
+ *   2. Generates CSS rules for only those classes
+ *   3. Appends them to your imported CSS file (e.g. app.css) via Vite's transform
+ *   4. Vite serves the CSS through its normal pipeline → <link rel="stylesheet">
+ *   5. When you add a new class in dev, the CSS file is hot-reloaded
  */
 
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";

package/dist/vite-plugin.d.ts

@@ -7,6 +7,13 @@ import { F as FrameworkConfig } from './types-CV5vXnSH.js';
  * Vite plugin — scans source files for Kbach className/kb props and generates CSS.
  * Zero setup: just add kbach() to your plugins array.
  * Only generates CSS for classes you actually use (like Tailwind).
+ *
+ * How it works (same as Tailwind):
+ *   1. Scans your source files at startup for className/kb props
+ *   2. Generates CSS rules for only those classes
+ *   3. Appends them to your imported CSS file (e.g. app.css) via Vite's transform
+ *   4. Vite serves the CSS through its normal pipeline → <link rel="stylesheet">
+ *   5. When you add a new class in dev, the CSS file is hot-reloaded
  */
 
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";

package/dist/vite-plugin.js

@@ -3395,21 +3395,20 @@ function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
   const tokenCSS = /* @__PURE__ */ new Map();
+  const processedCSSFiles = /* @__PURE__ */ new Set();
   let root = process.cwd();
   let server = null;
-  function processClassString(classStr) {
-    let added = false;
-    for (const token of classStr.split(/\s+/).filter(Boolean)) {
-      if (tokenCSS.has(token)) continue;
-      tokenCSS.set(token, generateClassCSS(token, cfg.theme, cfg.darkMode, screens));
-      added = true;
-    }
-    return added;
+  function processToken(token) {
+    if (tokenCSS.has(token)) return false;
+    tokenCSS.set(token, generateClassCSS(token, cfg.theme, cfg.darkMode, screens));
+    return true;
   }
   function extractFromCode(code) {
     let added = false;
     for (const cls of extractClassStrings(code)) {
-      if (processClassString(cls)) added = true;
+      for (const token of cls.split(/\s+/).filter(Boolean)) {
+        if (processToken(token)) added = true;
+      }
     }
     return added;
   }
@@ -3422,10 +3421,18 @@ function kbach(userConfig) {
     }
     return parts.join("\n");
   }
-  function injectIntoHtml(html) {
-    const css = getAllCSS();
-    if (!css || html.includes("data-kbach")) return html;
-    return html.replace("</head>", `<style data-kbach>${css}</style></head>`);
+  function invalidateCSSModules() {
+    if (!server) return;
+    for (const id of processedCSSFiles) {
+      const mod = server.moduleGraph?.getModuleById(id);
+      if (mod) server.moduleGraph.invalidateModule(mod);
+    }
+    server.hot?.send({ type: "update", updates: [...processedCSSFiles].map((id) => ({
+      type: "js-update",
+      path: id,
+      acceptedPath: id,
+      timestamp: Date.now()
+    })) });
   }
   return {
     name: "kbach",
@@ -3433,87 +3440,35 @@ function kbach(userConfig) {
     configResolved(resolved) {
       root = resolved.root;
     },
+    configureServer(s) {
+      server = s;
+    },
     buildStart() {
       for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
         scanDir((0, import_path.join)(root, dir), (code) => extractFromCode(code));
       }
     },
-    // ── DEV: intercept every HTML response and inject <style data-kbach> ──────
-    // React Router v8 uses chunked streaming SSR — </head> comes in an early
-    // res.write() chunk, not res.end(). Buffer all writes, concatenate at end,
-    // inject CSS into the full HTML, then send in one go.
-    configureServer(s) {
-      server = s;
-      s.middlewares.use((req, res, next) => {
-        const url = req.url ?? "";
-        if (/\.(js|ts|jsx|tsx|css|png|jpg|svg|ico|woff2?|ttf|json|map)(\?|$)/.test(url) || url.startsWith("/@") || url.startsWith("/__")) {
-          return next();
-        }
-        const origWrite = res.write.bind(res);
-        const origEnd = res.end.bind(res);
-        const chunks = [];
-        let done = false;
-        function toBuffer(chunk, enc) {
-          if (chunk == null) return Buffer.alloc(0);
-          if (typeof chunk === "string") {
-            return Buffer.from(chunk, typeof enc === "string" ? enc : "utf-8");
-          }
-          if (ArrayBuffer.isView(chunk)) {
-            return Buffer.from(chunk.buffer, chunk.byteOffset, chunk.byteLength);
-          }
-          if (chunk instanceof ArrayBuffer) return Buffer.from(chunk);
-          return Buffer.from(String(chunk));
-        }
-        res.write = function(chunk, enc, cb) {
-          if (done) return origWrite(chunk, enc, cb);
-          if (chunk != null) chunks.push(toBuffer(chunk, enc));
-          if (typeof enc === "function") enc();
-          else if (typeof cb === "function") cb();
-          return true;
-        };
-        res.end = function(chunk, enc, cb) {
-          done = true;
-          if (typeof chunk === "function") {
-            cb = chunk;
-            chunk = null;
-            enc = null;
-          } else if (typeof enc === "function") {
-            cb = enc;
-            enc = null;
-          }
-          if (chunk != null) chunks.push(toBuffer(chunk, enc));
-          if (chunks.length > 0) {
-            const html = Buffer.concat(chunks).toString("utf-8");
-            if (html.includes("</head>")) {
-              const injected = injectIntoHtml(html);
-              const buf = Buffer.from(injected, "utf-8");
-              try {
-                res.removeHeader("transfer-encoding");
-              } catch {
-              }
-              try {
-                res.setHeader("content-length", buf.length);
-              } catch {
-              }
-              return origEnd(buf, cb);
-            }
-            return origEnd(Buffer.concat(chunks), enc, cb);
-          }
-          return origEnd(void 0, enc, cb);
-        };
-        next();
-      });
-    },
-    // ── PROD: append to CSS files so they land in the extracted CSS bundle ────
+    // ── CSS transform: append generated rules to the user's CSS file ──────────
+    // Works exactly like Tailwind's PostCSS plugin:
+    //   - Your app.css content stays untouched (empty or your own rules)
+    //   - Kbach appends its generated rules to the transform output
+    //   - Vite serves the result via its normal CSS pipeline (<link rel="stylesheet">)
+    //   - In production, it lands in the extracted CSS bundle file
     transform(code, id) {
       const cleanId = id.split("?")[0];
       if (cleanId.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
+        processedCSSFiles.add(cleanId);
         const kbachCSS = getAllCSS();
         if (!kbachCSS) return null;
-        return { code: code + "\n/* kbach */\n" + kbachCSS, map: null };
+        return { code: `${code}
+/* kbach */
+${kbachCSS}`, map: null };
       }
       if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
-        extractFromCode(code);
+        const added = extractFromCode(code);
+        if (added && server && processedCSSFiles.size > 0) {
+          setTimeout(() => invalidateCSSModules(), 0);
+        }
       }
     },
     // ── Virtual module (opt-in explicit import) ───────────────────────────────
@@ -3523,13 +3478,14 @@ function kbach(userConfig) {
     load(id) {
       if (id === RESOLVED_ID) return getAllCSS();
     },
-    // ── HMR: full reload when new classes are added ───────────────────────────
-    handleHotUpdate({ file }) {
+    // ── HMR: invalidate CSS when new classes are found in changed files ───────
+    handleHotUpdate({ file, server: s }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         const added = extractFromCode((0, import_fs.readFileSync)(file, "utf-8"));
-        if (added && server) {
-          (server.hot ?? server.ws)?.send({ type: "full-reload" });
+        if (added) {
+          server = s;
+          invalidateCSSModules();
         }
       } catch {
       }

package/dist/vite-plugin.mjs

@@ -53,21 +53,20 @@ function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
   const tokenCSS = /* @__PURE__ */ new Map();
+  const processedCSSFiles = /* @__PURE__ */ new Set();
   let root = process.cwd();
   let server = null;
-  function processClassString(classStr) {
-    let added = false;
-    for (const token of classStr.split(/\s+/).filter(Boolean)) {
-      if (tokenCSS.has(token)) continue;
-      tokenCSS.set(token, generateClassCSS(token, cfg.theme, cfg.darkMode, screens));
-      added = true;
-    }
-    return added;
+  function processToken(token) {
+    if (tokenCSS.has(token)) return false;
+    tokenCSS.set(token, generateClassCSS(token, cfg.theme, cfg.darkMode, screens));
+    return true;
   }
   function extractFromCode(code) {
     let added = false;
     for (const cls of extractClassStrings(code)) {
-      if (processClassString(cls)) added = true;
+      for (const token of cls.split(/\s+/).filter(Boolean)) {
+        if (processToken(token)) added = true;
+      }
     }
     return added;
   }
@@ -80,10 +79,18 @@ function kbach(userConfig) {
     }
     return parts.join("\n");
   }
-  function injectIntoHtml(html) {
-    const css = getAllCSS();
-    if (!css || html.includes("data-kbach")) return html;
-    return html.replace("</head>", `<style data-kbach>${css}</style></head>`);
+  function invalidateCSSModules() {
+    if (!server) return;
+    for (const id of processedCSSFiles) {
+      const mod = server.moduleGraph?.getModuleById(id);
+      if (mod) server.moduleGraph.invalidateModule(mod);
+    }
+    server.hot?.send({ type: "update", updates: [...processedCSSFiles].map((id) => ({
+      type: "js-update",
+      path: id,
+      acceptedPath: id,
+      timestamp: Date.now()
+    })) });
   }
   return {
     name: "kbach",
@@ -91,87 +98,35 @@ function kbach(userConfig) {
     configResolved(resolved) {
       root = resolved.root;
     },
+    configureServer(s) {
+      server = s;
+    },
     buildStart() {
       for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
         scanDir(join(root, dir), (code) => extractFromCode(code));
       }
     },
-    // ── DEV: intercept every HTML response and inject <style data-kbach> ──────
-    // React Router v8 uses chunked streaming SSR — </head> comes in an early
-    // res.write() chunk, not res.end(). Buffer all writes, concatenate at end,
-    // inject CSS into the full HTML, then send in one go.
-    configureServer(s) {
-      server = s;
-      s.middlewares.use((req, res, next) => {
-        const url = req.url ?? "";
-        if (/\.(js|ts|jsx|tsx|css|png|jpg|svg|ico|woff2?|ttf|json|map)(\?|$)/.test(url) || url.startsWith("/@") || url.startsWith("/__")) {
-          return next();
-        }
-        const origWrite = res.write.bind(res);
-        const origEnd = res.end.bind(res);
-        const chunks = [];
-        let done = false;
-        function toBuffer(chunk, enc) {
-          if (chunk == null) return Buffer.alloc(0);
-          if (typeof chunk === "string") {
-            return Buffer.from(chunk, typeof enc === "string" ? enc : "utf-8");
-          }
-          if (ArrayBuffer.isView(chunk)) {
-            return Buffer.from(chunk.buffer, chunk.byteOffset, chunk.byteLength);
-          }
-          if (chunk instanceof ArrayBuffer) return Buffer.from(chunk);
-          return Buffer.from(String(chunk));
-        }
-        res.write = function(chunk, enc, cb) {
-          if (done) return origWrite(chunk, enc, cb);
-          if (chunk != null) chunks.push(toBuffer(chunk, enc));
-          if (typeof enc === "function") enc();
-          else if (typeof cb === "function") cb();
-          return true;
-        };
-        res.end = function(chunk, enc, cb) {
-          done = true;
-          if (typeof chunk === "function") {
-            cb = chunk;
-            chunk = null;
-            enc = null;
-          } else if (typeof enc === "function") {
-            cb = enc;
-            enc = null;
-          }
-          if (chunk != null) chunks.push(toBuffer(chunk, enc));
-          if (chunks.length > 0) {
-            const html = Buffer.concat(chunks).toString("utf-8");
-            if (html.includes("</head>")) {
-              const injected = injectIntoHtml(html);
-              const buf = Buffer.from(injected, "utf-8");
-              try {
-                res.removeHeader("transfer-encoding");
-              } catch {
-              }
-              try {
-                res.setHeader("content-length", buf.length);
-              } catch {
-              }
-              return origEnd(buf, cb);
-            }
-            return origEnd(Buffer.concat(chunks), enc, cb);
-          }
-          return origEnd(void 0, enc, cb);
-        };
-        next();
-      });
-    },
-    // ── PROD: append to CSS files so they land in the extracted CSS bundle ────
+    // ── CSS transform: append generated rules to the user's CSS file ──────────
+    // Works exactly like Tailwind's PostCSS plugin:
+    //   - Your app.css content stays untouched (empty or your own rules)
+    //   - Kbach appends its generated rules to the transform output
+    //   - Vite serves the result via its normal CSS pipeline (<link rel="stylesheet">)
+    //   - In production, it lands in the extracted CSS bundle file
     transform(code, id) {
       const cleanId = id.split("?")[0];
       if (cleanId.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
+        processedCSSFiles.add(cleanId);
         const kbachCSS = getAllCSS();
         if (!kbachCSS) return null;
-        return { code: code + "\n/* kbach */\n" + kbachCSS, map: null };
+        return { code: `${code}
+/* kbach */
+${kbachCSS}`, map: null };
       }
       if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
-        extractFromCode(code);
+        const added = extractFromCode(code);
+        if (added && server && processedCSSFiles.size > 0) {
+          setTimeout(() => invalidateCSSModules(), 0);
+        }
       }
     },
     // ── Virtual module (opt-in explicit import) ───────────────────────────────
@@ -181,13 +136,14 @@ function kbach(userConfig) {
     load(id) {
       if (id === RESOLVED_ID) return getAllCSS();
     },
-    // ── HMR: full reload when new classes are added ───────────────────────────
-    handleHotUpdate({ file }) {
+    // ── HMR: invalidate CSS when new classes are found in changed files ───────
+    handleHotUpdate({ file, server: s }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         const added = extractFromCode(readFileSync(file, "utf-8"));
-        if (added && server) {
-          (server.hot ?? server.ws)?.send({ type: "full-reload" });
+        if (added) {
+          server = s;
+          invalidateCSSModules();
         }
       } catch {
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.5.23",
+  "version": "0.5.24",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",