@bamboocss/vite 1.22.0 → 1.24.0

package/dist/index.cjs

@@ -754,6 +754,313 @@ 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 = ((ts_morph.Node.isCallExpression(node) ? node : node.getFirstAncestorByKind(ts_morph.SyntaxKind.CallExpression))?.getFirstAncestorByKind(ts_morph.SyntaxKind.VariableDeclaration))?.getNameNode();
+		if (!nameNode || !ts_morph.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: (0, _bamboocss_shared.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([
+	ts_morph.SyntaxKind.StringLiteral,
+	ts_morph.SyntaxKind.NoSubstitutionTemplateLiteral,
+	ts_morph.SyntaxKind.NumericLiteral,
+	ts_morph.SyntaxKind.TrueKeyword,
+	ts_morph.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 (ts_morph.Node.isStringLiteral(node) || ts_morph.Node.isNoSubstitutionTemplateLiteral(node)) return node.getLiteralValue();
+	if (ts_morph.Node.isNumericLiteral(node)) return node.getLiteralValue();
+	if (node.getKind() === ts_morph.SyntaxKind.TrueKeyword) return true;
+	if (node.getKind() === ts_morph.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 (ts_morph.Node.isIdentifier(nameNode)) return nameNode.getText();
+	if (ts_morph.Node.isStringLiteral(nameNode) || ts_morph.Node.isNoSubstitutionTemplateLiteral(nameNode)) return nameNode.getLiteralValue();
+	if (ts_morph.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, isInert, 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 (!ts_morph.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();
+	/**
+	* Variants whose expression could run something, in the order the source evaluates them.
+	*
+	* The text is kept, not just the key: a later property writing the same key replaces the
+	* entry in `dynamicAxes`, and the expression recorded here would then never be emitted.
+	*/
+	const effectful = [];
+	if (args.length === 1) {
+		const arg = args[0];
+		if (!arg || !ts_morph.Node.isObjectLiteralExpression(arg)) return {
+			kind: "decline",
+			reason: "dynamic"
+		};
+		for (const property of arg.getProperties()) {
+			if (ts_morph.Node.isSpreadAssignment(property)) return {
+				kind: "decline",
+				reason: "dynamic"
+			};
+			if (ts_morph.Node.isShorthandPropertyAssignment(property)) {
+				dynamicAxes.set(property.getName(), property.getName());
+				delete selection[property.getName()];
+				continue;
+			}
+			if (!ts_morph.Node.isPropertyAssignment(property)) return {
+				kind: "decline",
+				reason: "dynamic"
+			};
+			const nameNode = property.getNameNode();
+			if (ts_morph.Node.isComputedPropertyName(nameNode)) return {
+				kind: "decline",
+				reason: "dynamic"
+			};
+			const key = propertyKey(nameNode);
+			if (key === void 0) return {
+				kind: "decline",
+				reason: "dynamic"
+			};
+			const initializer = property.getInitializer();
+			if (initializer && !isInert(initializer)) {
+				if (!Object.hasOwn(config.variants ?? {}, key)) return {
+					kind: "decline",
+					reason: "dynamic"
+				};
+				effectful.push({
+					key,
+					text: initializer.getText()
+				});
+				dynamicAxes.set(key, initializer.getText());
+				delete selection[key];
+				continue;
+			}
+			const literal = literalValue(initializer);
+			if (literal !== void 0) {
+				selection[key] = literal;
+				dynamicAxes.delete(key);
+				continue;
+			}
+			if (!resolvedSelection || !Object.hasOwn(resolvedSelection, key)) {
+				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);
+		}
+	}
+	/**
+	* Every expression that could run something has to reach the output carrying its own text.
+	*
+	* A later property writing the same key replaces it in `dynamicAxes` — `badge({ tone: a(),
+	* tone: 'b' })` is last-wins for the *value*, but `a()` still runs, and emitting only the
+	* literal would delete it. Duplicate keys are a type error in TypeScript; the fold does not
+	* typecheck and does transform `.js`, so this is reachable.
+	*/
+	const everyEffectSurvives = () => effectful.every(({ key, text }) => dynamicAxes.get(key) === text);
+	const merged = {
+		...config.defaultVariants ?? {},
+		...(0, _bamboocss_shared.compact)(selection)
+	};
+	const format = (0, _bamboocss_core.classFormatter)(ctx);
+	if (dynamicAxes.size === 0) {
+		if (!everyEffectSurvives()) return {
+			kind: "decline",
+			reason: "dynamic"
+		};
+		return {
+			kind: "class",
+			className: (0, _bamboocss_shared.getRecipeClassNames)(name, config.variants, merged, ctx.utility.separator, format)
+		};
+	}
+	if (!everyEffectSurvives()) return {
+		kind: "decline",
+		reason: "dynamic"
+	};
+	if (effectful.length > 1) {
+		const variantOrder = Object.keys(config.variants ?? {});
+		const keys = effectful.map((entry) => entry.key);
+		if ([...keys].sort((a, b) => variantOrder.indexOf(a) - variantOrder.indexOf(b)).join("\0") !== keys.join("\0")) return {
+			kind: "decline",
+			reason: "dynamic"
+		};
+	}
+	for (const key of [...dynamicAxes.keys()]) if (!Object.hasOwn(config.variants ?? {}, key)) dynamicAxes.delete(key);
+	if (dynamicAxes.size === 0) return {
+		kind: "class",
+		className: (0, _bamboocss_shared.getRecipeClassNames)(name, config.variants, merged, 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;
+			const declared = config.variants?.[key];
+			if (!declared || !Object.hasOwn(declared, value) || declared[value] == null) continue;
+			const className = format(`${name}--${key}${ctx.utility.separator}${(0, _bamboocss_shared.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}${(0, _bamboocss_shared.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}${(0, _bamboocss_shared.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) => ({
@@ -862,22 +1169,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.
-*
-* 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.
+* `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.
 *
-* 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",
@@ -899,6 +1197,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
@@ -1217,6 +1527,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);
@@ -1330,6 +1655,80 @@ 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 = lowerRecipeCall(call, entry, ctx, isInertExpression, resolvedSelection);
+					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) {
@@ -1484,6 +1883,7 @@ const foldSource = (options) => {
 				end
 			});
 			collectSourceFiles(item.box, dependencyScan);
+			if (candidate.configBox) collectSourceFiles(candidate.configBox, dependencyScan);
 			continue;
 		}
 		let className;
@@ -1532,6 +1932,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 = ts_morph.Node.isCallExpression(definition) ? definition : definition.getFirstAncestorByKind(ts_morph.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,

package/dist/index.d.cts

@@ -2,7 +2,6 @@ import { Plugin } from "vite";
 import { Context } from "@bamboocss/core";
 import { Dict, ParserResultInterface } from "@bamboocss/types";
 import MagicString from "magic-string";
-
 //#region src/css.d.ts
 /**
  * What a project imports to get the stylesheet.
@@ -61,7 +60,7 @@ declare const createRuntimeCss: (ctx: Context) => RuntimeCss;
  * Why a call site was left alone. Surfaced through `panda`-style diagnostics so a
  * user can tell the difference between "this folded" and "this silently didn't".
  */
-type SkipReason = 'dynamic' | 'raw-call' | 'not-foldable' | 'unsupported-kind' | 'not-imported' | 'no-call-expression' | 'overlapping' | 'empty' | 'unresolved-token';
+type SkipReason = 'dynamic' | 'raw-call' | 'not-foldable' | 'recipe-call' | 'unsupported-kind' | 'not-imported' | 'no-call-expression' | 'overlapping' | 'empty' | 'unresolved-token';
 interface FoldedCall {
   name: string;
   /**

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import MagicString from "magic-string";
+import { Node } from "ts-morph";
 import { Context } from "@bamboocss/core";
 import { Plugin } from "vite";
 import { Dict, ParserResultInterface } from "@bamboocss/types";
@@ -61,7 +62,7 @@ declare const createRuntimeCss: (ctx: Context) => RuntimeCss;
  * Why a call site was left alone. Surfaced through `panda`-style diagnostics so a
  * user can tell the difference between "this folded" and "this silently didn't".
  */
-type SkipReason = 'dynamic' | 'raw-call' | 'not-foldable' | 'unsupported-kind' | 'not-imported' | 'no-call-expression' | 'overlapping' | 'empty' | 'unresolved-token';
+type SkipReason = 'dynamic' | 'raw-call' | 'not-foldable' | 'recipe-call' | 'unsupported-kind' | 'not-imported' | 'no-call-expression' | 'overlapping' | 'empty' | 'unresolved-token';
 interface FoldedCall {
   name: string;
   /**

package/dist/index.mjs

@@ -4,8 +4,8 @@ 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";
 //#region src/css.ts
 /**
@@ -727,6 +727,313 @@ 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, isInert, 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();
+	/**
+	* Variants whose expression could run something, in the order the source evaluates them.
+	*
+	* The text is kept, not just the key: a later property writing the same key replaces the
+	* entry in `dynamicAxes`, and the expression recorded here would then never be emitted.
+	*/
+	const effectful = [];
+	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 initializer = property.getInitializer();
+			if (initializer && !isInert(initializer)) {
+				if (!Object.hasOwn(config.variants ?? {}, key)) return {
+					kind: "decline",
+					reason: "dynamic"
+				};
+				effectful.push({
+					key,
+					text: initializer.getText()
+				});
+				dynamicAxes.set(key, initializer.getText());
+				delete selection[key];
+				continue;
+			}
+			const literal = literalValue(initializer);
+			if (literal !== void 0) {
+				selection[key] = literal;
+				dynamicAxes.delete(key);
+				continue;
+			}
+			if (!resolvedSelection || !Object.hasOwn(resolvedSelection, key)) {
+				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);
+		}
+	}
+	/**
+	* Every expression that could run something has to reach the output carrying its own text.
+	*
+	* A later property writing the same key replaces it in `dynamicAxes` — `badge({ tone: a(),
+	* tone: 'b' })` is last-wins for the *value*, but `a()` still runs, and emitting only the
+	* literal would delete it. Duplicate keys are a type error in TypeScript; the fold does not
+	* typecheck and does transform `.js`, so this is reachable.
+	*/
+	const everyEffectSurvives = () => effectful.every(({ key, text }) => dynamicAxes.get(key) === text);
+	const merged = {
+		...config.defaultVariants ?? {},
+		...compact(selection)
+	};
+	const format = classFormatter(ctx);
+	if (dynamicAxes.size === 0) {
+		if (!everyEffectSurvives()) return {
+			kind: "decline",
+			reason: "dynamic"
+		};
+		return {
+			kind: "class",
+			className: getRecipeClassNames(name, config.variants, merged, ctx.utility.separator, format)
+		};
+	}
+	if (!everyEffectSurvives()) return {
+		kind: "decline",
+		reason: "dynamic"
+	};
+	if (effectful.length > 1) {
+		const variantOrder = Object.keys(config.variants ?? {});
+		const keys = effectful.map((entry) => entry.key);
+		if ([...keys].sort((a, b) => variantOrder.indexOf(a) - variantOrder.indexOf(b)).join("\0") !== keys.join("\0")) return {
+			kind: "decline",
+			reason: "dynamic"
+		};
+	}
+	for (const key of [...dynamicAxes.keys()]) if (!Object.hasOwn(config.variants ?? {}, key)) dynamicAxes.delete(key);
+	if (dynamicAxes.size === 0) return {
+		kind: "class",
+		className: getRecipeClassNames(name, config.variants, merged, 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;
+			const declared = config.variants?.[key];
+			if (!declared || !Object.hasOwn(declared, value) || declared[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) => ({
@@ -835,22 +1142,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.
-*
-* 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.
+* `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.
 *
-* 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",
@@ -872,6 +1170,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
@@ -1190,6 +1500,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);
@@ -1303,6 +1628,80 @@ 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 = lowerRecipeCall(call, entry, ctx, isInertExpression, resolvedSelection);
+					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) {
@@ -1457,6 +1856,7 @@ const foldSource = (options) => {
 				end
 			});
 			collectSourceFiles(item.box, dependencyScan);
+			if (candidate.configBox) collectSourceFiles(candidate.configBox, dependencyScan);
 			continue;
 		}
 		let className;
@@ -1505,6 +1905,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/vite",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "description": "Vite integration for Bamboo CSS",
   "homepage": "https://bamboocss.com",
   "license": "MIT",
@@ -37,18 +37,18 @@
   "dependencies": {
     "magic-string": "0.30.21",
     "ts-morph": "28.0.0",
-    "@bamboocss/config": "1.22.0",
-    "@bamboocss/core": "1.22.0",
-    "@bamboocss/logger": "1.22.0",
-    "@bamboocss/extractor": "1.22.0",
-    "@bamboocss/node": "1.22.0",
-    "@bamboocss/shared": "1.22.0",
-    "@bamboocss/types": "1.22.0"
+    "@bamboocss/config": "1.24.0",
+    "@bamboocss/core": "1.24.0",
+    "@bamboocss/extractor": "1.24.0",
+    "@bamboocss/logger": "1.24.0",
+    "@bamboocss/node": "1.24.0",
+    "@bamboocss/shared": "1.24.0",
+    "@bamboocss/types": "1.24.0"
   },
   "devDependencies": {
     "@jridgewell/trace-mapping": "^0.3.31",
     "vite": "7.2.6",
-    "@bamboocss/fixture": "1.22.0"
+    "@bamboocss/fixture": "1.24.0"
   },
   "peerDependencies": {
     "vite": ">=5"