@kbach/react 0.5.16 → 0.5.17

package/dist/vite-plugin.d.mts

@@ -4,15 +4,15 @@ import { F as FrameworkConfig } from './types-CV5vXnSH.mjs';
 /**
  * @kbach/react/vite
  *
- * Vite plugin that scans source files for Kbach className/kb props and
- * generates a static CSS stylesheet — no JSX runtime replacement needed.
+ * 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:
  *
- * Usage in vite.config.ts:
  *   import { kbach } from '@kbach/react/vite';
  *   plugins: [kbach()]
  *
- * Import the generated stylesheet once in your app entry (e.g. app/root.tsx):
- *   import 'virtual:kbach/styles.css';
+ * CSS is only generated for the classes you actually use (like Tailwind).
  */
 
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";

package/dist/vite-plugin.d.ts

@@ -4,15 +4,15 @@ import { F as FrameworkConfig } from './types-CV5vXnSH.js';
 /**
  * @kbach/react/vite
  *
- * Vite plugin that scans source files for Kbach className/kb props and
- * generates a static CSS stylesheet — no JSX runtime replacement needed.
+ * 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:
  *
- * Usage in vite.config.ts:
  *   import { kbach } from '@kbach/react/vite';
  *   plugins: [kbach()]
  *
- * Import the generated stylesheet once in your app entry (e.g. app/root.tsx):
- *   import 'virtual:kbach/styles.css';
+ * CSS is only generated for the classes you actually use (like Tailwind).
  */
 
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";

package/dist/vite-plugin.js

@@ -3337,7 +3337,7 @@ var customVariants = new Proxy(
 
 // src/vite-plugin.ts
 var VIRTUAL_ID = "virtual:kbach/styles.css";
-var RESOLVED_ID = "\0" + VIRTUAL_ID;
+var RESOLVED_ID = "\0virtual:kbach/styles.css";
 function toNumericScreens(screens) {
   const out = {};
   for (const [k, v] of Object.entries(screens)) {
@@ -3383,19 +3383,18 @@ function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
   const cssMap = /* @__PURE__ */ new Map();
+  const processedCSSFiles = /* @__PURE__ */ new Set();
   let root = process.cwd();
-  let isDev = false;
+  let server = null;
   function processClassString(classStr) {
-    if (cssMap.has(classStr)) return;
+    if (cssMap.has(classStr)) return false;
     cssMap.set(classStr, generateClassCSS(classStr, cfg.theme, cfg.darkMode, screens));
+    return true;
   }
   function extractFromCode(code) {
     let added = false;
     for (const cls of extractClassStrings(code)) {
-      if (!cssMap.has(cls)) {
-        processClassString(cls);
-        added = true;
-      }
+      if (processClassString(cls)) added = true;
     }
     return added;
   }
@@ -3408,17 +3407,24 @@ 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;
     },
+    configureServer(s) {
+      server = s;
+    },
     buildStart() {
-      for (const dir of ["src", "app", "pages", "components"]) {
+      for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
         scanDir((0, import_path.join)(root, dir), (code) => extractFromCode(code));
       }
     },
@@ -3429,23 +3435,24 @@ function kbach(userConfig) {
       if (id === RESOLVED_ID) return getAllCSS();
     },
     transform(code, id) {
-      if (id.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(id)) return;
-      const added = extractFromCode(code);
-      if (isDev && added) {
+      if (id.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
+        processedCSSFiles.add(id);
+        const kbachCSS = getAllCSS();
+        if (!kbachCSS) return null;
+        return { code: code + "\n/* kbach utilities */\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);
+        }
       }
     },
-    handleHotUpdate({ file, server }) {
+    handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
-        const code = (0, import_fs.readFileSync)(file, "utf-8");
-        const added = extractFromCode(code);
-        if (added) {
-          const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
-          if (mod) {
-            server.moduleGraph.invalidateModule(mod);
-            return [mod];
-          }
-        }
+        const added = extractFromCode((0, import_fs.readFileSync)(file, "utf-8"));
+        if (added) invalidateCSSModules();
       } catch {
       }
     }

package/dist/vite-plugin.mjs

@@ -7,7 +7,7 @@ import {
 import { readFileSync, readdirSync, statSync } from "fs";
 import { join } from "path";
 var VIRTUAL_ID = "virtual:kbach/styles.css";
-var RESOLVED_ID = "\0" + VIRTUAL_ID;
+var RESOLVED_ID = "\0virtual:kbach/styles.css";
 function toNumericScreens(screens) {
   const out = {};
   for (const [k, v] of Object.entries(screens)) {
@@ -53,19 +53,18 @@ function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
   const cssMap = /* @__PURE__ */ new Map();
+  const processedCSSFiles = /* @__PURE__ */ new Set();
   let root = process.cwd();
-  let isDev = false;
+  let server = null;
   function processClassString(classStr) {
-    if (cssMap.has(classStr)) return;
+    if (cssMap.has(classStr)) return false;
     cssMap.set(classStr, generateClassCSS(classStr, cfg.theme, cfg.darkMode, screens));
+    return true;
   }
   function extractFromCode(code) {
     let added = false;
     for (const cls of extractClassStrings(code)) {
-      if (!cssMap.has(cls)) {
-        processClassString(cls);
-        added = true;
-      }
+      if (processClassString(cls)) added = true;
     }
     return added;
   }
@@ -78,17 +77,24 @@ 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;
     },
+    configureServer(s) {
+      server = s;
+    },
     buildStart() {
-      for (const dir of ["src", "app", "pages", "components"]) {
+      for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
         scanDir(join(root, dir), (code) => extractFromCode(code));
       }
     },
@@ -99,23 +105,24 @@ function kbach(userConfig) {
       if (id === RESOLVED_ID) return getAllCSS();
     },
     transform(code, id) {
-      if (id.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(id)) return;
-      const added = extractFromCode(code);
-      if (isDev && added) {
+      if (id.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
+        processedCSSFiles.add(id);
+        const kbachCSS = getAllCSS();
+        if (!kbachCSS) return null;
+        return { code: code + "\n/* kbach utilities */\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);
+        }
       }
     },
-    handleHotUpdate({ file, server }) {
+    handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
-        const code = readFileSync(file, "utf-8");
-        const added = extractFromCode(code);
-        if (added) {
-          const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
-          if (mod) {
-            server.moduleGraph.invalidateModule(mod);
-            return [mod];
-          }
-        }
+        const added = extractFromCode(readFileSync(file, "utf-8"));
+        if (added) invalidateCSSModules();
       } catch {
       }
     }

package/package.json

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