@kbach/react 0.5.18 → 0.5.20

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. CSS is auto-injected.
+ * 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. CSS is auto-injected.
+ * Only generates CSS for classes you actually use (like Tailwind).
  */
 
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";

package/dist/vite-plugin.js

@@ -3395,9 +3395,9 @@ 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;
+  let isDev = false;
   function processClassString(classStr) {
     let added = false;
     for (const token of classStr.split(/\s+/).filter(Boolean)) {
@@ -3423,16 +3423,12 @@ 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);
-    }
-  }
   return {
     name: "kbach",
     enforce: "pre",
+    config(_c, env) {
+      isDev = env.command === "serve";
+    },
     configResolved(resolved) {
       root = resolved.root;
     },
@@ -3444,31 +3440,51 @@ function kbach(userConfig) {
         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();
+    // ── 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"
+        }];
+      }
     },
+    // ── 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.
     transform(code, id) {
-      if (id.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
-        processedCSSFiles.add(id);
+      const cleanId = id.split("?")[0];
+      if (cleanId.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
         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?.send({ type: "full-reload" }) ?? server.ws?.send({ type: "full-reload" });
+        }
       } catch {
       }
     }

package/dist/vite-plugin.mjs

@@ -53,9 +53,9 @@ 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;
+  let isDev = false;
   function processClassString(classStr) {
     let added = false;
     for (const token of classStr.split(/\s+/).filter(Boolean)) {
@@ -81,16 +81,12 @@ 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);
-    }
-  }
   return {
     name: "kbach",
     enforce: "pre",
+    config(_c, env) {
+      isDev = env.command === "serve";
+    },
     configResolved(resolved) {
       root = resolved.root;
     },
@@ -102,31 +98,51 @@ function kbach(userConfig) {
         scanDir(join(root, dir), (code) => extractFromCode(code));
       }
     },
-    resolveId(id) {
-      if (id === VIRTUAL_ID) return RESOLVED_ID;
-    },
-    load(id) {
-      if (id === RESOLVED_ID) return getAllCSS();
+    // ── 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"
+        }];
+      }
     },
+    // ── 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.
     transform(code, id) {
-      if (id.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
-        processedCSSFiles.add(id);
+      const cleanId = id.split("?")[0];
+      if (cleanId.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
         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?.send({ type: "full-reload" }) ?? server.ws?.send({ type: "full-reload" });
+        }
       } catch {
       }
     }

package/package.json

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