@kbach/react 1.0.0-beta.2 → 1.0.0-beta.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +204 -16
- package/dist/chunk-43FOLRQA.mjs +234 -0
- package/dist/{chunk-PAJ6KHDB.mjs → chunk-5EXGGZMA.mjs} +1 -1
- package/dist/{chunk-ZQJKL2MV.mjs → chunk-BJEOK2VK.mjs} +18 -4
- package/dist/{chunk-N5HCQIBB.mjs → chunk-OVKVZA7B.mjs} +21 -1
- package/dist/chunk-QYTXXF22.mjs +690 -0
- package/dist/{config-BQ_b-qxF.d.mts → config-N74_lKa0.d.mts} +33 -2
- package/dist/{config-BQ_b-qxF.d.ts → config-N74_lKa0.d.ts} +33 -2
- package/dist/index.d.mts +67 -2
- package/dist/index.d.ts +67 -2
- package/dist/index.js +157 -69
- package/dist/index.mjs +55 -106
- package/dist/jsx-dev-runtime.js +30 -4
- package/dist/jsx-dev-runtime.mjs +3 -3
- package/dist/jsx-runtime.js +30 -4
- package/dist/jsx-runtime.mjs +3 -3
- package/dist/postcss-plugin.d.mts +36 -0
- package/dist/postcss-plugin.d.ts +36 -0
- package/dist/postcss-plugin.js +1253 -0
- package/dist/postcss-plugin.mjs +84 -0
- package/dist/vite-plugin.d.mts +94 -6
- package/dist/vite-plugin.d.ts +94 -6
- package/dist/vite-plugin.js +498 -910
- package/dist/vite-plugin.mjs +15 -1198
- package/package.json +26 -4
- package/dist/chunk-NKR3PSWO.mjs +0 -115
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DEFAULT_SCAN_DIRS,
|
|
3
|
+
bold,
|
|
4
|
+
createKbachStaticCssEngine,
|
|
5
|
+
gray,
|
|
6
|
+
highlight,
|
|
7
|
+
kbachTag,
|
|
8
|
+
resolveEffectiveTheme
|
|
9
|
+
} from "./chunk-QYTXXF22.mjs";
|
|
10
|
+
import "./chunk-43FOLRQA.mjs";
|
|
11
|
+
import "./chunk-OVKVZA7B.mjs";
|
|
12
|
+
|
|
13
|
+
// src/postcss-plugin/index.ts
|
|
14
|
+
import postcss from "postcss";
|
|
15
|
+
import { resolve as resolvePath } from "path";
|
|
16
|
+
var KBACH_START_TEXT = "kbach:start";
|
|
17
|
+
var KBACH_END_TEXT = "kbach:end";
|
|
18
|
+
function isKbachMarker(node, text) {
|
|
19
|
+
return !!node && node.type === "comment" && node.text === text;
|
|
20
|
+
}
|
|
21
|
+
function spliceGeneratedCss(root, generatedCss) {
|
|
22
|
+
const nodes = root.nodes;
|
|
23
|
+
let startIdx = -1;
|
|
24
|
+
let endIdx = -1;
|
|
25
|
+
for (let i = 0; i < nodes.length; i++) {
|
|
26
|
+
if (startIdx === -1 && isKbachMarker(nodes[i], KBACH_START_TEXT)) {
|
|
27
|
+
startIdx = i;
|
|
28
|
+
continue;
|
|
29
|
+
}
|
|
30
|
+
if (startIdx !== -1 && isKbachMarker(nodes[i], KBACH_END_TEXT)) {
|
|
31
|
+
endIdx = i;
|
|
32
|
+
break;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
if (startIdx === -1 || endIdx === -1) {
|
|
36
|
+
console.warn(
|
|
37
|
+
`${kbachTag()} ${gray("No")} ${highlight("/* kbach:start */")}${gray(" / ")}${highlight("/* kbach:end */")} ${gray("marker pair found in this file \u2014 nothing was generated.")}
|
|
38
|
+
${bold("fix:")} ${gray("add both markers to the file this plugin processes (same convention the Vite plugin's generated kbach.css uses).")}`
|
|
39
|
+
);
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
for (const stale of nodes.slice(startIdx + 1, endIdx)) stale.remove();
|
|
43
|
+
const parsed = postcss.parse(generatedCss);
|
|
44
|
+
const newNodes = [...parsed.nodes];
|
|
45
|
+
let after = nodes[startIdx];
|
|
46
|
+
for (const node of newNodes) {
|
|
47
|
+
root.insertAfter(after, node);
|
|
48
|
+
after = node;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
function kbachPostcss(options = {}) {
|
|
52
|
+
return {
|
|
53
|
+
postcssPlugin: "kbach",
|
|
54
|
+
async Once(root, { result }) {
|
|
55
|
+
const projectRoot = options.root ?? process.cwd();
|
|
56
|
+
const theme = await resolveEffectiveTheme(projectRoot, options);
|
|
57
|
+
const includeDirs = options.include ?? DEFAULT_SCAN_DIRS;
|
|
58
|
+
const safelist = options.safelist ?? [];
|
|
59
|
+
const engine = createKbachStaticCssEngine({
|
|
60
|
+
root: projectRoot,
|
|
61
|
+
theme,
|
|
62
|
+
themeJson: JSON.stringify(theme),
|
|
63
|
+
includeDirs,
|
|
64
|
+
safelist
|
|
65
|
+
});
|
|
66
|
+
engine.scanProjectCssSelectorsOnce();
|
|
67
|
+
engine.initialScan();
|
|
68
|
+
engine.processSafelist();
|
|
69
|
+
for (const dir of includeDirs) {
|
|
70
|
+
result.messages.push({
|
|
71
|
+
type: "dir-dependency",
|
|
72
|
+
plugin: "kbach",
|
|
73
|
+
dir: resolvePath(projectRoot, dir),
|
|
74
|
+
glob: "**/*"
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
spliceGeneratedCss(root, engine.generateCSS());
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
kbachPostcss.postcss = true;
|
|
82
|
+
export {
|
|
83
|
+
kbachPostcss as default
|
|
84
|
+
};
|
package/dist/vite-plugin.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Plugin } from 'vite';
|
|
2
|
-
import { T as ThemeConfig, K as KbachConfig } from './config-
|
|
2
|
+
import { T as ThemeConfig, K as KbachConfig } from './config-N74_lKa0.mjs';
|
|
3
3
|
|
|
4
4
|
interface KbachPluginOptions {
|
|
5
5
|
/** Defaults to the same defaultTheme the runtime uses — pass your own to keep both in sync. */
|
|
@@ -27,16 +27,104 @@ interface KbachPluginOptions {
|
|
|
27
27
|
* purpose as Tailwind's `safelist`.
|
|
28
28
|
*/
|
|
29
29
|
safelist?: string[];
|
|
30
|
+
/**
|
|
31
|
+
* Path to the `kbach:start`/`kbach:end` marker file, relative to Vite's
|
|
32
|
+
* resolved root. Not needed for the common case — `kbach()` auto-detects
|
|
33
|
+
* it (see `findMainCSSFile`'s own doc comment) by finding wherever you
|
|
34
|
+
* actually put the two marker comments, regardless of whether your
|
|
35
|
+
* project's source root is `src/`, `app/` (React Router v7's framework
|
|
36
|
+
* mode), or anything else in `include`. Set this explicitly only to
|
|
37
|
+
* disambiguate a genuinely unusual layout (a marker file outside every
|
|
38
|
+
* `include` directory, or more than one candidate present at once).
|
|
39
|
+
*/
|
|
40
|
+
cssFile?: string;
|
|
30
41
|
}
|
|
42
|
+
/**
|
|
43
|
+
* Finds where to read/write the `kbach:start`/`kbach:end` marker file,
|
|
44
|
+
* with no configuration required for the common case:
|
|
45
|
+
*
|
|
46
|
+
* 1. An explicit `cssFile` always wins (the one supported escape hatch).
|
|
47
|
+
* 2. Otherwise, look for a `kbach.css` already containing BOTH markers in
|
|
48
|
+
* each `include` directory (in order) and the project root itself —
|
|
49
|
+
* wherever you actually created it is where this plugin keeps using it,
|
|
50
|
+
* regardless of which framework convention (`src/`, `app/`, ...) that
|
|
51
|
+
* is. This is what makes React Router v7's framework mode (`app/
|
|
52
|
+
* kbach.css`) and a plain Vite app (`src/kbach.css`) both "just work"
|
|
53
|
+
* with the exact same `kbach()` call — no per-framework option needed.
|
|
54
|
+
* 3. No marked file exists yet (first run in a fresh project) — pick the
|
|
55
|
+
* first `include` directory that already exists as a real directory on
|
|
56
|
+
* disk, so the file this plugin is about to CREATE lands somewhere that
|
|
57
|
+
* won't need its own parent directory made up out of nothing.
|
|
58
|
+
* 4. Nothing in `include` exists yet either (a genuinely empty project,
|
|
59
|
+
* scaffolded before its first source file) — fall back to the first
|
|
60
|
+
* configured `include` entry regardless; `writeMainCSSFile` (below)
|
|
61
|
+
* creates its parent directory unconditionally, so this never crashes
|
|
62
|
+
* even here.
|
|
63
|
+
*/
|
|
64
|
+
declare function findMainCSSFile(root: string, includeDirs: string[], explicitCssFile?: string): string;
|
|
65
|
+
declare const DEFAULT_SCAN_DIRS: string[];
|
|
66
|
+
declare const CSS_SYNC_DEBOUNCE_MS = 50;
|
|
67
|
+
/**
|
|
68
|
+
* Auto-discovers a `kbach.config.*` file at the project root — `undefined`
|
|
69
|
+
* if none exists (the common case: most projects have no customization at
|
|
70
|
+
* all, so this is a silent, expected no-op, not a warning).
|
|
71
|
+
*
|
|
72
|
+
* Checks three filenames, in order, mirroring Node's own module-format
|
|
73
|
+
* conventions rather than assuming one: `kbach.config.cjs` (always
|
|
74
|
+
* CommonJS, `module.exports = {...}` — the one unambiguous choice
|
|
75
|
+
* regardless of the project's package.json) and `kbach.config.mjs`
|
|
76
|
+
* (always real ESM, `export default {...}`) are tried first, each loaded
|
|
77
|
+
* the one way that's guaranteed correct for that extension. Only the bare
|
|
78
|
+
* `kbach.config.js` — whose actual meaning depends on the nearest
|
|
79
|
+
* package.json's `"type"` field, exactly like every other `.js` file in
|
|
80
|
+
* the project — needs the fallback below: try `require()` first (correct
|
|
81
|
+
* for `"type": "commonjs"`/no `"type"` field, the more common case), and
|
|
82
|
+
* only on a failure that specifically indicates an ESM/CJS mismatch (see
|
|
83
|
+
* `isEsmRequireFailure`), retry via a real dynamic `import()` instead. A
|
|
84
|
+
* genuine syntax error in an otherwise-correctly-formatted config file is
|
|
85
|
+
* NOT caught here — it propagates as a real, actionable build failure,
|
|
86
|
+
* rather than being silently swallowed into a confusing second attempt.
|
|
87
|
+
*
|
|
88
|
+
* `require()` is built via `createRequire(root)` rather than
|
|
89
|
+
* `createRequire(import.meta.url)` — this file is written as ESM source,
|
|
90
|
+
* but tsup's CJS build output has no real `import.meta.url` (esbuild
|
|
91
|
+
* leaves it `undefined` there), which would make `createRequire` throw for
|
|
92
|
+
* anyone consuming this package's `require('@kbach/react/vite')` entry.
|
|
93
|
+
* `root` works as `createRequire`'s base in either build: it's always an
|
|
94
|
+
* absolute, already-`existsSync`-validated directory, and `require()`
|
|
95
|
+
* given an already-absolute `path` doesn't consult the base for
|
|
96
|
+
* resolution anyway — the base only matters for a relative specifier,
|
|
97
|
+
* which this never passes it. `import()` needs a real `file://` URL, not
|
|
98
|
+
* a bare Windows path (`C:\...` isn't a valid ESM specifier) — hence
|
|
99
|
+
* `pathToFileURL`.
|
|
100
|
+
*/
|
|
101
|
+
declare function loadConfigFile(root: string): Promise<KbachConfig | undefined>;
|
|
102
|
+
/**
|
|
103
|
+
* Resolves the theme to use, applying the same "explicit theme/config
|
|
104
|
+
* always wins over kbach.config.js auto-discovery" precedence both
|
|
105
|
+
* vite-plugin and postcss-plugin need identically.
|
|
106
|
+
*/
|
|
107
|
+
declare function resolveEffectiveTheme(root: string, options: {
|
|
108
|
+
theme?: ThemeConfig;
|
|
109
|
+
config?: KbachConfig;
|
|
110
|
+
}): Promise<ThemeConfig>;
|
|
31
111
|
/**
|
|
32
112
|
* Build-time static CSS generation for Vite — scans source files for
|
|
33
113
|
* Kbach class strings, resolves them through the same Rust engine the
|
|
34
114
|
* runtime uses (via the Node-target WASM build, see wasmNode.ts), and
|
|
35
|
-
* writes a real kbach.css.
|
|
36
|
-
* `
|
|
37
|
-
*
|
|
38
|
-
*
|
|
115
|
+
* writes a real kbach.css. Auto-detects WHERE that file is (or should be
|
|
116
|
+
* created) via `findMainCSSFile` — no per-framework config needed for
|
|
117
|
+
* `src/`, `app/` (React Router v7's framework mode), or any other
|
|
118
|
+
* `include` convention; create a file with `/* kbach:start *\/` / `/*
|
|
119
|
+
* kbach:end *\/` markers wherever your project's source actually lives
|
|
120
|
+
* and this plugin finds it there.
|
|
121
|
+
*
|
|
122
|
+
* The actual scanning/resolution/generation logic lives in
|
|
123
|
+
* `staticCss/engine.ts`, shared with `postcss-plugin/index.ts` (Next.js/
|
|
124
|
+
* webpack/Turbopack) — this file is now just the Vite-specific wiring:
|
|
125
|
+
* plugin lifecycle hooks, the dev-server watcher, and the debounced
|
|
126
|
+
* file-write.
|
|
39
127
|
*/
|
|
40
128
|
declare function kbach(options?: KbachPluginOptions): Plugin;
|
|
41
129
|
|
|
42
|
-
export { type KbachPluginOptions, kbach };
|
|
130
|
+
export { CSS_SYNC_DEBOUNCE_MS, DEFAULT_SCAN_DIRS, type KbachPluginOptions, findMainCSSFile, kbach, loadConfigFile, resolveEffectiveTheme };
|
package/dist/vite-plugin.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Plugin } from 'vite';
|
|
2
|
-
import { T as ThemeConfig, K as KbachConfig } from './config-
|
|
2
|
+
import { T as ThemeConfig, K as KbachConfig } from './config-N74_lKa0.js';
|
|
3
3
|
|
|
4
4
|
interface KbachPluginOptions {
|
|
5
5
|
/** Defaults to the same defaultTheme the runtime uses — pass your own to keep both in sync. */
|
|
@@ -27,16 +27,104 @@ interface KbachPluginOptions {
|
|
|
27
27
|
* purpose as Tailwind's `safelist`.
|
|
28
28
|
*/
|
|
29
29
|
safelist?: string[];
|
|
30
|
+
/**
|
|
31
|
+
* Path to the `kbach:start`/`kbach:end` marker file, relative to Vite's
|
|
32
|
+
* resolved root. Not needed for the common case — `kbach()` auto-detects
|
|
33
|
+
* it (see `findMainCSSFile`'s own doc comment) by finding wherever you
|
|
34
|
+
* actually put the two marker comments, regardless of whether your
|
|
35
|
+
* project's source root is `src/`, `app/` (React Router v7's framework
|
|
36
|
+
* mode), or anything else in `include`. Set this explicitly only to
|
|
37
|
+
* disambiguate a genuinely unusual layout (a marker file outside every
|
|
38
|
+
* `include` directory, or more than one candidate present at once).
|
|
39
|
+
*/
|
|
40
|
+
cssFile?: string;
|
|
30
41
|
}
|
|
42
|
+
/**
|
|
43
|
+
* Finds where to read/write the `kbach:start`/`kbach:end` marker file,
|
|
44
|
+
* with no configuration required for the common case:
|
|
45
|
+
*
|
|
46
|
+
* 1. An explicit `cssFile` always wins (the one supported escape hatch).
|
|
47
|
+
* 2. Otherwise, look for a `kbach.css` already containing BOTH markers in
|
|
48
|
+
* each `include` directory (in order) and the project root itself —
|
|
49
|
+
* wherever you actually created it is where this plugin keeps using it,
|
|
50
|
+
* regardless of which framework convention (`src/`, `app/`, ...) that
|
|
51
|
+
* is. This is what makes React Router v7's framework mode (`app/
|
|
52
|
+
* kbach.css`) and a plain Vite app (`src/kbach.css`) both "just work"
|
|
53
|
+
* with the exact same `kbach()` call — no per-framework option needed.
|
|
54
|
+
* 3. No marked file exists yet (first run in a fresh project) — pick the
|
|
55
|
+
* first `include` directory that already exists as a real directory on
|
|
56
|
+
* disk, so the file this plugin is about to CREATE lands somewhere that
|
|
57
|
+
* won't need its own parent directory made up out of nothing.
|
|
58
|
+
* 4. Nothing in `include` exists yet either (a genuinely empty project,
|
|
59
|
+
* scaffolded before its first source file) — fall back to the first
|
|
60
|
+
* configured `include` entry regardless; `writeMainCSSFile` (below)
|
|
61
|
+
* creates its parent directory unconditionally, so this never crashes
|
|
62
|
+
* even here.
|
|
63
|
+
*/
|
|
64
|
+
declare function findMainCSSFile(root: string, includeDirs: string[], explicitCssFile?: string): string;
|
|
65
|
+
declare const DEFAULT_SCAN_DIRS: string[];
|
|
66
|
+
declare const CSS_SYNC_DEBOUNCE_MS = 50;
|
|
67
|
+
/**
|
|
68
|
+
* Auto-discovers a `kbach.config.*` file at the project root — `undefined`
|
|
69
|
+
* if none exists (the common case: most projects have no customization at
|
|
70
|
+
* all, so this is a silent, expected no-op, not a warning).
|
|
71
|
+
*
|
|
72
|
+
* Checks three filenames, in order, mirroring Node's own module-format
|
|
73
|
+
* conventions rather than assuming one: `kbach.config.cjs` (always
|
|
74
|
+
* CommonJS, `module.exports = {...}` — the one unambiguous choice
|
|
75
|
+
* regardless of the project's package.json) and `kbach.config.mjs`
|
|
76
|
+
* (always real ESM, `export default {...}`) are tried first, each loaded
|
|
77
|
+
* the one way that's guaranteed correct for that extension. Only the bare
|
|
78
|
+
* `kbach.config.js` — whose actual meaning depends on the nearest
|
|
79
|
+
* package.json's `"type"` field, exactly like every other `.js` file in
|
|
80
|
+
* the project — needs the fallback below: try `require()` first (correct
|
|
81
|
+
* for `"type": "commonjs"`/no `"type"` field, the more common case), and
|
|
82
|
+
* only on a failure that specifically indicates an ESM/CJS mismatch (see
|
|
83
|
+
* `isEsmRequireFailure`), retry via a real dynamic `import()` instead. A
|
|
84
|
+
* genuine syntax error in an otherwise-correctly-formatted config file is
|
|
85
|
+
* NOT caught here — it propagates as a real, actionable build failure,
|
|
86
|
+
* rather than being silently swallowed into a confusing second attempt.
|
|
87
|
+
*
|
|
88
|
+
* `require()` is built via `createRequire(root)` rather than
|
|
89
|
+
* `createRequire(import.meta.url)` — this file is written as ESM source,
|
|
90
|
+
* but tsup's CJS build output has no real `import.meta.url` (esbuild
|
|
91
|
+
* leaves it `undefined` there), which would make `createRequire` throw for
|
|
92
|
+
* anyone consuming this package's `require('@kbach/react/vite')` entry.
|
|
93
|
+
* `root` works as `createRequire`'s base in either build: it's always an
|
|
94
|
+
* absolute, already-`existsSync`-validated directory, and `require()`
|
|
95
|
+
* given an already-absolute `path` doesn't consult the base for
|
|
96
|
+
* resolution anyway — the base only matters for a relative specifier,
|
|
97
|
+
* which this never passes it. `import()` needs a real `file://` URL, not
|
|
98
|
+
* a bare Windows path (`C:\...` isn't a valid ESM specifier) — hence
|
|
99
|
+
* `pathToFileURL`.
|
|
100
|
+
*/
|
|
101
|
+
declare function loadConfigFile(root: string): Promise<KbachConfig | undefined>;
|
|
102
|
+
/**
|
|
103
|
+
* Resolves the theme to use, applying the same "explicit theme/config
|
|
104
|
+
* always wins over kbach.config.js auto-discovery" precedence both
|
|
105
|
+
* vite-plugin and postcss-plugin need identically.
|
|
106
|
+
*/
|
|
107
|
+
declare function resolveEffectiveTheme(root: string, options: {
|
|
108
|
+
theme?: ThemeConfig;
|
|
109
|
+
config?: KbachConfig;
|
|
110
|
+
}): Promise<ThemeConfig>;
|
|
31
111
|
/**
|
|
32
112
|
* Build-time static CSS generation for Vite — scans source files for
|
|
33
113
|
* Kbach class strings, resolves them through the same Rust engine the
|
|
34
114
|
* runtime uses (via the Node-target WASM build, see wasmNode.ts), and
|
|
35
|
-
* writes a real kbach.css.
|
|
36
|
-
* `
|
|
37
|
-
*
|
|
38
|
-
*
|
|
115
|
+
* writes a real kbach.css. Auto-detects WHERE that file is (or should be
|
|
116
|
+
* created) via `findMainCSSFile` — no per-framework config needed for
|
|
117
|
+
* `src/`, `app/` (React Router v7's framework mode), or any other
|
|
118
|
+
* `include` convention; create a file with `/* kbach:start *\/` / `/*
|
|
119
|
+
* kbach:end *\/` markers wherever your project's source actually lives
|
|
120
|
+
* and this plugin finds it there.
|
|
121
|
+
*
|
|
122
|
+
* The actual scanning/resolution/generation logic lives in
|
|
123
|
+
* `staticCss/engine.ts`, shared with `postcss-plugin/index.ts` (Next.js/
|
|
124
|
+
* webpack/Turbopack) — this file is now just the Vite-specific wiring:
|
|
125
|
+
* plugin lifecycle hooks, the dev-server watcher, and the debounced
|
|
126
|
+
* file-write.
|
|
39
127
|
*/
|
|
40
128
|
declare function kbach(options?: KbachPluginOptions): Plugin;
|
|
41
129
|
|
|
42
|
-
export { type KbachPluginOptions, kbach };
|
|
130
|
+
export { CSS_SYNC_DEBOUNCE_MS, DEFAULT_SCAN_DIRS, type KbachPluginOptions, findMainCSSFile, kbach, loadConfigFile, resolveEffectiveTheme };
|