@kbach/react 0.5.20 → 0.5.22

package/dist/vite-plugin.d.mts

@@ -5,7 +5,7 @@ import { F as FrameworkConfig } from './types-CV5vXnSH.mjs';
  * @kbach/react/vite
  *
  * Vite plugin — scans source files for Kbach className/kb props and generates CSS.
- * Zero setup: just add kbach() to your plugins array. CSS is auto-injected.
+ * Zero setup: just add kbach() to your plugins array.
  * Only generates CSS for classes you actually use (like Tailwind).
  */
 

package/dist/vite-plugin.d.ts

@@ -5,7 +5,7 @@ import { F as FrameworkConfig } from './types-CV5vXnSH.js';
  * @kbach/react/vite
  *
  * Vite plugin — scans source files for Kbach className/kb props and generates CSS.
- * Zero setup: just add kbach() to your plugins array. CSS is auto-injected.
+ * Zero setup: just add kbach() to your plugins array.
  * Only generates CSS for classes you actually use (like Tailwind).
  */
 

package/dist/vite-plugin.js

@@ -3397,7 +3397,6 @@ function kbach(userConfig) {
   const tokenCSS = /* @__PURE__ */ new Map();
   let root = process.cwd();
   let server = null;
-  let isDev = false;
   function processClassString(classStr) {
     let added = false;
     for (const token of classStr.split(/\s+/).filter(Boolean)) {
@@ -3423,42 +3422,82 @@ 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>`);
+  }
   return {
     name: "kbach",
     enforce: "pre",
-    config(_c, env) {
-      isDev = env.command === "serve";
-    },
     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));
       }
     },
-    // ── Primary injection: inject a <style> tag into every HTML response ──────
-    // React Router v8's dev middleware calls server.transformIndexHtml() on
-    // every SSR HTML response, so this hook fires on every page load.
-    transformIndexHtml: {
-      order: "post",
-      handler() {
-        const css = getAllCSS();
-        if (!css) return [];
-        return [{
-          tag: "style",
-          attrs: { "data-kbach": "" },
-          children: css,
-          injectTo: "head"
-        }];
-      }
+    // ── 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;
+        res.write = function(chunk, enc, cb) {
+          if (done) return origWrite(chunk, enc, cb);
+          if (chunk != null) {
+            chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(String(chunk ?? "")));
+          }
+          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(Buffer.isBuffer(chunk) ? chunk : Buffer.from(String(chunk ?? "")));
+          }
+          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();
+      });
     },
-    // ── Secondary: also inject into CSS files (for production builds) ─────────
-    // In production, Vite extracts CSS from JS into separate .css files.
-    // Appending to the user's CSS ensures it ends up in the final CSS bundle.
+    // ── PROD: append to CSS files so they land in the extracted CSS bundle ────
     transform(code, id) {
       const cleanId = id.split("?")[0];
       if (cleanId.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
@@ -3483,7 +3522,7 @@ function kbach(userConfig) {
       try {
         const added = extractFromCode((0, import_fs.readFileSync)(file, "utf-8"));
         if (added && server) {
-          server.hot?.send({ type: "full-reload" }) ?? server.ws?.send({ type: "full-reload" });
+          (server.hot ?? server.ws)?.send({ type: "full-reload" });
         }
       } catch {
       }

package/dist/vite-plugin.mjs

@@ -55,7 +55,6 @@ function kbach(userConfig) {
   const tokenCSS = /* @__PURE__ */ new Map();
   let root = process.cwd();
   let server = null;
-  let isDev = false;
   function processClassString(classStr) {
     let added = false;
     for (const token of classStr.split(/\s+/).filter(Boolean)) {
@@ -81,42 +80,82 @@ 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>`);
+  }
   return {
     name: "kbach",
     enforce: "pre",
-    config(_c, env) {
-      isDev = env.command === "serve";
-    },
     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));
       }
     },
-    // ── Primary injection: inject a <style> tag into every HTML response ──────
-    // React Router v8's dev middleware calls server.transformIndexHtml() on
-    // every SSR HTML response, so this hook fires on every page load.
-    transformIndexHtml: {
-      order: "post",
-      handler() {
-        const css = getAllCSS();
-        if (!css) return [];
-        return [{
-          tag: "style",
-          attrs: { "data-kbach": "" },
-          children: css,
-          injectTo: "head"
-        }];
-      }
+    // ── 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;
+        res.write = function(chunk, enc, cb) {
+          if (done) return origWrite(chunk, enc, cb);
+          if (chunk != null) {
+            chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(String(chunk ?? "")));
+          }
+          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(Buffer.isBuffer(chunk) ? chunk : Buffer.from(String(chunk ?? "")));
+          }
+          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();
+      });
     },
-    // ── Secondary: also inject into CSS files (for production builds) ─────────
-    // In production, Vite extracts CSS from JS into separate .css files.
-    // Appending to the user's CSS ensures it ends up in the final CSS bundle.
+    // ── PROD: append to CSS files so they land in the extracted CSS bundle ────
     transform(code, id) {
       const cleanId = id.split("?")[0];
       if (cleanId.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
@@ -141,7 +180,7 @@ function kbach(userConfig) {
       try {
         const added = extractFromCode(readFileSync(file, "utf-8"));
         if (added && server) {
-          server.hot?.send({ type: "full-reload" }) ?? server.ws?.send({ type: "full-reload" });
+          (server.hot ?? server.ws)?.send({ type: "full-reload" });
         }
       } catch {
       }

package/package.json

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