@kbach/react 0.5.37 → 0.5.40

package/dist/vite-plugin.mjs

@@ -3,7 +3,7 @@ import {
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-J2I5YSC5.mjs";
+} from "./chunk-IZ3W6G3V.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, existsSync, readdirSync, statSync } from "fs";
@@ -31,12 +31,18 @@ function classifyToken(token) {
   return "Utilities";
 }
 function buildColorVarMap(theme, usedCSS) {
+  const usedHexValues = /* @__PURE__ */ new Set();
+  const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
+  let hm;
+  while ((hm = hexRe.exec(usedCSS)) !== null) usedHexValues.add(hm[0].toLowerCase());
   const map = /* @__PURE__ */ new Map();
   for (const [name, shades] of Object.entries(theme.colors ?? {})) {
     const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
     for (const [fullName, val] of entries) {
-      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val) && usedCSS.includes(val)) {
-        map.set(val, `--color-${fullName}`);
+      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val)) {
+        if (usedHexValues.has(val.toLowerCase())) {
+          map.set(val, `--color-${fullName}`);
+        }
       }
     }
   }
@@ -116,6 +122,37 @@ function toNumericScreens(screens) {
   }
   return out;
 }
+function extractClassStrings(code) {
+  const found = /* @__PURE__ */ new Set();
+  const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
+  let m;
+  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[1], found);
+  const exprLiteralRe = /(?:className|kb)=\{["'`]([^"'`}]+)["'`]\}/g;
+  while ((m = exprLiteralRe.exec(code)) !== null) pushTokens(m[1], found);
+  const ternaryBlockRe = /(?:className|kb)=\{([^}]{1,500})\}/g;
+  while ((m = ternaryBlockRe.exec(code)) !== null) {
+    const block = m[1];
+    const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
+    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+  }
+  const clsxRe = /(?:clsx|cn|classnames)\(([^)]{1,1000})\)/g;
+  while ((m = clsxRe.exec(code)) !== null) {
+    const block = m[1];
+    const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
+    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+  }
+  const templateRe = /`([^`]{1,2000})`/g;
+  while ((m = templateRe.exec(code)) !== null) {
+    const staticParts = m[1].replace(/\$\{[^}]*\}/g, " ");
+    pushTokens(staticParts, found);
+  }
+  return [...found];
+}
+function pushTokens(str, into) {
+  for (const tok of splitClassTokens(str)) {
+    if (tok) into.add(tok);
+  }
+}
 function scanDir(dir, onFile) {
   try {
     for (const entry of readdirSync(dir)) {
@@ -124,41 +161,49 @@ function scanDir(dir, onFile) {
       try {
         const st = statSync(full);
         if (st.isDirectory()) scanDir(full, onFile);
-        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(readFileSync(full, "utf-8"));
+        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, readFileSync(full, "utf-8"));
       } catch {
       }
     }
   } catch {
   }
 }
-function extractClassStrings(code) {
-  const found = [];
-  const re = /(?:className|kb)=(?:["']([^"']+)["']|\{["']([^"']+)["']\})/g;
-  let m;
-  while ((m = re.exec(code)) !== null) {
-    const val = m[1] ?? m[2];
-    if (val) found.push(val);
-  }
-  return found;
-}
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
   let root = process.cwd();
   let mainCSSFile = null;
-  function generateCSS() {
-    const tokenCSS = /* @__PURE__ */ new Map();
+  const fileTokens = /* @__PURE__ */ new Map();
+  const tokenCSS = /* @__PURE__ */ new Map();
+  function processFile(filePath, code) {
+    const tokens = /* @__PURE__ */ new Set();
+    for (const cls of extractClassStrings(code)) {
+      for (const tok of splitClassTokens(cls)) {
+        tokens.add(tok);
+        if (!tokenCSS.has(tok)) {
+          tokenCSS.set(tok, generateClassCSS(tok, cfg.theme, cfg.darkMode, screens));
+        }
+      }
+    }
+    fileTokens.set(filePath, tokens);
+  }
+  function buildTokenCSSView() {
+    const active = /* @__PURE__ */ new Set();
+    for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
+    const view = /* @__PURE__ */ new Map();
+    for (const tok of active) {
+      const css = tokenCSS.get(tok);
+      if (css !== void 0) view.set(tok, css);
+    }
+    return view;
+  }
+  function initialScan() {
     for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
-      scanDir(join(root, dir), (code) => {
-        for (const cls of extractClassStrings(code))
-          for (const token of splitClassTokens(cls))
-            if (!tokenCSS.has(token)) {
-              const css = generateClassCSS(token, cfg.theme, cfg.darkMode, screens);
-              tokenCSS.set(token, css);
-            }
-      });
+      scanDir(join(root, dir), processFile);
     }
-    return formatKbachCSS(tokenCSS, cfg.theme);
+  }
+  function generateCSS() {
+    return formatKbachCSS(buildTokenCSSView(), cfg.theme);
   }
   return {
     name: "kbach",
@@ -168,10 +213,16 @@ function kbach(userConfig) {
     },
     buildStart() {
       mainCSSFile = findMainCSSFile(root);
+      initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
     handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
+      try {
+        processFile(file, readFileSync(file, "utf-8"));
+      } catch {
+        fileTokens.delete(file);
+      }
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.5.37",
+  "version": "0.5.40",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -72,6 +72,8 @@
   "files": [
     "dist",
     "scripts",
-    "kbach-react.md"
+    "types.d.ts",
+    "kbach-react.md",
+    "README.md"
   ]
 }

package/types.d.ts

@@ -0,0 +1 @@
+/// <reference path="./src/kbach-env.d.ts" />

package/dist/types-CV5vXnSH.d.mts

@@ -1,70 +0,0 @@
-type ThemeMode = 'light' | 'dark' | 'system';
-interface StyleValue {
-    [key: string]: string | number | undefined | null | StyleValue | unknown[];
-}
-interface ParsedClass {
-    /** The original class string, e.g. "dark:hover:bg-[#fff]" */
-    original: string;
-    /** Up to 3 modifier prefixes, e.g. ['dark', 'hover'] */
-    modifiers: string[];
-    /** Whether a leading `-` was present for negative values */
-    negative: boolean;
-    /** Whether a leading `!` was present — applies !important to all CSS declarations */
-    important: boolean;
-    /** The utility name, e.g. 'bg', 'p', 'text' */
-    utility: string;
-    /** The resolved value, e.g. 'white', '#fff', '4' */
-    value: string;
-    /** Whether the value was specified with bracket notation [value] */
-    isArbitrary: boolean;
-}
-interface ResolvedStyle {
-    /** Base styles applied unconditionally */
-    base?: StyleValue;
-    /** Styles keyed by modifier or modifier combo, e.g. 'dark', 'hover', 'dark:hover' */
-    [modifierKey: string]: StyleValue | undefined;
-}
-type ColorShades = Record<string, string>;
-type ThemeColors = Record<string, string | ColorShades>;
-type ThemeSpacing = Record<string, number | string>;
-interface ThemeConfig {
-    colors: ThemeColors;
-    spacing: ThemeSpacing;
-    fontSize: Record<string, number | string>;
-    fontFamily: Record<string, string | string[]>;
-    fontWeight: Record<string, string | number>;
-    borderRadius: Record<string, number | string>;
-    borderWidth: Record<string, number>;
-    opacity: Record<string, number>;
-    lineHeight: Record<string, number | string>;
-    letterSpacing: Record<string, number | string>;
-    zIndex: Record<string, number | string>;
-    flex: Record<string, number>;
-    shadow: Record<string, StyleValue>;
-    screens: Record<string, string | number>;
-    [key: string]: unknown;
-}
-type DarkMode = 'attribute' | 'class' | 'media';
-interface PluginAPI {
-    addUtility(name: string, styles: StyleValue): void;
-    addVariant(name: string, selector: string): void;
-    theme(path: string, defaultValue?: unknown): unknown;
-    e(className: string): string;
-}
-interface FrameworkConfig {
-    darkMode?: DarkMode;
-    theme?: Partial<ThemeConfig>;
-    /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
-    extend?: {
-        theme?: Partial<ThemeConfig>;
-    } & Partial<ThemeConfig>;
-    plugins?: Array<(api: PluginAPI) => void>;
-    content?: string[];
-}
-interface ResolvedConfig {
-    darkMode: DarkMode;
-    theme: ThemeConfig;
-    plugins: Array<(api: PluginAPI) => void>;
-}
-
-export type { FrameworkConfig as F, ParsedClass as P, ResolvedStyle as R, StyleValue as S, ThemeColors as T, ThemeConfig as a, ResolvedConfig as b, ThemeMode as c, PluginAPI as d };

package/dist/types-CV5vXnSH.d.ts

@@ -1,70 +0,0 @@
-type ThemeMode = 'light' | 'dark' | 'system';
-interface StyleValue {
-    [key: string]: string | number | undefined | null | StyleValue | unknown[];
-}
-interface ParsedClass {
-    /** The original class string, e.g. "dark:hover:bg-[#fff]" */
-    original: string;
-    /** Up to 3 modifier prefixes, e.g. ['dark', 'hover'] */
-    modifiers: string[];
-    /** Whether a leading `-` was present for negative values */
-    negative: boolean;
-    /** Whether a leading `!` was present — applies !important to all CSS declarations */
-    important: boolean;
-    /** The utility name, e.g. 'bg', 'p', 'text' */
-    utility: string;
-    /** The resolved value, e.g. 'white', '#fff', '4' */
-    value: string;
-    /** Whether the value was specified with bracket notation [value] */
-    isArbitrary: boolean;
-}
-interface ResolvedStyle {
-    /** Base styles applied unconditionally */
-    base?: StyleValue;
-    /** Styles keyed by modifier or modifier combo, e.g. 'dark', 'hover', 'dark:hover' */
-    [modifierKey: string]: StyleValue | undefined;
-}
-type ColorShades = Record<string, string>;
-type ThemeColors = Record<string, string | ColorShades>;
-type ThemeSpacing = Record<string, number | string>;
-interface ThemeConfig {
-    colors: ThemeColors;
-    spacing: ThemeSpacing;
-    fontSize: Record<string, number | string>;
-    fontFamily: Record<string, string | string[]>;
-    fontWeight: Record<string, string | number>;
-    borderRadius: Record<string, number | string>;
-    borderWidth: Record<string, number>;
-    opacity: Record<string, number>;
-    lineHeight: Record<string, number | string>;
-    letterSpacing: Record<string, number | string>;
-    zIndex: Record<string, number | string>;
-    flex: Record<string, number>;
-    shadow: Record<string, StyleValue>;
-    screens: Record<string, string | number>;
-    [key: string]: unknown;
-}
-type DarkMode = 'attribute' | 'class' | 'media';
-interface PluginAPI {
-    addUtility(name: string, styles: StyleValue): void;
-    addVariant(name: string, selector: string): void;
-    theme(path: string, defaultValue?: unknown): unknown;
-    e(className: string): string;
-}
-interface FrameworkConfig {
-    darkMode?: DarkMode;
-    theme?: Partial<ThemeConfig>;
-    /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
-    extend?: {
-        theme?: Partial<ThemeConfig>;
-    } & Partial<ThemeConfig>;
-    plugins?: Array<(api: PluginAPI) => void>;
-    content?: string[];
-}
-interface ResolvedConfig {
-    darkMode: DarkMode;
-    theme: ThemeConfig;
-    plugins: Array<(api: PluginAPI) => void>;
-}
-
-export type { FrameworkConfig as F, ParsedClass as P, ResolvedStyle as R, StyleValue as S, ThemeColors as T, ThemeConfig as a, ResolvedConfig as b, ThemeMode as c, PluginAPI as d };