@kbach/react 0.5.23 → 0.5.25

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

@@ -3350,6 +3350,35 @@ var customVariants = new Proxy(
 // src/vite-plugin.ts
 var VIRTUAL_ID = "virtual:kbach/styles.css";
 var RESOLVED_ID = "\0virtual:kbach/styles.css";
+var KBACH_START = "/* kbach:start */";
+var KBACH_END = "/* kbach:end */";
+function findMainCSSFile(root) {
+  const candidates = [
+    (0, import_path.join)(root, "app", "app.css"),
+    (0, import_path.join)(root, "src", "index.css"),
+    (0, import_path.join)(root, "src", "app.css"),
+    (0, import_path.join)(root, "app", "index.css")
+  ];
+  for (const c of candidates) {
+    if ((0, import_fs.existsSync)(c)) return c;
+  }
+  return null;
+}
+function writeKbachToFile(filePath, css) {
+  let existing = "";
+  try {
+    existing = (0, import_fs.readFileSync)(filePath, "utf-8");
+  } catch {
+  }
+  const block = `${KBACH_START}
+${css}
+${KBACH_END}`;
+  const re = new RegExp(`${KBACH_START}[\\s\\S]*?${KBACH_END}`);
+  const next = existing.includes(KBACH_START) ? existing.replace(re, block) : existing ? `${existing}
+
+${block}` : block;
+  if (next !== existing) (0, import_fs.writeFileSync)(filePath, next, "utf-8");
+}
 function toNumericScreens(screens) {
   const out = {};
   for (const [k, v] of Object.entries(screens)) {
@@ -3397,19 +3426,18 @@ function kbach(userConfig) {
   const tokenCSS = /* @__PURE__ */ new Map();
   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;
+  let mainCSSFile = null;
+  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,96 +3450,24 @@ 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",
     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));
       }
+      mainCSSFile = findMainCSSFile(root);
+      if (mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
     },
-    // ── 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 ────
     transform(code, 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 */\n" + kbachCSS, map: null };
-      }
       if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
         extractFromCode(code);
       }
@@ -3523,14 +3479,14 @@ function kbach(userConfig) {
     load(id) {
       if (id === RESOLVED_ID) return getAllCSS();
     },
-    // ── HMR: full reload when new classes are added ───────────────────────────
+    // ── HMR: write updated CSS to file when new classes are found ────────────
+    // Vite's own file watcher detects the change and hot-reloads the CSS —
+    // no manual invalidation needed.
     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 && server) {
-          (server.hot ?? server.ws)?.send({ type: "full-reload" });
-        }
+        if (added && mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
       } catch {
       }
     }

package/dist/vite-plugin.mjs

@@ -4,10 +4,39 @@ import {
 } from "./chunk-SOBLKZGE.mjs";
 
 // src/vite-plugin.ts
-import { readFileSync, readdirSync, statSync } from "fs";
+import { readFileSync, writeFileSync, existsSync, readdirSync, statSync } from "fs";
 import { join } from "path";
 var VIRTUAL_ID = "virtual:kbach/styles.css";
 var RESOLVED_ID = "\0virtual:kbach/styles.css";
+var KBACH_START = "/* kbach:start */";
+var KBACH_END = "/* kbach:end */";
+function findMainCSSFile(root) {
+  const candidates = [
+    join(root, "app", "app.css"),
+    join(root, "src", "index.css"),
+    join(root, "src", "app.css"),
+    join(root, "app", "index.css")
+  ];
+  for (const c of candidates) {
+    if (existsSync(c)) return c;
+  }
+  return null;
+}
+function writeKbachToFile(filePath, css) {
+  let existing = "";
+  try {
+    existing = readFileSync(filePath, "utf-8");
+  } catch {
+  }
+  const block = `${KBACH_START}
+${css}
+${KBACH_END}`;
+  const re = new RegExp(`${KBACH_START}[\\s\\S]*?${KBACH_END}`);
+  const next = existing.includes(KBACH_START) ? existing.replace(re, block) : existing ? `${existing}
+
+${block}` : block;
+  if (next !== existing) writeFileSync(filePath, next, "utf-8");
+}
 function toNumericScreens(screens) {
   const out = {};
   for (const [k, v] of Object.entries(screens)) {
@@ -55,19 +84,18 @@ function kbach(userConfig) {
   const tokenCSS = /* @__PURE__ */ new Map();
   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;
+  let mainCSSFile = null;
+  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,96 +108,24 @@ 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",
     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));
       }
+      mainCSSFile = findMainCSSFile(root);
+      if (mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
     },
-    // ── 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 ────
     transform(code, 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 */\n" + kbachCSS, map: null };
-      }
       if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
         extractFromCode(code);
       }
@@ -181,14 +137,14 @@ function kbach(userConfig) {
     load(id) {
       if (id === RESOLVED_ID) return getAllCSS();
     },
-    // ── HMR: full reload when new classes are added ───────────────────────────
+    // ── HMR: write updated CSS to file when new classes are found ────────────
+    // Vite's own file watcher detects the change and hot-reloads the CSS —
+    // no manual invalidation needed.
     handleHotUpdate({ file }) {
       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 && mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
       } catch {
       }
     }

package/package.json

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