@kbach/react 0.5.24 → 0.5.25

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)) {
@@ -3395,9 +3424,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 mainCSSFile = null;
   function processToken(token) {
     if (tokenCSS.has(token)) return false;
     tokenCSS.set(token, generateClassCSS(token, cfg.theme, cfg.darkMode, screens));
@@ -3421,19 +3450,6 @@ function kbach(userConfig) {
     }
     return parts.join("\n");
   }
-  function invalidateCSSModules() {
-    if (!server) return;
-    for (const id of processedCSSFiles) {
-      const mod = server.moduleGraph?.getModuleById(id);
-      if (mod) server.moduleGraph.invalidateModule(mod);
-    }
-    server.hot?.send({ type: "update", updates: [...processedCSSFiles].map((id) => ({
-      type: "js-update",
-      path: id,
-      acceptedPath: id,
-      timestamp: Date.now()
-    })) });
-  }
   return {
     name: "kbach",
     enforce: "pre",
@@ -3447,28 +3463,13 @@ function kbach(userConfig) {
       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());
     },
-    // ── CSS transform: append generated rules to the user's CSS file ──────────
-    // Works exactly like Tailwind's PostCSS plugin:
-    //   - Your app.css content stays untouched (empty or your own rules)
-    //   - Kbach appends its generated rules to the transform output
-    //   - Vite serves the result via its normal CSS pipeline (<link rel="stylesheet">)
-    //   - In production, it lands in the extracted CSS bundle file
     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}
-/* kbach */
-${kbachCSS}`, map: null };
-      }
       if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
-        const added = extractFromCode(code);
-        if (added && server && processedCSSFiles.size > 0) {
-          setTimeout(() => invalidateCSSModules(), 0);
-        }
+        extractFromCode(code);
       }
     },
     // ── Virtual module (opt-in explicit import) ───────────────────────────────
@@ -3478,15 +3479,14 @@ ${kbachCSS}`, map: null };
     load(id) {
       if (id === RESOLVED_ID) return getAllCSS();
     },
-    // ── HMR: invalidate CSS when new classes are found in changed files ───────
-    handleHotUpdate({ file, server: s }) {
+    // ── 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 = s;
-          invalidateCSSModules();
-        }
+        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)) {
@@ -53,9 +82,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 mainCSSFile = null;
   function processToken(token) {
     if (tokenCSS.has(token)) return false;
     tokenCSS.set(token, generateClassCSS(token, cfg.theme, cfg.darkMode, screens));
@@ -79,19 +108,6 @@ function kbach(userConfig) {
     }
     return parts.join("\n");
   }
-  function invalidateCSSModules() {
-    if (!server) return;
-    for (const id of processedCSSFiles) {
-      const mod = server.moduleGraph?.getModuleById(id);
-      if (mod) server.moduleGraph.invalidateModule(mod);
-    }
-    server.hot?.send({ type: "update", updates: [...processedCSSFiles].map((id) => ({
-      type: "js-update",
-      path: id,
-      acceptedPath: id,
-      timestamp: Date.now()
-    })) });
-  }
   return {
     name: "kbach",
     enforce: "pre",
@@ -105,28 +121,13 @@ function kbach(userConfig) {
       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());
     },
-    // ── CSS transform: append generated rules to the user's CSS file ──────────
-    // Works exactly like Tailwind's PostCSS plugin:
-    //   - Your app.css content stays untouched (empty or your own rules)
-    //   - Kbach appends its generated rules to the transform output
-    //   - Vite serves the result via its normal CSS pipeline (<link rel="stylesheet">)
-    //   - In production, it lands in the extracted CSS bundle file
     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}
-/* kbach */
-${kbachCSS}`, map: null };
-      }
       if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
-        const added = extractFromCode(code);
-        if (added && server && processedCSSFiles.size > 0) {
-          setTimeout(() => invalidateCSSModules(), 0);
-        }
+        extractFromCode(code);
       }
     },
     // ── Virtual module (opt-in explicit import) ───────────────────────────────
@@ -136,15 +137,14 @@ ${kbachCSS}`, map: null };
     load(id) {
       if (id === RESOLVED_ID) return getAllCSS();
     },
-    // ── HMR: invalidate CSS when new classes are found in changed files ───────
-    handleHotUpdate({ file, server: s }) {
+    // ── 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 = s;
-          invalidateCSSModules();
-        }
+        if (added && mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
       } catch {
       }
     }

package/package.json

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