@kbach/react 1.0.0-beta.6 → 1.0.0-beta.7

package/README.md

@@ -62,11 +62,14 @@ first render, same as before.
 
 ## React Router
 
-Nothing beyond the Quick Start above — React Router is a client-side
-routing library with no build-tool coupling of its own, so it layers on
-top of the exact same Vite + `kbach.css` setup with zero extra
-configuration, whether you're on the framework mode (`createBrowserRouter`)
-or the classic `<BrowserRouter>` component form:
+React Router is a client-side routing library with no build-tool coupling
+of its own, so it layers on top of the exact same Vite + `kbach.css` setup
+either way — but which "either way" depends on which of React Router's two
+genuinely different modes you're using.
+
+**Library mode** (you call `createRoot` yourself — `createBrowserRouter` +
+`<RouterProvider>`, or the classic `<BrowserRouter>` component): needs
+nothing beyond the Quick Start above.
 
 ```tsx
 // main.tsx
@@ -84,10 +87,40 @@ const router = createBrowserRouter([
 createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />);
 ```
 
-Every route's own components use `className` exactly like any other
-component — routing has no effect on how Kbach resolves classes, since
-resolution already happened at build time, before routing even enters the
-picture.
+**Framework mode** (`npx create-react-router@latest` — file-based routing
+under `app/`, its own Vite plugin, SSR by default): two things differ from
+the Quick Start, both because this mode owns your project's structure and
+render lifecycle, not you:
+
+1. Its convention is `app/`, not `src/` — pass `cssFile` so the plugin
+   writes to `app/kbach.css` instead of the (here, nonexistent) default:
+   ```ts
+   // vite.config.ts
+   import { reactRouter } from '@react-router/dev/vite';
+   import { kbach } from '@kbach/react/vite';
+   import { defineConfig } from 'vite';
+
+   export default defineConfig({
+     plugins: [kbach({ cssFile: 'app/kbach.css' }), reactRouter()],
+   });
+   ```
+2. **Don't call `createRoot` yourself in `app/root.tsx`** — the framework's
+   own generated client/server entry points already do this; `root.tsx`
+   only ever *exports* a `Layout`/default component. Adding your own
+   `createRoot(...).render(...)` at that file's top level runs during SSR
+   too, where `document` doesn't exist, and crashes the build immediately.
+   `app/root.tsx` needs only:
+   ```tsx
+   import './kbach.css';
+   export default function App() {
+     return <Outlet />;
+   }
+   ```
+
+Either mode: every route's own components use `className` exactly like any
+other component — routing has no effect on how Kbach resolves classes,
+since resolution already happened at build time, before routing even
+enters the picture.
 
 ## Next.js
 

package/dist/{chunk-GPLCUNFX.mjs → chunk-P4CQSYIL.mjs}

@@ -1260,7 +1260,7 @@ function kbach(options = {}) {
   let theme = defaultTheme;
   let engine = createKbachStaticCssEngine({ root, theme, themeJson: JSON.stringify(theme), includeDirs, safelist });
   function mainCSSFile() {
-    return join4(root, "src", "kbach.css");
+    return join4(root, options.cssFile ?? "src/kbach.css");
   }
   function classNameHintsFile() {
     return join4(root, ".kbach", "kbach-classnames.d.ts");

package/dist/postcss-plugin.mjs

@@ -2,7 +2,7 @@ import {
   DEFAULT_SCAN_DIRS,
   createKbachStaticCssEngine,
   resolveEffectiveTheme
-} from "./chunk-GPLCUNFX.mjs";
+} from "./chunk-P4CQSYIL.mjs";
 import "./chunk-NKR3PSWO.mjs";
 import "./chunk-N5HCQIBB.mjs";
 

package/dist/vite-plugin.d.mts

@@ -27,6 +27,17 @@ interface KbachPluginOptions {
      * purpose as Tailwind's `safelist`.
      */
     safelist?: string[];
+    /**
+     * Path to the `kbach:start`/`kbach:end` marker file, relative to Vite's
+     * resolved root. Defaults to `"src/kbach.css"` — override this for any
+     * project whose source root isn't `src/`: React Router v7's framework
+     * mode (`app/kbach.css`), a Pages-Router-style Next.js app using this
+     * plugin directly (`styles/kbach.css`), or any other convention. Getting
+     * this wrong fails loudly at build start (`ENOENT` writing the file's
+     * parent directory) rather than silently generating nothing, but it's
+     * still worth setting explicitly if your project doesn't use `src/`.
+     */
+    cssFile?: string;
 }
 declare const DEFAULT_SCAN_DIRS: string[];
 declare const CSS_SYNC_DEBOUNCE_MS = 50;
@@ -62,10 +73,11 @@ declare function resolveEffectiveTheme(root: string, options: {
  * Build-time static CSS generation for Vite — scans source files for
  * Kbach class strings, resolves them through the same Rust engine the
  * runtime uses (via the Node-target WASM build, see wasmNode.ts), and
- * writes a real kbach.css. Simplified vs old-kbach's version: expects
- * `src/kbach.css` to exist at a fixed conventional path (create it with
- * `/* kbach:start *\/` / `/* kbach:end *\/` markers) rather than scanning
- * the whole project for a file named kbach.css.
+ * writes a real kbach.css. Simplified vs old-kbach's version: expects a
+ * marker file to already exist at a fixed conventional path — `src/
+ * kbach.css` by default, override via `cssFile` for any other source root
+ * (create it with `/* kbach:start *\/` / `/* kbach:end *\/` markers)
+ * rather than scanning the whole project for a file named kbach.css.
  *
  * The actual scanning/resolution/generation logic lives in
  * `staticCss/engine.ts`, shared with `postcss-plugin/index.ts` (Next.js/

package/dist/vite-plugin.d.ts

@@ -27,6 +27,17 @@ interface KbachPluginOptions {
      * purpose as Tailwind's `safelist`.
      */
     safelist?: string[];
+    /**
+     * Path to the `kbach:start`/`kbach:end` marker file, relative to Vite's
+     * resolved root. Defaults to `"src/kbach.css"` — override this for any
+     * project whose source root isn't `src/`: React Router v7's framework
+     * mode (`app/kbach.css`), a Pages-Router-style Next.js app using this
+     * plugin directly (`styles/kbach.css`), or any other convention. Getting
+     * this wrong fails loudly at build start (`ENOENT` writing the file's
+     * parent directory) rather than silently generating nothing, but it's
+     * still worth setting explicitly if your project doesn't use `src/`.
+     */
+    cssFile?: string;
 }
 declare const DEFAULT_SCAN_DIRS: string[];
 declare const CSS_SYNC_DEBOUNCE_MS = 50;
@@ -62,10 +73,11 @@ declare function resolveEffectiveTheme(root: string, options: {
  * Build-time static CSS generation for Vite — scans source files for
  * Kbach class strings, resolves them through the same Rust engine the
  * runtime uses (via the Node-target WASM build, see wasmNode.ts), and
- * writes a real kbach.css. Simplified vs old-kbach's version: expects
- * `src/kbach.css` to exist at a fixed conventional path (create it with
- * `/* kbach:start *\/` / `/* kbach:end *\/` markers) rather than scanning
- * the whole project for a file named kbach.css.
+ * writes a real kbach.css. Simplified vs old-kbach's version: expects a
+ * marker file to already exist at a fixed conventional path — `src/
+ * kbach.css` by default, override via `cssFile` for any other source root
+ * (create it with `/* kbach:start *\/` / `/* kbach:end *\/` markers)
+ * rather than scanning the whole project for a file named kbach.css.
  *
  * The actual scanning/resolution/generation logic lives in
  * `staticCss/engine.ts`, shared with `postcss-plugin/index.ts` (Next.js/

package/dist/vite-plugin.js

@@ -1779,7 +1779,7 @@ function kbach(options = {}) {
   let theme = defaultTheme;
   let engine = createKbachStaticCssEngine({ root, theme, themeJson: JSON.stringify(theme), includeDirs, safelist });
   function mainCSSFile() {
-    return (0, import_path4.join)(root, "src", "kbach.css");
+    return (0, import_path4.join)(root, options.cssFile ?? "src/kbach.css");
   }
   function classNameHintsFile() {
     return (0, import_path4.join)(root, ".kbach", "kbach-classnames.d.ts");

package/dist/vite-plugin.mjs

@@ -4,7 +4,7 @@ import {
   kbach,
   loadConfigFile,
   resolveEffectiveTheme
-} from "./chunk-GPLCUNFX.mjs";
+} from "./chunk-P4CQSYIL.mjs";
 import "./chunk-NKR3PSWO.mjs";
 import "./chunk-N5HCQIBB.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "description": "A utility-first styling engine for React, powered by a real Rust/WASM core — Tailwind CSS v4 feature parity with Kbach's own color palette.",
   "keywords": ["css", "react", "tailwind", "utility-first", "wasm", "styling"],
   "license": "MIT",