@bamboocss/vite 1.14.0 → 1.16.0

package/dist/index.mjs

@@ -172,8 +172,11 @@ const accountsForSource = (node, boxNode) => {
 	if (!box.isMap(boxNode)) return false;
 	for (const property of unwrapped.getProperties()) {
 		if (Node.isSpreadAssignment(property)) {
-			const expression = property.getExpression();
-			if (!Node.isObjectLiteralExpression(expression)) return false;
+			const expression = unwrapExpression(property.getExpression());
+			if (Node.isObjectLiteralExpression(expression)) continue;
+			const walked = boxNode.resolvedSpreads?.find((entry) => entry.node === expression);
+			if (!walked) return false;
+			if (!accountsForSource(walked.box.getNode(), walked.box)) return false;
 			continue;
 		}
 		if (Node.isMethodDeclaration(property) || Node.isGetAccessorDeclaration(property) || Node.isSetAccessorDeclaration(property)) return false;
@@ -410,7 +413,6 @@ const LEAF_SENTINEL = "bamboo0leaf0sentinel0";
 * carry the same path or the declined shape resolves without its condition.
 */
 const leafPrefix = (key, ctx, runtimeCss) => {
-	if (ctx.isTemplateLiteralSyntax) return void 0;
 	if (ctx.conditions.isCondition(key)) return void 0;
 	let resolved;
 	try {
@@ -450,6 +452,9 @@ 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,
@@ -639,464 +644,6 @@ const ensureCxImport = (call, calleeRoot, isBambooCssModule, isGeneratedCssModul
 		}
 	};
 };
-/**
-* The `css` and `cx` bindings a partially folded JSX element needs.
-*
-* Splitting an element sends its dynamic style props to a `css()` call, so unlike the
-* call-site split this needs *two* bindings rather than one. Both are taken from an
-* existing bamboo `css` import: writing a new import declaration would mean guessing a
-* module specifier, and the spelling varies with `importMap`, path aliases and how the
-* project reaches its outdir. An element in a file that does not already import `css` is
-* left alone instead.
-*/
-const resolveCssHelpers = (node, isBambooCssModule, isGeneratedCssModule, isShadowed, wantLeaf = false) => {
-	const sourceFile = node.getSourceFile();
-	if (!importsAnything(sourceFile, isBambooCssModule)) return void 0;
-	for (const declaration of sourceFile.getImportDeclarations()) {
-		const mod = declaration.getModuleSpecifierValue();
-		if (declaration.isTypeOnly() || !isBambooCssModule(mod)) continue;
-		const named = declaration.getNamedImports();
-		const cssImport = named.find((entry) => entry.getNameNode().getText() === "css" && !entry.isTypeOnly());
-		if (!cssImport) continue;
-		const cssName = (cssImport.getAliasNode() ?? cssImport.getNameNode()).getText();
-		if (isShadowed(node, cssName)) return void 0;
-		const wanted = wantLeaf ? ["cx", LEAF_HELPER] : ["cx"];
-		const resolved = {};
-		const missing = [];
-		for (const want of wanted) {
-			const existing = named.find((entry) => entry.getNameNode().getText() === want && !entry.isTypeOnly());
-			if (existing) {
-				const local = (existing.getAliasNode() ?? existing.getNameNode()).getText();
-				if (isShadowed(node, local)) return void 0;
-				resolved[want] = local;
-				continue;
-			}
-			missing.push(want);
-		}
-		if (!missing.length) return {
-			css: cssName,
-			cx: resolved.cx,
-			leaf: resolved[LEAF_HELPER]
-		};
-		if (!isGeneratedCssModule(mod)) return void 0;
-		const declared = declaredAtModuleScope(sourceFile);
-		for (const name of missing) {
-			if (isShadowed(node, name) || declared.has(name)) return void 0;
-			resolved[name] = name;
-		}
-		const last = named.at(-1);
-		if (!last) return void 0;
-		return {
-			css: cssName,
-			cx: resolved.cx,
-			leaf: resolved[LEAF_HELPER],
-			insert: {
-				pos: last.getEnd(),
-				names: missing
-			}
-		};
-	}
-};
-//#endregion
-//#region src/fold-jsx.ts
-const RANK = {
-	constant: 0,
-	reads: 1,
-	unknown: 2
-};
-const worst = (a, b) => RANK[a] >= RANK[b] ? a : b;
-const purityOf = (node) => {
-	if (Node.isIdentifier(node)) return "reads";
-	if (Node.isStringLiteral(node) || Node.isNumericLiteral(node) || Node.isNoSubstitutionTemplateLiteral(node) || Node.isTrueLiteral(node) || Node.isFalseLiteral(node) || node.getKind() === SyntaxKind.NullKeyword) return "constant";
-	if (Node.isPrefixUnaryExpression(node) && Node.isNumericLiteral(node.getOperand())) return "constant";
-	if (Node.isObjectLiteralExpression(node)) return node.getProperties().reduce((acc, property) => {
-		if (!Node.isPropertyAssignment(property)) return "unknown";
-		if (Node.isComputedPropertyName(property.getNameNode())) return "unknown";
-		const value = property.getInitializer();
-		return worst(acc, value ? purityOf(value) : "unknown");
-	}, "constant");
-	if (Node.isArrayLiteralExpression(node)) return node.getElements().reduce((acc, element) => worst(acc, purityOf(element)), "constant");
-	return "unknown";
-};
-/**
-* The same question for a whole attribute.
-*
-* A `JsxElement` or `JsxFragment` initializer — `title=<Tag x={f()} />` — is legal, holds
-* arbitrary expressions, and is not a `JsxExpression`, so this asks what an initializer
-* *is* rather than listing the kinds that carry code.
-*/
-const attributePurity = (attribute) => {
-	const initializer = attribute.getInitializer();
-	if (!initializer) return "constant";
-	if (Node.isStringLiteral(initializer)) return "constant";
-	if (!Node.isJsxExpression(initializer)) return "unknown";
-	const expression = initializer.getExpression();
-	return expression ? purityOf(expression) : "constant";
-};
-/**
-* Props the factory gives extra *styling* meaning to, which is why they block a fold.
-*
-* `unstyled` skips the recipe and `css` merges at a higher precedence than the style
-* props, so neither is expressible as a class the fold can compute alongside the rest.
-*
-* `ref`, `key` and `children` used to be here too, and do not belong: none of them
-* changes what the element is styled with. The factory takes `ref` through `forwardRef`
-* and hands it straight to `createElement`, so an intrinsic tag — or whatever `as` names
-* — receives the identical prop. `key` never reaches the component at all; React consumes
-* it. And `children ?? combinedProps.children` mirrors `createElement`'s own rule that
-* the third argument beats `props.children`. Each is a passthrough, and travels as one.
-*/
-const RESERVED_PROPS = new Set(["unstyled", "css"]);
-/**
-* Props that carry no styling, and so block a fold only where the framework gives them a
-* meaning the rewrite would change.
-*/
-const MECHANICAL_PROPS = new Set([
-	"ref",
-	"key",
-	"children"
-]);
-/**
-* Where a mechanical prop may travel as an ordinary passthrough.
-*
-* React only, and measured rather than reasoned about. Its factory forwards the ref to
-* the element it renders, so moving the ref onto that element changes nothing.
-*
-* Preact was in this list on the strength of `forwardRef` appearing in its factory too,
-* and that inference was wrong: under this repo's compat setup an unfolded
-* `<styled.div ref={r}>` binds the *component instance* and the folded `<div ref={r}>`
-* binds the DOM node. A hand-written `forwardRef` behaves the same way, so it is Preact's
-* own handling rather than anything the factory does. Vue diverges for the plain reason —
-* a ref on a component is the instance, on an element it is the node.
-*
-* An allowlist rather than a denylist, because the failure is silent and the list of
-* runtimes is open. Every other framework keeps the behaviour it had before.
-*/
-const MECHANICAL_FRAMEWORKS = new Set(["react"]);
-/**
-* Is this a tag JSX reads as an intrinsic element?
-*
-* Anchored and dot-free, because both halves matter. `Section` is a variable reference,
-* and `foo.bar` is a member expression — a property read off something in scope — where
-* the runtime would have created an element named literally that.
-*/
-const isIntrinsicTag = (tag) => /^[a-z][\w-]*$/.test(tag);
-/**
-* The tag an `as` prop names, when it names one statically.
-*
-* The factory destructures `{ as: Element = __base__ }` and hands `Element` to
-* `createElement`, so a static `as` is simply a different tag with the same class and
-* the same forwarded props — `splitProps` keys off the factory's own config, not off
-* what `as` points at, so the split is unchanged.
-*
-* Casing is load-bearing, because JSX and `createElement` disagree about it. JSX reads a
-* lowercase tag as an intrinsic element and a capitalised one as a variable, while
-* `createElement` takes a string as intrinsic and anything else as a component. So the
-* two forms only survive the rewrite when their casing already agrees:
-*
-* - `as="section"` -> `<section>`, intrinsic both ways.
-* - `as={Link}` -> `<Link>`, a component reference both ways.
-*
-* The mismatched pair render something else entirely. `as={thing}` would fold to
-* `<thing>`, a DOM element named `thing` rather than the component; `as="Section"` would
-* fold to `<Section>`, a variable reference rather than the intrinsic the factory would
-* have created. Both bail.
-*
-* A dot is the same hazard spelled differently, and it survives lowercasing. `<foo.bar>`
-* is a JSX member expression — `createElement(foo.bar)`, a property read off a variable
-* in scope — where the factory would have created an intrinsic element named literally
-* `foo.bar`. So a dotted value bails even though its casing agrees.
-*/
-const asTag = (attribute) => {
-	const initializer = attribute.getInitializer();
-	if (!initializer) return void 0;
-	if (Node.isStringLiteral(initializer)) {
-		const value = initializer.getLiteralValue();
-		return /^[a-z][\w-]*$/.test(value) ? value : void 0;
-	}
-	if (!Node.isJsxExpression(initializer)) return void 0;
-	const expression = initializer.getExpression();
-	if (!expression || !Node.isIdentifier(expression)) return void 0;
-	const name = expression.getText();
-	return /^[A-Z]/.test(name) ? name : void 0;
-};
-/**
-* `normalizeHTMLProps` renames these on the way to the DOM (`htmlSize` -> `size`).
-* Reproducing the rename is easy; noticing that it exists is the hard part, so they bail.
-*/
-const HTML_PROPS = new Set([
-	"htmlSize",
-	"htmlTranslate",
-	"htmlWidth",
-	"htmlHeight"
-]);
-/**
-* The intrinsic tag a factory expression names, if it names one statically.
-*
-* Only `styled.div` and friends fold. `styled(Component)` and `styled('div')` are call
-* expressions whose result is bound elsewhere, and a capitalised tag is a component
-* rather than an intrinsic element.
-*/
-const intrinsicTag = (tagName, factoryName) => {
-	const prefix = `${factoryName}.`;
-	if (!tagName.startsWith(prefix)) return void 0;
-	const tag = tagName.slice(prefix.length);
-	if (!/^[a-z][a-z0-9-]*$/.test(tag)) return void 0;
-	return tag;
-};
-/**
-* Collapse a pattern element (`<Stack gap="4">`) to the tag it renders.
-*
-* A pattern component is a second layer on top of the factory: it splits its own props
-* out, runs them through the pattern's transform, and hands the result to
-* `styled.<jsxElement>`, which then does everything described above. Folding one removes
-* both layers.
-*
-* The class is computed through `patterns.transform`, the same call the encoder makes
-* when it decides what css to emit — so a folded pattern class is backed by a rule by
-* construction, and the render-parity test is what confirms it also matches the runtime.
-*
-* Only the default `jsxStyleProps: 'all'` folds. Under `minimal` and `none` the pattern's
-* styles reach the factory through the `css` prop instead of being spread, which reverses
-* which side wins when a prop is set in both places.
-*/
-const planPatternFold = (item, ctx, runtimeCss) => {
-	const node = item.box?.getNode?.();
-	if (!node || !Node.isJsxOpeningElement(node) && !Node.isJsxSelfClosingElement(node)) return { reason: "unsupported-kind" };
-	if (ctx.jsx.styleProps !== "all") return { reason: "unsupported-kind" };
-	const jsxName = node.getTagNameNode().getText();
-	const detail = ctx.patterns.details.find((entry) => entry.jsxName === jsxName);
-	if (!detail) return { reason: "unsupported-kind" };
-	const styles = item.data?.[0] ?? {};
-	const passthrough = [];
-	let staticClassName = "";
-	let sawChildrenProp = false;
-	let tag = detail.config.jsxElement ?? "div";
-	let tagFromAs = false;
-	for (const attribute of node.getAttributes()) {
-		if (!Node.isJsxAttribute(attribute)) return { reason: "dynamic" };
-		const name = attribute.getNameNode().getText();
-		if (name === "className") {
-			const initializer = attribute.getInitializer();
-			if (!initializer || !Node.isStringLiteral(initializer)) return { reason: "dynamic" };
-			staticClassName = initializer.getLiteralValue();
-			continue;
-		}
-		if (name === "as") {
-			const resolved = asTag(attribute);
-			if (!resolved) return { reason: "dynamic" };
-			tag = resolved;
-			tagFromAs = true;
-			continue;
-		}
-		if (RESERVED_PROPS.has(name) || HTML_PROPS.has(name)) return { reason: "dynamic" };
-		if (MECHANICAL_PROPS.has(name) && !MECHANICAL_FRAMEWORKS.has(ctx.jsx.framework ?? "")) return { reason: "dynamic" };
-		if (name === "children") sawChildrenProp = true;
-		if (detail.props.includes(name) || ctx.isValidProperty(name)) {
-			if (!(name in styles)) return { reason: "dynamic" };
-			continue;
-		}
-		passthrough.push(attribute.getText());
-	}
-	if (!tagFromAs && !isIntrinsicTag(tag)) return { reason: "unsupported-kind" };
-	if (sawChildrenProp && !isIntrinsicTag(tag)) return { reason: "dynamic" };
-	let resolved;
-	try {
-		resolved = runtimeCss(ctx.patterns.transform(detail.baseName, styles));
-	} catch {
-		return { reason: "dynamic" };
-	}
-	const className = [resolved, staticClassName].filter(Boolean).join(" ");
-	if (!className) return { reason: "dynamic" };
-	return buildEdits(node, tag, passthrough, className);
-};
-const planJsxFold = (item, ctx, runtimeCss, deps) => {
-	const node = item.box?.getNode?.();
-	if (!node || !Node.isJsxOpeningElement(node) && !Node.isJsxSelfClosingElement(node)) return { reason: "unsupported-kind" };
-	const baseTag = intrinsicTag(node.getTagNameNode().getText(), ctx.jsx.factoryName);
-	if (!baseTag) return { reason: "unsupported-kind" };
-	let tag = baseTag;
-	const styles = item.data?.[0] ?? {};
-	const propBoxes = box.isMap(item.box) ? item.box.value : void 0;
-	const passthrough = [];
-	const staticProps = [];
-	const dynamicProps = [];
-	let staticClassName = "";
-	let dynamicClassName = "";
-	let sawClassName = false;
-	let sawChildrenProp = false;
-	/**
-	* Where a dynamic `className` was written, and where the attributes that outlive the
-	* fold were.
-	*
-	* The factory appends `className` after the styles, so a folded one is emitted last and
-	* anything written after it runs before it instead. That covers more than the style
-	* props — a passthrough keeps its own place among the attributes — but only where the
-	* expression survives at all. A static style prop is not among them: it is *deleted*,
-	* its value having been resolved at build time. That is a larger change than reordering
-	* and a separate pre-existing gap — `<styled.div color={counted()} />` folds and never
-	* calls it, with or without this — rather than a reason the reordering is moot.
-	*/
-	let classNameIndex = -1;
-	let classNamePurity = "constant";
-	const survivors = [];
-	let index = -1;
-	for (const attribute of node.getAttributes()) {
-		if (!Node.isJsxAttribute(attribute)) return { reason: "dynamic" };
-		index += 1;
-		const name = attribute.getNameNode().getText();
-		if (name === "className") {
-			const initializer = attribute.getInitializer();
-			if (!initializer) return { reason: "dynamic" };
-			if (sawClassName && (dynamicClassName || !Node.isStringLiteral(initializer))) return { reason: "dynamic" };
-			sawClassName = true;
-			if (Node.isStringLiteral(initializer)) {
-				staticClassName = initializer.getLiteralValue();
-				continue;
-			}
-			const expression = Node.isJsxExpression(initializer) ? initializer.getExpression() : void 0;
-			if (!expression) return { reason: "dynamic" };
-			dynamicClassName = expression.getText();
-			classNameIndex = index;
-			classNamePurity = purityOf(expression);
-			continue;
-		}
-		if (name === "as") {
-			const resolved = asTag(attribute);
-			if (!resolved) return { reason: "dynamic" };
-			survivors.push({
-				index,
-				purity: attributePurity(attribute)
-			});
-			tag = resolved;
-			continue;
-		}
-		if (RESERVED_PROPS.has(name) || HTML_PROPS.has(name)) return { reason: "dynamic" };
-		if (MECHANICAL_PROPS.has(name) && !MECHANICAL_FRAMEWORKS.has(ctx.jsx.framework ?? "")) return { reason: "dynamic" };
-		if (name === "children") sawChildrenProp = true;
-		if (ctx.isValidProperty(name)) {
-			const attributeValue = attribute.getInitializer();
-			const valueExpression = attributeValue && Node.isJsxExpression(attributeValue) ? attributeValue.getExpression() : void 0;
-			const propBox = propBoxes?.get(name);
-			if (name in styles && isStaticBox(propBox) && accountsForSource(valueExpression, propBox)) {
-				staticProps.push(name);
-				continue;
-			}
-			if (!valueExpression) return { reason: "dynamic" };
-			const expression = valueExpression;
-			survivors.push({
-				index,
-				purity: attributePurity(attribute)
-			});
-			dynamicProps.push({
-				name,
-				text: expression.getText(),
-				expression
-			});
-			continue;
-		}
-		survivors.push({
-			index,
-			purity: attributePurity(attribute)
-		});
-		passthrough.push(attribute.getText());
-	}
-	if (sawChildrenProp && !isIntrinsicTag(tag)) return { reason: "dynamic" };
-	/**
-	* Would emitting the className last move it past something that can observe it?
-	*
-	* A constant survivor commutes with anything. One that only reads commutes only while
-	* the className expression cannot write — `className={cn} onClick={h}` is safe, and
-	* `className={assigns()} bg={tone}` is not, because moving the read after the write
-	* hands it the other value.
-	*
-	* This answers for the className and nothing else. `buildEdits` emits
-	* `[...passthrough, className={cx(…)}]`, so a passthrough is also hoisted ahead of every
-	* dynamic style prop's expression — `<styled.div bg={writes()} data-x={reads} />`
-	* reorders those two with no className present at all. That is pre-existing and
-	* reproduces on an unchanged tree; folding a dynamic className only makes it reachable
-	* for more elements. Closing it means comparing every survivor against everything it
-	* crosses rather than against one attribute, which is a different change.
-	*/
-	const reordered = () => classNameIndex >= 0 && survivors.some((entry) => entry.index > classNameIndex && entry.purity !== "constant" && !(entry.purity === "reads" && classNamePurity !== "unknown"));
-	if (dynamicProps.length) {
-		if (!deps || item.data.length !== 1) return { reason: "dynamic" };
-		if (collides(staticProps, dynamicProps.map((prop) => prop.name), ctx)) return { reason: "dynamic" };
-		const resolveProp = (name) => ctx.utility.hasShorthand ? ctx.utility.resolveShorthand(name) : name;
-		const claimed = /* @__PURE__ */ new Map();
-		for (const prop of dynamicProps) claimed.set(resolveProp(prop.name), (claimed.get(resolveProp(prop.name)) ?? 0) + 1);
-		const prefixes = /* @__PURE__ */ new Map();
-		for (const prop of dynamicProps) {
-			if (claimed.get(resolveProp(prop.name)) !== 1) continue;
-			if (isWrittenAsCollection(prop.expression)) continue;
-			const prefix = leafPrefix(prop.name, ctx, runtimeCss);
-			if (prefix !== void 0) prefixes.set(prop.name, prefix);
-		}
-		const kinds = dynamicProps.map((prop) => prefixes.has(prop.name) ? "l" : "r").join("");
-		if (!/^l*r*$/.test(kinds) && !/^r*l*$/.test(kinds)) prefixes.clear();
-		if (reordered()) return { reason: "dynamic" };
-		const helpers = resolveCssHelpers(node, deps.isBambooCssModule, deps.isGeneratedCssModule, deps.isShadowed, prefixes.size > 0);
-		if (!helpers) return { reason: "dynamic" };
-		if (!helpers.leaf) prefixes.clear();
-		const staticStyles = {};
-		for (const name of staticProps) staticStyles[name] = styles[name];
-		const resolved = [runtimeCss(staticStyles), staticClassName].filter(Boolean).join(" ");
-		const lowered = dynamicProps.filter((prop) => prefixes.has(prop.name)).map((prop) => leafCall(prefixes.get(prop.name), prop.name, prop.text, helpers.leaf));
-		const residue = dynamicProps.filter((prop) => !prefixes.has(prop.name));
-		const runtime = residue.length ? [`${helpers.css}({ ${residue.map((prop) => `${prop.name}: ${prop.text}`).join(", ")} })`] : [];
-		if (!resolved && !lowered.length) return { reason: "dynamic" };
-		const ordered = kinds.startsWith("r") ? [...runtime, ...lowered] : [...lowered, ...runtime];
-		const parts = dynamicClassName ? [...ordered, dynamicClassName] : ordered;
-		const plan = buildEdits(node, tag, passthrough, resolved, `${helpers.cx}(${[...resolved ? [JSON.stringify(resolved)] : [], ...parts].join(", ")})`);
-		return "reason" in plan ? plan : {
-			...plan,
-			insert: helpers.insert
-		};
-	}
-	if (item.data.length !== 1) return { reason: "dynamic" };
-	const className = [runtimeCss(styles), staticClassName].filter(Boolean).join(" ");
-	if (dynamicClassName) {
-		if (reordered()) return { reason: "dynamic" };
-		const helpers = deps && resolveCssHelpers(node, deps.isBambooCssModule, deps.isGeneratedCssModule, deps.isShadowed);
-		if (!helpers) return { reason: "dynamic" };
-		const args = [...className ? [JSON.stringify(className)] : [], dynamicClassName];
-		const plan = buildEdits(node, tag, passthrough, className, `${helpers.cx}(${args.join(", ")})`);
-		return "reason" in plan ? plan : {
-			...plan,
-			insert: helpers.insert
-		};
-	}
-	if (!className) return { reason: "dynamic" };
-	return buildEdits(node, tag, passthrough, className);
-};
-/** Rewrite the opening element, and the closing one when there is a pair. */
-const buildEdits = (node, tag, passthrough, className, classExpression) => {
-	const attributes = [...passthrough, `className={${classExpression ?? JSON.stringify(className)}}`].join(" ");
-	const selfClosing = Node.isJsxSelfClosingElement(node);
-	const edits = [{
-		start: node.getStart(),
-		end: node.getEnd(),
-		text: `<${tag} ${attributes}${selfClosing ? " />" : ">"}`
-	}];
-	let end = node.getEnd();
-	if (!selfClosing) {
-		const parent = node.getParent();
-		if (!Node.isJsxElement(parent)) return { reason: "unsupported-kind" };
-		const closing = parent.getClosingElement();
-		edits.push({
-			start: closing.getStart(),
-			end: closing.getEnd(),
-			text: `</${tag}>`
-		});
-		end = closing.getEnd();
-	}
-	return {
-		edits,
-		className,
-		start: node.getStart(),
-		end
-	};
-};
 //#endregion
 //#region src/runtime-css.ts
 /** The shape `createCss` and `createMergeCss` both take, derived from a resolved context. */
@@ -1122,9 +669,30 @@ const createRuntimeCss = (ctx) => {
 	const { mergeCss } = createMergeCss(cssContext);
 	return (...styles) => cssFn(mergeCss(...styles));
 };
-const createRuntimeRecipe = (ctx, runtimeCss) => {
+/**
+* The map is every token in the project, so it is built once per context and shared by
+* every module in the build — not once per `foldSource`, which would price a whole token
+* table into each of the overwhelming majority of modules that call `token()` zero times.
+* Keyed weakly so a context that goes out of scope takes its table with it.
+*/
+const tokenValues = /* @__PURE__ */ new WeakMap();
+const tokenValuesFor = (ctx) => {
+	let values = tokenValues.get(ctx);
+	if (values) return values;
+	values = /* @__PURE__ */ new Map();
+	for (const token of ctx.tokens.allTokens) {
+		const { varRef, isVirtual, condition } = token.extensions;
+		values.set(token.name, isVirtual || condition !== "base" ? varRef : token.value);
+	}
+	tokenValues.set(ctx, values);
+	return values;
+};
+const createRuntimeToken = (ctx) => (path) => {
+	const value = tokenValuesFor(ctx).get(path);
+	return typeof value === "string" ? value : void 0;
+};
+const createRuntimeRecipe = (ctx) => {
 	const separator = ctx.utility.separator;
-	const { mergeCss } = createMergeCss(createCssContext(ctx));
 	return (name, variants) => {
 		const config = ctx.recipes.getConfig(name);
 		const node = ctx.recipes.getRecipe(name);
@@ -1156,40 +724,28 @@ const createRuntimeRecipe = (ctx, runtimeCss) => {
 			...compact(variants)
 		};
 		if (compoundVariants.length > 0 && Object.keys(recipeStyles).some((prop) => typeof variants[prop] === "object")) return;
-		const compoundStyles = getCompoundVariantCss(compoundVariants, recipeStyles, mergeCss);
-		return [recipeCss(recipeStyles), runtimeCss(compoundStyles)].filter(Boolean).join(" ");
+		return recipeCss(recipeStyles);
 	};
 };
-/**
-* Mirrors the function of the same name in the generated `cva` artifact, down to the
-* `mergeCss` it accumulates with.
-*
-* That merge has to be the deep one. More than one compound variant can match a single
-* selection, and their `css` objects then combine rather than replace: `_hover` set by
-* one and `_hover` set by another have to end up as a single condition holding both
-* declarations. `Object.assign` drops everything the earlier match contributed under a
-* shared key, which produces a shorter class list and no error at all.
-*
-* Taking `mergeCss` as an argument rather than importing one keeps it the same instance
-* the rest of the fold resolves through, built from the same context.
-*/
-const getCompoundVariantCss = (compoundVariants, variantMap, mergeCss) => {
-	let result = {};
-	for (const compoundVariant of compoundVariants) {
-		if (!compoundVariant) continue;
-		if (Object.entries(compoundVariant).every(([key, value]) => {
-			if (key === "css") return true;
-			return (Array.isArray(value) ? value : [value]).some((entry) => variantMap[key] === entry);
-		})) result = mergeCss(result, compoundVariant.css);
-	}
-	return result;
-};
 //#endregion
 //#region src/fold.ts
 /**
-* `cva`/`sva` return a function and `token` returns a value, so none of them can
-* collapse to a class string. Their *invocations* could, but those are separate call
-* sites the parser does not record as such.
+* `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.
+*
+* 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.
 */
 const FOLDABLE_TYPES = new Set([
 	"css",
@@ -1209,13 +765,16 @@ const literalsIn = (expression) => [...expression.matchAll(/"((?:[^"\\]|\\.)*)"/
 * phase — hence separate from `unsupported-kind`, where a slot recipe lands because it
 * resolves to one class per slot rather than to a single string.
 */
-const UNFOLDABLE_TYPES = new Set([
-	"cva",
-	"sva",
-	"token"
-]);
-/** Element surfaces `foldJsx` handles, as opposed to call sites. */
-const JSX_TYPES = new Set(["jsx-factory", "jsx-pattern"]);
+const UNFOLDABLE_TYPES = new Set(["cva", "sva"]);
+/**
+* An argument that cannot run anything when it is evaluated.
+*
+* `token(path, fallback)` evaluates both arguments before the call, so a fold that drops
+* the fallback also drops whatever evaluating it would have done. `token('x', compute())`
+* is pathological, but the fold's contract is behaviour preservation and a literal is the
+* cheap way to prove it: no call, no property read, no getter.
+*/
+const isInertArgument = (node) => Node.isStringLiteral(node) || Node.isNumericLiteral(node) || Node.isNoSubstitutionTemplateLiteral(node) || node.getKind() === SyntaxKind.TrueKeyword || node.getKind() === SyntaxKind.FalseKeyword || node.getKind() === SyntaxKind.NullKeyword || Node.isIdentifier(node) && node.getText() === "undefined";
 /**
 * Source files a box tree reaches, other than the one being folded.
 *
@@ -1289,17 +848,6 @@ const calleeRootName = (call) => {
 	return Node.isIdentifier(current) ? current.getText() : void 0;
 };
 /**
-* The identifier a JSX tag is rooted at: `styled` for `<styled.div>`, `bamboo` for
-* `<bamboo.styled.div>`. The same question `calleeRootName` answers for a call, and it
-* feeds the same import and shadowing checks.
-*/
-const tagRootName = (element) => {
-	if (!Node.isJsxOpeningElement(element) && !Node.isJsxSelfClosingElement(element)) return void 0;
-	let current = element.getTagNameNode();
-	while (Node.isPropertyAccessExpression(current)) current = current.getExpression();
-	return Node.isIdentifier(current) ? current.getText() : void 0;
-};
-/**
 * Local names a module binds to an import of bamboo's own generated system.
 *
 * The parser matches by name and asks neither question this does — deliberately, since
@@ -1401,7 +949,7 @@ const argumentsAccountedFor = (call, boxNode) => {
 	return accountsForSource(args[0], boxNode);
 };
 const foldSource = (options) => {
-	const { ctx, code, parserResult, jsx = true, partial: partial_ = true, runtimeCss = createRuntimeCss(ctx) } = options;
+	const { ctx, code, parserResult, partial: partial_ = true, runtimeCss = createRuntimeCss(ctx) } = options;
 	/**
 	* Recover the static half of a call the whole-call path gave up on. Only a
 	* single-argument `css()` qualifies: a pattern or recipe call takes props rather than a
@@ -1456,7 +1004,8 @@ const foldSource = (options) => {
 			insert: cx.insert
 		};
 	};
-	const runtimeRecipe = createRuntimeRecipe(ctx, runtimeCss);
+	const runtimeRecipe = createRuntimeRecipe(ctx);
+	const runtimeToken = createRuntimeToken(ctx);
 	/**
 	* Does this specifier name a module that exports the css API, exactly?
 	*
@@ -1498,11 +1047,6 @@ const foldSource = (options) => {
 	};
 	const isBambooCssModule = (mod) => matchesModule(mod, cssModules);
 	const isGeneratedCssModule = (mod) => matchesModule(mod, [generatedCssModule]);
-	const jsxDeps = {
-		isBambooCssModule,
-		isGeneratedCssModule,
-		isShadowed
-	};
 	const folded = [];
 	const skipped = [];
 	const candidates = [];
@@ -1521,12 +1065,8 @@ const foldSource = (options) => {
 		const name = item.name ?? type;
 		if (!item.box) continue;
 		const call = findCallExpression(item.box);
-		if (jsx && JSX_TYPES.has(type)) {
-			const element = item.box.getNode?.();
-			if (!element) continue;
-			const elementStart = element.getStart();
-			const elementEnd = element.getEnd();
-			if (code.slice(elementStart, elementEnd) !== element.getText()) {
+		if (type === "token") {
+			if (!call) {
 				skipped.push({
 					name,
 					reason: "no-call-expression",
@@ -1535,34 +1075,85 @@ const foldSource = (options) => {
 				});
 				continue;
 			}
-			const rootName = tagRootName(element);
-			if (!rootName || !importsFor(element.getSourceFile()).has(rootName) || isShadowed(element, rootName)) {
+			const start = call.getStart();
+			const end = call.getEnd();
+			if (code.slice(start, end) !== call.getText()) {
+				skipped.push({
+					name,
+					reason: "no-call-expression",
+					start: 0,
+					end: 0
+				});
+				continue;
+			}
+			const rangeKey = `${start}:${end}`;
+			if (seenRanges.has(rangeKey)) continue;
+			seenRanges.add(rangeKey);
+			const rootName = calleeRootName(call);
+			if (!rootName || !importsFor(call.getSourceFile()).has(rootName) || isShadowed(call, rootName)) {
 				skipped.push({
 					name,
 					reason: "not-imported",
-					start: elementStart,
-					end: elementEnd
+					start,
+					end
+				});
+				continue;
+			}
+			const callee = Node.isCallExpression(call) ? call.getExpression() : void 0;
+			if (Node.isPropertyAccessExpression(callee) && !ctx.imports.matchers.tokens.match(callee.getNameNode().getText())) {
+				skipped.push({
+					name,
+					reason: "unsupported-kind",
+					start,
+					end
 				});
 				continue;
 			}
-			const plan = type === "jsx-pattern" ? planPatternFold(item, ctx, runtimeCss) : planJsxFold(item, ctx, runtimeCss, partial_ ? jsxDeps : void 0);
-			if ("reason" in plan) {
+			if (!isStaticBox(item.box) || item.data.length !== 1) {
 				skipped.push({
 					name,
-					reason: plan.reason,
-					start: elementStart,
-					end: elementEnd
+					reason: "dynamic",
+					start,
+					end
+				});
+				continue;
+			}
+			const path = item.data[0];
+			if (typeof path !== "string") {
+				skipped.push({
+					name,
+					reason: "dynamic",
+					start,
+					end
+				});
+				continue;
+			}
+			if (!(Node.isCallExpression(call) ? call.getArguments().slice(1) : []).every(isInertArgument)) {
+				skipped.push({
+					name,
+					reason: "dynamic",
+					start,
+					end
+				});
+				continue;
+			}
+			const value = runtimeToken(path);
+			if (!value) {
+				skipped.push({
+					name,
+					reason: "unresolved-token",
+					start,
+					end
 				});
 				continue;
 			}
 			candidates.push({
 				item,
-				node: element,
-				edits: plan.edits,
-				className: plan.className,
-				insert: plan.insert,
-				start: plan.start,
-				end: plan.end
+				call,
+				node: call,
+				start,
+				end,
+				value
 			});
 			continue;
 		}
@@ -1669,7 +1260,7 @@ const foldSource = (options) => {
 	for (const candidate of candidates) {
 		const { item, start, end } = candidate;
 		const name = item.name ?? item.type ?? "";
-		const ranges = candidate.edits ? candidate.edits.map((edit) => [edit.start, edit.end]) : [[start, end]];
+		const ranges = [[start, end]];
 		if (collides(ranges)) {
 			skipped.push({
 				name,
@@ -1679,26 +1270,28 @@ const foldSource = (options) => {
 			});
 			continue;
 		}
-		if (candidate.replacement) {
-			magic.overwrite(start, end, candidate.replacement);
-			applyInsert(candidate.insert);
+		if (candidate.value !== void 0) {
+			magic.overwrite(start, end, JSON.stringify(candidate.value));
 			applied.push(...ranges);
 			folded.push({
 				name,
-				className: candidate.className,
-				classNames: (candidate.classNames ?? [candidate.className]).filter(Boolean),
+				kind: "value",
+				className: "",
+				classNames: [],
+				value: candidate.value,
 				start,
 				end
 			});
 			collectSourceFiles(item.box, dependencyScan);
 			continue;
 		}
-		if (candidate.edits) {
-			for (const edit of candidate.edits) magic.overwrite(edit.start, edit.end, edit.text);
+		if (candidate.replacement) {
+			magic.overwrite(start, end, candidate.replacement);
 			applyInsert(candidate.insert);
 			applied.push(...ranges);
 			folded.push({
 				name,
+				kind: "class",
 				className: candidate.className,
 				classNames: (candidate.classNames ?? [candidate.className]).filter(Boolean),
 				start,
@@ -1745,6 +1338,7 @@ const foldSource = (options) => {
 		applied.push(...ranges);
 		folded.push({
 			name,
+			kind: "class",
 			className,
 			classNames: [className],
 			start,
@@ -1819,7 +1413,7 @@ const formatSkipped = (id, skipped) => {
 * with no matching rule.
 */
 const bamboocss = (options = {}) => {
-	const { transform = false, jsx, partial, configPath, cwd, reportSkipped = false, reportSummary = true } = options;
+	const { transform = false, partial, configPath, cwd, reportSkipped = false, reportSummary = true } = options;
 	/** Totals across the build, for the summary. */
 	const totals = {
 		folded: 0,
@@ -1852,6 +1446,37 @@ const bamboocss = (options = {}) => {
 			totals.skipped.clear();
 			await ensureContext();
 		},
+		/**
+		* Take a changed module out of the parser's hands before the rebuild reads it.
+		*
+		* `addWatchFile` below registers the modules a fold read, so editing one re-transforms
+		* its consumers. That is only half of it. The consumer is transformed *before* the
+		* module it imports — that is how a bundler discovers imports at all — so by the time
+		* the changed module's own `transform` refreshes it in the ts-morph project, the fold
+		* that reads it has already run against the previous contents and baked a stale class
+		* into the bundle. Rollup calls this hook before any of that, which is the only point
+		* where refreshing is early enough.
+		*
+		* Both entry points clear the box-node cache, which is the part that matters: a
+		* resolution memoized against the old contents outlives the file itself.
+		*
+		* A created file is handled as an edit. `reloadSourceFile` cannot re-read one the
+		* parser has never held, and does not need to — it clears the cache, and the extractor
+		* adds a newly-reachable module from disk on next use. What the shared path *is* needed
+		* for is an editor's atomic save, which arrives as a delete followed by a create while
+		* the parser still holds the file.
+		*/
+		watchChange(id, change) {
+			if (!transform || !ctx) return;
+			if (!shouldTransform(id)) return;
+			const [filePath] = id.split("?");
+			if (!filePath) return;
+			if (change.event === "delete") {
+				ctx.project.removeSourceFile(filePath);
+				return;
+			}
+			ctx.project.reloadSourceFile(filePath);
+		},
 		async transform(code, id) {
 			if (!transform) return null;
 			if (!shouldTransform(id)) return null;
@@ -1870,7 +1495,6 @@ const bamboocss = (options = {}) => {
 					parserResult,
 					filePath,
 					runtimeCss,
-					jsx,
 					partial
 				});
 			} catch (error) {