@bamboocss/vite 1.21.0 → 1.23.0

package/dist/index.mjs

@@ -1,12 +1,96 @@
+import { Builder, loadConfigAndCreateContext } from "@bamboocss/node";
+import { logger } from "@bamboocss/logger";
 import { resolveTsPathPattern } from "@bamboocss/config/ts-path";
 import { box, maybeBoxNode, unbox } from "@bamboocss/extractor";
 import MagicString from "magic-string";
 import { Node, SyntaxKind, VariableDeclarationKind } from "ts-morph";
-import { Recipes } from "@bamboocss/core";
-import { compact, createCssUncached, createMergeCss, getSlotCompoundVariant, memo, withoutSpace } from "@bamboocss/shared";
+import { Recipes, classFormatter } from "@bamboocss/core";
+import { compact, createCssUncached, createMergeCss, getRecipeClassNames, getRecipeIdentity, getSlotCompoundVariant, memo, withoutSpace } from "@bamboocss/shared";
 import { resolve } from "node:path";
-import { logger } from "@bamboocss/logger";
-import { loadConfigAndCreateContext } from "@bamboocss/node";
+//#region src/css.ts
+/**
+* What a project imports to get the stylesheet.
+*
+* Spelled with a `.css` extension because that is how vite decides what a module is: the
+* id is all it has for a module with no file behind it, so `virtual:bamboo` would be
+* bundled as javascript and injected as a script.
+*/
+const VIRTUAL_CSS_ID = "virtual:bamboo.css";
+/**
+* Rollup's convention for a module with no file: a leading NUL tells every other plugin
+* not to try reading it off disk.
+*/
+const RESOLVED_ID = `\0${VIRTUAL_CSS_ID}`;
+/**
+* Serve bamboo's stylesheet as a virtual module, in dev and in build.
+*
+* This is the integration itself, not an optimisation: without it nothing emits css and
+* the generated `styled-system` runtime names classes no rule exists for.
+*
+* A virtual module rather than a file written to disk, because vite already owns the two
+* things a file would have to reimplement. In dev it injects css over the websocket and
+* replaces it in place, so an edit repaints without reloading; in build it hashes the
+* content into the asset graph and lets the bundler decide where it lands. Writing
+* `styles.css` and asking the project to import it means the build reads a file the same
+* process just wrote, which is a race on any watch rebuild.
+*/
+const bamboocssCss = (options = {}) => {
+	const { configPath, cwd } = options;
+	const builder = new Builder();
+	let server;
+	/**
+	* Serialised, because both `load` and the watcher can reach it and `Builder` keeps one
+	* context. Two overlapping passes would extract into the same encoder and emit the
+	* stylesheet twice over.
+	*/
+	let pending;
+	const build = async () => {
+		await builder.setup({
+			configPath,
+			cwd
+		});
+		await builder.emit();
+		builder.extract();
+		return builder.toCss({ layerParams: true });
+	};
+	const generate = () => {
+		pending = Promise.resolve(pending).catch(() => void 0).then(build);
+		return pending;
+	};
+	return {
+		name: "bamboocss:css",
+		resolveId(id) {
+			if (id === "virtual:bamboo.css") return RESOLVED_ID;
+			return null;
+		},
+		async load(id) {
+			if (id !== RESOLVED_ID) return null;
+			const css = await generate();
+			if (this.addWatchFile) for (const file of builder.context?.getFiles() ?? []) this.addWatchFile(builder.context.runtime.path.abs(builder.context.config.cwd, file));
+			return css;
+		},
+		configureServer(devServer) {
+			server = devServer;
+			const invalidate = (file) => {
+				const ctx = builder.context;
+				if (!ctx) return;
+				if (!ctx.getFiles().some((f) => ctx.runtime.path.abs(ctx.config.cwd, f) === file)) return;
+				const mod = server?.moduleGraph.getModuleById(RESOLVED_ID);
+				if (!mod) return;
+				server?.moduleGraph.invalidateModule(mod);
+				server?.ws.send({
+					type: "update",
+					updates: []
+				});
+				logger.debug("vite", `styles invalidated by ${file}`);
+			};
+			devServer.watcher.on("change", invalidate);
+			devServer.watcher.on("add", invalidate);
+			devServer.watcher.on("unlink", invalidate);
+		}
+	};
+};
+//#endregion
 //#region src/fold-partial.ts
 /**
 * Statically resolvable means: every box in the tree carries a known value.
@@ -453,9 +537,6 @@ const planPartialFold = (argument, boxNode, styles, deps) => {
 	if (!partition) return void 0;
 	const className = deps.runtimeCss(partition.staticStyles);
 	if (!className && !partition.finite.length) return void 0;
-	if (deps.ctx.config.cssMode === "grouped") {
-		if ((className ? 1 : 0) + partition.finite.length + (partition.dynamicText.length ? 1 : 0) > 1) return void 0;
-	}
 	return {
 		className,
 		dynamicText: partition.dynamicText.length ? `{ ${partition.dynamicText.join(", ")} }` : void 0,
@@ -646,10 +727,272 @@ const ensureCxImport = (call, calleeRoot, isBambooCssModule, isGeneratedCssModul
 	};
 };
 //#endregion
+//#region src/fold-recipe.ts
+/**
+* Binding name → the config it was declared with.
+*
+* Built from the definitions the parser already recorded, walking each one to the declaration
+* that names it. The parser records a definition under the name it was *imported* as (`cva`),
+* and a call under the name the file *bound* (`badge`); this is what joins the two.
+*
+* Reads `cva` and not `sva`, which is load-bearing rather than an omission. The parser records
+* a call of *either* as a recipe call, but an `sva` invocation returns one class per slot — an
+* object, not a string — so there is no literal to substitute. Leaving slot recipes out of this
+* map is what makes them decline as `unknown-recipe` instead of folding to a string that would
+* break every consumer reading `.root` off it.
+*/
+const collectRecipeConfigs = (parserResult) => {
+	const configs = /* @__PURE__ */ new Map();
+	for (const definition of parserResult.cva) {
+		const node = definition.box?.getNode?.();
+		if (!node) continue;
+		const nameNode = ((Node.isCallExpression(node) ? node : node.getFirstAncestorByKind(SyntaxKind.CallExpression))?.getFirstAncestorByKind(SyntaxKind.VariableDeclaration))?.getNameNode();
+		if (!nameNode || !Node.isIdentifier(nameNode)) continue;
+		if (definition.data?.length !== 1) {
+			configs.set(nameNode.getText(), AMBIGUOUS);
+			continue;
+		}
+		const config = definition.data[0];
+		if (!config || typeof config !== "object") continue;
+		if (configs.has(nameNode.getText())) {
+			configs.set(nameNode.getText(), AMBIGUOUS);
+			continue;
+		}
+		configs.set(nameNode.getText(), {
+			config,
+			name: getRecipeIdentity(config),
+			box: definition.box
+		});
+	}
+	return configs;
+};
+/** The generated binding a lowered dynamic axis calls. Lives in `cx`, which pulls no engine. */
+const RECIPE_PICK_HELPER = "cvaPick";
+const HELPER = RECIPE_PICK_HELPER;
+/** Marker for a binding the fold must never resolve — declared twice, or unresolvable. */
+const AMBIGUOUS = Object.freeze({
+	config: {},
+	name: "",
+	box: void 0
+});
+const LITERAL_KINDS = new Set([
+	SyntaxKind.StringLiteral,
+	SyntaxKind.NoSubstitutionTemplateLiteral,
+	SyntaxKind.NumericLiteral,
+	SyntaxKind.TrueKeyword,
+	SyntaxKind.FalseKeyword
+]);
+/**
+* The value a literal node denotes, or `undefined` for anything else.
+*
+* Read off the node rather than from the extractor's resolved data, because that data is lossy
+* in the direction that matters: a property it could not resolve is *dropped*, so `badge({ tone })`
+* and `badge({})` are identical there. Folding the first as if it were the second emits a class
+* string missing the variant — the element renders, wrongly, with no report.
+*/
+const literalValue = (node) => {
+	if (!node || !LITERAL_KINDS.has(node.getKind())) return void 0;
+	if (Node.isStringLiteral(node) || Node.isNoSubstitutionTemplateLiteral(node)) return node.getLiteralValue();
+	if (Node.isNumericLiteral(node)) return node.getLiteralValue();
+	if (node.getKind() === SyntaxKind.TrueKeyword) return true;
+	if (node.getKind() === SyntaxKind.FalseKeyword) return false;
+};
+/**
+* The property name a key node denotes.
+*
+* Read off the node rather than unquoted from its text. `{ '\\u0074one': 'a' }` names the
+* variant `tone`, and stripping the surrounding quotes leaves the escape uninterpreted — so
+* the variant did not match, its class was dropped, and the element rendered without it. A
+* numeric key normalises the same way: `{ 0x10: 'a' }` is the key `16`.
+*/
+const propertyKey = (nameNode) => {
+	if (Node.isIdentifier(nameNode)) return nameNode.getText();
+	if (Node.isStringLiteral(nameNode) || Node.isNoSubstitutionTemplateLiteral(nameNode)) return nameNode.getLiteralValue();
+	if (Node.isNumericLiteral(nameNode)) return String(nameNode.getLiteralValue());
+};
+/**
+* Make `cvaPick` callable at this call site, by whatever name the file gives it.
+*
+* Not `ensureCxImport`: that one resolves `cx` and finds the declaration to extend by
+* matching the *callee* against an import. An inline recipe's callee is a local binding, so
+* there is nothing to match — the host here is any import of the generated css module, which
+* a file defining a recipe necessarily has, since `cva` came from it.
+*/
+const ensureRecipeHelperImport = (call, isBambooCssModule, isGeneratedCssModule, isShadowed) => {
+	const sourceFile = call.getSourceFile();
+	let host;
+	for (const declaration of sourceFile.getImportDeclarations()) {
+		const mod = declaration.getModuleSpecifierValue();
+		if (declaration.isTypeOnly()) continue;
+		for (const named of declaration.getNamedImports()) {
+			if (named.isTypeOnly()) continue;
+			if (named.getNameNode().getText() === "cvaPick") {
+				if (!isBambooCssModule(mod)) return void 0;
+				const local = (named.getAliasNode() ?? named.getNameNode()).getText();
+				return isShadowed(call, local) ? void 0 : { name: local };
+			}
+		}
+		if (!host && isGeneratedCssModule(mod) && declaration.getNamedImports().length > 0) host = declaration;
+	}
+	if (!host) return void 0;
+	if (declaredAtModuleScope(sourceFile).has("cvaPick")) return void 0;
+	if (isShadowed(call, "cvaPick")) return void 0;
+	const last = host.getNamedImports().at(-1);
+	if (!last) return void 0;
+	return {
+		name: RECIPE_PICK_HELPER,
+		insert: {
+			pos: last.getEnd(),
+			names: [RECIPE_PICK_HELPER]
+		}
+	};
+};
+/**
+* Lower one invocation, or say why not.
+*
+* Every property written at the call site has to be a literal. A selection is not additive —
+* an unresolved variant does not merely omit a class, it can change which of several the
+* recipe applies — so a partially-known selection is not foldable at all.
+*/
+const lowerRecipeCall = (call, entry, ctx, resolvedSelection) => {
+	if (!entry || entry === AMBIGUOUS) return {
+		kind: "decline",
+		reason: "unknown-recipe"
+	};
+	const { config, name } = entry;
+	if (config.slots !== void 0) return {
+		kind: "decline",
+		reason: "unsupported-shape"
+	};
+	if (!config.base && !config.variants && !config.className) return {
+		kind: "decline",
+		reason: "unknown-recipe"
+	};
+	if (!Node.isCallExpression(call)) return {
+		kind: "decline",
+		reason: "unsupported-shape"
+	};
+	const args = call.getArguments();
+	if (args.length > 1) return {
+		kind: "decline",
+		reason: "unsupported-shape"
+	};
+	const selection = {};
+	/** Variant → the source expression selecting it, for axes that stay runtime decisions. */
+	const dynamicAxes = /* @__PURE__ */ new Map();
+	if (args.length === 1) {
+		const arg = args[0];
+		if (!arg || !Node.isObjectLiteralExpression(arg)) return {
+			kind: "decline",
+			reason: "dynamic"
+		};
+		for (const property of arg.getProperties()) {
+			if (Node.isSpreadAssignment(property)) return {
+				kind: "decline",
+				reason: "dynamic"
+			};
+			if (Node.isShorthandPropertyAssignment(property)) {
+				dynamicAxes.set(property.getName(), property.getName());
+				delete selection[property.getName()];
+				continue;
+			}
+			if (!Node.isPropertyAssignment(property)) return {
+				kind: "decline",
+				reason: "dynamic"
+			};
+			const nameNode = property.getNameNode();
+			if (Node.isComputedPropertyName(nameNode)) return {
+				kind: "decline",
+				reason: "dynamic"
+			};
+			const key = propertyKey(nameNode);
+			if (key === void 0) return {
+				kind: "decline",
+				reason: "dynamic"
+			};
+			const literal = literalValue(property.getInitializer());
+			if (literal !== void 0) {
+				selection[key] = literal;
+				dynamicAxes.delete(key);
+				continue;
+			}
+			if (!resolvedSelection || !Object.hasOwn(resolvedSelection, key)) {
+				const initializer = property.getInitializer();
+				if (!initializer) return {
+					kind: "decline",
+					reason: "dynamic"
+				};
+				dynamicAxes.set(key, initializer.getText());
+				delete selection[key];
+				continue;
+			}
+			const value = resolvedSelection[key];
+			if (value !== null && typeof value === "object") return {
+				kind: "decline",
+				reason: "dynamic"
+			};
+			selection[key] = value;
+			dynamicAxes.delete(key);
+		}
+	}
+	const merged = {
+		...config.defaultVariants ?? {},
+		...compact(selection)
+	};
+	const format = classFormatter(ctx);
+	if (dynamicAxes.size === 0) return {
+		kind: "class",
+		className: getRecipeClassNames(name, config.variants, merged, ctx.utility.separator, format)
+	};
+	for (const key of [...dynamicAxes.keys()]) if (!config.variants?.[key]) dynamicAxes.delete(key);
+	if (dynamicAxes.size === 0) {
+		const staticOnly = { ...merged };
+		for (const key of dynamicAxes.keys()) delete staticOnly[key];
+		return {
+			kind: "class",
+			className: getRecipeClassNames(name, config.variants, staticOnly, ctx.utility.separator, format)
+		};
+	}
+	const ownClass = format(name);
+	const parts = [JSON.stringify(ownClass)];
+	const classNames = [ownClass];
+	for (const key of Object.keys(config.variants ?? {})) {
+		const expression = dynamicAxes.get(key);
+		if (expression === void 0) {
+			const value = merged[key];
+			if (value == null) continue;
+			if (config.variants?.[key]?.[value] == null) continue;
+			const className = format(`${name}--${key}${ctx.utility.separator}${withoutSpace(value)}`);
+			parts.push(JSON.stringify(` ${className}`));
+			classNames.push(className);
+			continue;
+		}
+		const values = config.variants[key];
+		const table = {};
+		for (const value of Object.keys(values)) {
+			const className = format(`${name}--${key}${ctx.utility.separator}${withoutSpace(value)}`);
+			table[value] = ` ${className}`;
+			classNames.push(className);
+		}
+		const fallbackValue = config.defaultVariants?.[key];
+		const fallback = fallbackValue != null && values[fallbackValue] != null ? ` ${format(`${name}--${key}${ctx.utility.separator}${withoutSpace(fallbackValue)}`)}` : void 0;
+		parts.push(`${HELPER}(${expression}, ${JSON.stringify(table)}${fallback === void 0 ? "" : `, ${JSON.stringify(fallback)}`})`);
+	}
+	if (parts.length === 1) return {
+		kind: "class",
+		className: ownClass
+	};
+	return {
+		kind: "expression",
+		expression: parts.join(" + "),
+		classNames,
+		staticClasses: ownClass
+	};
+};
+//#endregion
 //#region src/runtime-css.ts
 /** The shape `createCss` and `createMergeCss` both take, derived from a resolved context. */
 const createCssContext = (ctx) => ({
-	grouped: ctx.config.cssMode === "grouped",
 	hash: Boolean(ctx.hash.className),
 	conditions: {
 		shift: ctx.conditions.shift,
@@ -755,22 +1098,13 @@ const createRuntimeRecipe = (ctx) => {
 //#endregion
 //#region src/fold.ts
 /**
-* `cva`/`sva` return a function, so neither can collapse to a class string. Their
-* *invocations* could, but those are separate call sites the parser does not record as
-* such. `token` also resolves to no class, but it does resolve to a literal, so it folds
-* through its own path rather than being declined outright.
+* `cva`/`sva` return a function, so neither *definition* can collapse to a class string.
+* `token` also resolves to no class, but it does resolve to a literal, so it folds through
+* its own path rather than being declined outright.
 *
-* Folding an invocation is now *possible* in a way it was not: a recipe's classes are named
-* semantically, so the build knows every class a call can produce from the config alone.
-* What is missing is upstream — the parser matches calls by imported name, so a local
-* `button()` from `const button = cva(...)` is never recorded, and tracking those bindings
-* is a change to the extractor rather than to this set.
-*
-* Worth knowing before taking that on: semantic naming already took most of the prize.
-* `cvaFn` used to run `mergeCss` and name a class per property on every call; it is now a
-* memoized loop over `variantKeys` doing string concatenation. That is an inspection of the
-* two implementations, not a measurement — benchmark it before deciding it is worth the
-* extractor work.
+* Their invocations are a different matter and do fold — `cva`'s through `fold-recipe`,
+* which is a separate set because the call is recorded under the name the file bound rather
+* than the name it imported. `sva`'s do not: a slot recipe resolves to one class per slot.
 */
 const FOLDABLE_TYPES = new Set([
 	"css",
@@ -792,6 +1126,18 @@ const literalsIn = (expression) => [...expression.matchAll(/"((?:[^"\\]|\\.)*)"/
 */
 const UNFOLDABLE_TYPES = new Set(["cva", "sva"]);
 /**
+* A call of a recipe the file bound itself: `const badge = cva(...)`, then `badge({ tone })`.
+*
+* Folded when the whole selection resolves, reported under this reason when it does not.
+* Deliberately all-or-nothing: an unresolved variant does not merely omit its own class, so a
+* partially-known selection is not foldable at all.
+*
+* Visible at all because it used to not be. The parser matched calls by imported name, so a
+* local binding was never recorded, and an unfoldable invocation looked identical to code
+* nothing had parsed.
+*/
+const RECIPE_CALL_TYPE = "cva-call";
+/**
 * An argument that cannot run anything when it is evaluated.
 *
 * `token(path, fallback)` evaluates both arguments before the call, so a fold that drops
@@ -1110,6 +1456,21 @@ const foldSource = (options) => {
 	const skipped = [];
 	const candidates = [];
 	const seenRanges = /* @__PURE__ */ new Set();
+	/** Built on first use: most modules declare no inline recipe. */
+	let recipeConfigs;
+	/**
+	* Per inline recipe binding: calls seen, calls lowered.
+	*
+	* A binding whose every call lowered is no longer read, so its `cva({ … })` config can leave
+	* the bundle — which is the whole point, the config being far larger than the runtime. But a
+	* bundler will not drop the call on its own: `cva` closes over the config and builds an
+	* object, and Rollup cannot prove that is side-effect free, so it keeps the expression and
+	* the module ends up *larger* than before folding. The annotation below is what makes the
+	* saving real, and it is only correct to claim it once nothing reads the binding.
+	*/
+	const recipeCalls = /* @__PURE__ */ new Map();
+	/** Ranges already reported as declined, so one call is never counted twice. */
+	const reportedRanges = /* @__PURE__ */ new Set();
 	const importCache = /* @__PURE__ */ new Map();
 	const importsFor = (sourceFile) => {
 		let names = importCache.get(sourceFile);
@@ -1223,6 +1584,83 @@ const foldSource = (options) => {
 				start: call.getStart(),
 				end: call.getEnd()
 			});
+			if (call && type === RECIPE_CALL_TYPE && !isShadowed(call, name)) {
+				const start = call.getStart();
+				const end = call.getEnd();
+				const rangeKey = `${start}:${end}`;
+				if (!reportedRanges.has(rangeKey)) {
+					reportedRanges.add(rangeKey);
+					if (code.slice(start, end) !== call.getText()) {
+						skipped.push({
+							name,
+							reason: "no-call-expression",
+							start: 0,
+							end: 0
+						});
+						continue;
+					}
+					recipeConfigs ??= collectRecipeConfigs(parserResult);
+					const tally = recipeCalls.get(name) ?? {
+						seen: 0,
+						lowered: 0
+					};
+					tally.seen++;
+					recipeCalls.set(name, tally);
+					const resolvedSelection = item.data?.length === 1 ? item.data[0] : void 0;
+					const entry = recipeConfigs.get(name);
+					const lowered = Node.isCallExpression(call) && call.getArguments().every(isInertExpression) ? lowerRecipeCall(call, entry, ctx, resolvedSelection) : {
+						kind: "decline",
+						reason: "dynamic"
+					};
+					if (lowered.kind === "expression") {
+						const helper = ensureRecipeHelperImport(call, isBambooCssModule, isGeneratedCssModule, isShadowed);
+						if (helper) {
+							tally.lowered++;
+							candidates.push({
+								item,
+								call,
+								node: call,
+								start,
+								end,
+								replacement: helper.name === "cvaPick" ? lowered.expression : lowered.expression.replaceAll(`${RECIPE_PICK_HELPER}(`, `${helper.name}(`),
+								className: lowered.staticClasses,
+								classNames: lowered.classNames,
+								insert: helper.insert,
+								configBox: entry?.box
+							});
+							continue;
+						}
+						skipped.push({
+							name,
+							reason: "recipe-call",
+							start,
+							end
+						});
+						continue;
+					}
+					if (lowered.kind === "class") {
+						tally.lowered++;
+						candidates.push({
+							item,
+							call,
+							node: call,
+							start,
+							end,
+							replacement: JSON.stringify(lowered.className),
+							className: lowered.className,
+							classNames: lowered.className.split(" ").filter(Boolean),
+							configBox: entry?.box
+						});
+						continue;
+					}
+					skipped.push({
+						name,
+						reason: "recipe-call",
+						start,
+						end
+					});
+				}
+			}
 			continue;
 		}
 		if (!call) {
@@ -1377,6 +1815,7 @@ const foldSource = (options) => {
 				end
 			});
 			collectSourceFiles(item.box, dependencyScan);
+			if (candidate.configBox) collectSourceFiles(candidate.configBox, dependencyScan);
 			continue;
 		}
 		let className;
@@ -1425,6 +1864,16 @@ const foldSource = (options) => {
 		});
 		collectSourceFiles(item.box, dependencyScan);
 	}
+	for (const [binding, tally] of recipeCalls) {
+		if (!tally.seen || tally.lowered !== tally.seen) continue;
+		const definition = recipeConfigs?.get(binding)?.box?.getNode?.();
+		if (!definition) continue;
+		const call = Node.isCallExpression(definition) ? definition : definition.getFirstAncestorByKind(SyntaxKind.CallExpression);
+		if (!call) continue;
+		const start = call.getStart();
+		if (code.slice(start, call.getEnd()) !== call.getText()) continue;
+		magic.appendLeft(start, "/*#__PURE__*/");
+	}
 	if (folded.length === 0) return {
 		code,
 		map: null,
@@ -1475,6 +1924,23 @@ const isGeneratedOutput = (filePath, ctx) => {
 	const file = slashed(filePath);
 	return file === root || file.startsWith(`${root}/`);
 };
+/**
+* The skip reasons that leave a `css()`-family call in the output.
+*
+* `overlapping` is handled by the enclosing fold, and `not-imported` is somebody else's
+* function of the same name — neither leaves a call of ours. `not-foldable` is a `cva`/`sva`
+* definition, which keeps the recipe runtime rather than the css engine; see `strict`.
+*/
+const SURVIVES_TO_RUNTIME = new Set([
+	"dynamic",
+	"raw-call",
+	"unsupported-kind",
+	"no-call-expression",
+	"empty",
+	"unresolved-token"
+]);
+/** 1-indexed line of a source offset, for an error a user can navigate to. */
+const lineAt = (code, offset) => code.slice(0, offset).split("\n").length;
 const formatSkipped = (id, skipped) => {
 	const counts = /* @__PURE__ */ new Map();
 	for (const entry of skipped) counts.set(entry.reason, (counts.get(entry.reason) ?? 0) + 1);
@@ -1483,16 +1949,17 @@ const formatSkipped = (id, skipped) => {
 /**
 * Vite integration for Bamboo CSS.
 *
-* This plugin does not emit CSS — keep your existing PostCSS setup for that. Its only
-* job is the optional build-time fold.
+* Two plugins, because they do unrelated jobs on different schedules. The first emits the
+* stylesheet as a virtual module and runs in dev and build alike — that is the integration,
+* and nothing styles without it. The second is the optional build-time fold.
 *
-* It runs with `enforce: 'pre'` so it sees module source as close as possible to what
+* The fold runs with `enforce: 'pre'` so it sees module source as close as possible to what
 * the CSS extractor reads off disk. A plugin that rewrites style calls before bamboo
 * sees them would otherwise make the two disagree, and a folded class could end up
 * with no matching rule.
 */
 const bamboocss = (options = {}) => {
-	const { transform = true, partial, configPath, cwd, reportSkipped = false, reportSummary = true } = options;
+	const { transform = true, partial, configPath, cwd, reportSkipped = false, reportSummary = true, strict = false } = options;
 	/** Totals across the build, for the summary. */
 	const totals = {
 		folded: 0,
@@ -1500,6 +1967,8 @@ const bamboocss = (options = {}) => {
 		filesWithFolds: 0,
 		skipped: /* @__PURE__ */ new Map()
 	};
+	/** Under `strict`, every call that would still reach the runtime. */
+	const survivors = [];
 	let ctx;
 	let runtimeCss;
 	let setup;
@@ -1513,8 +1982,11 @@ const bamboocss = (options = {}) => {
 		});
 		await setup;
 	};
-	return {
-		name: "bamboocss",
+	return [bamboocssCss({
+		configPath,
+		cwd
+	}), {
+		name: "bamboocss:fold",
 		enforce: "pre",
 		apply: "build",
 		async buildStart() {
@@ -1523,6 +1995,7 @@ const bamboocss = (options = {}) => {
 			totals.files = 0;
 			totals.filesWithFolds = 0;
 			totals.skipped.clear();
+			survivors.length = 0;
 			await ensureContext();
 		},
 		/**
@@ -1584,6 +2057,23 @@ const bamboocss = (options = {}) => {
 			totals.folded += result.folded.length;
 			if (result.folded.length) totals.filesWithFolds++;
 			for (const entry of result.skipped) totals.skipped.set(entry.reason, (totals.skipped.get(entry.reason) ?? 0) + 1);
+			if (strict) {
+				for (const entry of result.skipped) {
+					if (!SURVIVES_TO_RUNTIME.has(entry.reason)) continue;
+					survivors.push({
+						file: filePath,
+						line: lineAt(code, entry.start),
+						name: entry.name,
+						reason: entry.reason
+					});
+				}
+				if (result.code.includes("cssLeaf(")) survivors.push({
+					file: filePath,
+					line: lineAt(result.code, result.code.indexOf("cssLeaf(")),
+					name: "cssLeaf",
+					reason: "lowered-leaf"
+				});
+			}
 			if (reportSkipped && result.skipped.length) logger.info("vite:transform", formatSkipped(filePath, result.skipped));
 			for (const dependency of result.dependencies) this.addWatchFile?.(dependency);
 			if (!result.folded.length) return null;
@@ -1594,6 +2084,16 @@ const bamboocss = (options = {}) => {
 			};
 		},
 		buildEnd() {
+			if (strict && survivors.length) {
+				const byFile = /* @__PURE__ */ new Map();
+				for (const entry of survivors) {
+					const list = byFile.get(entry.file) ?? [];
+					list.push(entry);
+					byFile.set(entry.file, list);
+				}
+				const detail = Array.from(byFile.entries()).map(([file, entries]) => [`  ${file}`, ...entries.map((e) => `    ${e.line}: ${e.name}() — ${e.reason}`)].join("\n")).join("\n");
+				throw new Error(`bamboocss: ${survivors.length} call(s) could not be folded, and \`strict\` is on.\n\n${detail}\n\nEach one keeps \`styled-system/css\` in the bundle, so the engine cannot be dropped however many other calls folded. Make the values static, move the variation into a \`cva\` variant, or generate them with \`staticCss\` — or set \`strict: false\` to accept the runtime.`);
+			}
 			if (!transform || !reportSummary) return;
 			const declined = Array.from(totals.skipped.values()).reduce((sum, count) => sum + count, 0);
 			const total = totals.folded + declined;
@@ -1602,7 +2102,7 @@ const bamboocss = (options = {}) => {
 			const reasons = Array.from(totals.skipped.entries()).sort((a, b) => b[1] - a[1]).map(([reason, count]) => `${reason}=${count}`).join(" ");
 			logger.info("vite:transform", `Folded ${totals.folded}/${total} (${share}%) across ${totals.filesWithFolds}/${totals.files} files` + (reasons ? ` — declined: ${reasons}` : ""));
 		}
-	};
+	}];
 };
 //#endregion
-export { bamboocss, bamboocss as default, createRuntimeCss, foldSource };
+export { VIRTUAL_CSS_ID, bamboocss, bamboocss as default, bamboocssCss, createRuntimeCss, foldSource };