@kbach/react 0.5.19 → 0.5.21

package/dist/vite-plugin.d.mts

@@ -4,15 +4,9 @@ import { F as FrameworkConfig } from './types-CV5vXnSH.mjs';
 /**
  * @kbach/react/vite
  *
- * Vite plugin — scans your source files for Kbach className/kb props and
- * appends the generated CSS to any CSS file already imported in your project.
- *
- * Zero setup beyond adding the plugin to vite.config.ts:
- *
- *   import { kbach } from '@kbach/react/vite';
- *   plugins: [kbach()]
- *
- * CSS is only generated for the classes you actually use (like Tailwind).
+ * 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).
  */
 
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";

package/dist/vite-plugin.d.ts

@@ -4,15 +4,9 @@ import { F as FrameworkConfig } from './types-CV5vXnSH.js';
 /**
  * @kbach/react/vite
  *
- * Vite plugin — scans your source files for Kbach className/kb props and
- * appends the generated CSS to any CSS file already imported in your project.
- *
- * Zero setup beyond adding the plugin to vite.config.ts:
- *
- *   import { kbach } from '@kbach/react/vite';
- *   plugins: [kbach()]
- *
- * CSS is only generated for the classes you actually use (like Tailwind).
+ * 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).
  */
 
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";

package/dist/vite-plugin.js

@@ -3395,7 +3395,6 @@ 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) {
@@ -3423,12 +3422,10 @@ function kbach(userConfig) {
     }
     return parts.join("\n");
   }
-  function invalidateCSSModules() {
-    if (!server) return;
-    for (const file of processedCSSFiles) {
-      const mod = server.moduleGraph.getModuleByFile(file);
-      if (mod) server.moduleGraph.invalidateModule(mod);
-    }
+  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",
@@ -3436,40 +3433,68 @@ 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));
       }
     },
-    resolveId(id) {
-      if (id === VIRTUAL_ID) return RESOLVED_ID;
-    },
-    load(id) {
-      if (id === RESOLVED_ID) return getAllCSS();
+    // ── 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();
+      });
     },
+    // ── 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")) {
-        processedCSSFiles.add(cleanId);
         const kbachCSS = getAllCSS();
         if (!kbachCSS) return null;
-        return { code: code + "\n/* kbach utilities */\n" + kbachCSS, map: null };
+        return { code: code + "\n/* kbach */\n" + kbachCSS, map: null };
       }
-      if (/\.(tsx?|jsx?)$/.test(id) && !id.includes("node_modules")) {
-        const added = extractFromCode(code);
-        if (added && server && processedCSSFiles.size > 0) {
-          setTimeout(invalidateCSSModules, 0);
-        }
+      if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
+        extractFromCode(code);
       }
     },
+    // ── Virtual module (opt-in explicit import) ───────────────────────────────
+    resolveId(id) {
+      if (id === VIRTUAL_ID) return RESOLVED_ID;
+    },
+    load(id) {
+      if (id === RESOLVED_ID) return getAllCSS();
+    },
+    // ── HMR: full reload when new classes are added ───────────────────────────
     handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         const added = extractFromCode((0, import_fs.readFileSync)(file, "utf-8"));
-        if (added) invalidateCSSModules();
+        if (added && server) {
+          (server.hot ?? server.ws)?.send({ type: "full-reload" });
+        }
       } catch {
       }
     }

package/dist/vite-plugin.mjs

@@ -53,7 +53,6 @@ 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) {
@@ -81,12 +80,10 @@ function kbach(userConfig) {
     }
     return parts.join("\n");
   }
-  function invalidateCSSModules() {
-    if (!server) return;
-    for (const file of processedCSSFiles) {
-      const mod = server.moduleGraph.getModuleByFile(file);
-      if (mod) server.moduleGraph.invalidateModule(mod);
-    }
+  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",
@@ -94,40 +91,68 @@ 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));
       }
     },
-    resolveId(id) {
-      if (id === VIRTUAL_ID) return RESOLVED_ID;
-    },
-    load(id) {
-      if (id === RESOLVED_ID) return getAllCSS();
+    // ── 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();
+      });
     },
+    // ── 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")) {
-        processedCSSFiles.add(cleanId);
         const kbachCSS = getAllCSS();
         if (!kbachCSS) return null;
-        return { code: code + "\n/* kbach utilities */\n" + kbachCSS, map: null };
+        return { code: code + "\n/* kbach */\n" + kbachCSS, map: null };
       }
-      if (/\.(tsx?|jsx?)$/.test(id) && !id.includes("node_modules")) {
-        const added = extractFromCode(code);
-        if (added && server && processedCSSFiles.size > 0) {
-          setTimeout(invalidateCSSModules, 0);
-        }
+      if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
+        extractFromCode(code);
       }
     },
+    // ── Virtual module (opt-in explicit import) ───────────────────────────────
+    resolveId(id) {
+      if (id === VIRTUAL_ID) return RESOLVED_ID;
+    },
+    load(id) {
+      if (id === RESOLVED_ID) return getAllCSS();
+    },
+    // ── HMR: full reload when new classes are added ───────────────────────────
     handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         const added = extractFromCode(readFileSync(file, "utf-8"));
-        if (added) invalidateCSSModules();
+        if (added && server) {
+          (server.hot ?? server.ws)?.send({ type: "full-reload" });
+        }
       } catch {
       }
     }

package/package.json

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