@kbach/react 0.5.20 → 0.5.21

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,53 @@ 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 HTTP response and inject <style data-kbach> ──────
+    // React Router v8's SSR middleware generates HTML without going through
+    // transformIndexHtml, so we intercept at the Node.js response level.
+    configureServer(s) {
+      server = s;
+      s.middlewares.use((_req, res, next) => {
+        const origEnd = res.end.bind(res);
+        res.end = function(chunk, encoding, cb) {
+          try {
+            if (chunk != null) {
+              const str = Buffer.isBuffer(chunk) ? chunk.toString("utf-8") : chunk;
+              if (typeof str === "string" && str.includes("</head>")) {
+                const injected = injectIntoHtml(str);
+                if (injected !== str) {
+                  chunk = Buffer.isBuffer(chunk) ? Buffer.from(injected, "utf-8") : injected;
+                  if (res.hasHeader("content-length")) {
+                    res.setHeader("content-length", Buffer.byteLength(
+                      Buffer.isBuffer(chunk) ? chunk : String(chunk)
+                    ));
+                  }
+                }
+              }
+            }
+          } catch {
+          }
+          return origEnd(chunk, encoding, 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 +3493,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,53 @@ 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 HTTP response and inject <style data-kbach> ──────
+    // React Router v8's SSR middleware generates HTML without going through
+    // transformIndexHtml, so we intercept at the Node.js response level.
+    configureServer(s) {
+      server = s;
+      s.middlewares.use((_req, res, next) => {
+        const origEnd = res.end.bind(res);
+        res.end = function(chunk, encoding, cb) {
+          try {
+            if (chunk != null) {
+              const str = Buffer.isBuffer(chunk) ? chunk.toString("utf-8") : chunk;
+              if (typeof str === "string" && str.includes("</head>")) {
+                const injected = injectIntoHtml(str);
+                if (injected !== str) {
+                  chunk = Buffer.isBuffer(chunk) ? Buffer.from(injected, "utf-8") : injected;
+                  if (res.hasHeader("content-length")) {
+                    res.setHeader("content-length", Buffer.byteLength(
+                      Buffer.isBuffer(chunk) ? chunk : String(chunk)
+                    ));
+                  }
+                }
+              }
+            }
+          } catch {
+          }
+          return origEnd(chunk, encoding, 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 +151,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.21",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",