@bamboocss/vite 1.23.0 → 1.25.0

package/dist/index.cjs

@@ -795,6 +795,8 @@ const collectRecipeConfigs = (parserResult) => {
 };
 /** The generated binding a lowered dynamic axis calls. Lives in `cx`, which pulls no engine. */
 const RECIPE_PICK_HELPER = "cvaPick";
+/** What `recipe.splitVariantProps` calls, reached directly once the call is lowered. */
+const SPLIT_PROPS_HELPER = "splitProps";
 const HELPER = RECIPE_PICK_HELPER;
 /** Marker for a binding the fold must never resolve — declared twice, or unresolvable. */
 const AMBIGUOUS = Object.freeze({
@@ -802,6 +804,9 @@ const AMBIGUOUS = Object.freeze({
 	name: "",
 	box: void 0
 });
+/** `.size`, or `["x-large"]` when the variant is not a valid identifier. */
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
+const propertyAccess = (key) => IDENTIFIER.test(key) ? `.${key}` : `[${JSON.stringify(key)}]`;
 const LITERAL_KINDS = new Set([
 	ts_morph.SyntaxKind.StringLiteral,
 	ts_morph.SyntaxKind.NoSubstitutionTemplateLiteral,
@@ -845,7 +850,7 @@ const propertyKey = (nameNode) => {
 * 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 ensureRecipeHelperImport = (imported, call, isBambooCssModule, isGeneratedCssModule, isShadowed) => {
 	const sourceFile = call.getSourceFile();
 	let host;
 	for (const declaration of sourceFile.getImportDeclarations()) {
@@ -853,7 +858,7 @@ const ensureRecipeHelperImport = (call, isBambooCssModule, isGeneratedCssModule,
 		if (declaration.isTypeOnly()) continue;
 		for (const named of declaration.getNamedImports()) {
 			if (named.isTypeOnly()) continue;
-			if (named.getNameNode().getText() === "cvaPick") {
+			if (named.getNameNode().getText() === imported) {
 				if (!isBambooCssModule(mod)) return void 0;
 				const local = (named.getAliasNode() ?? named.getNameNode()).getText();
 				return isShadowed(call, local) ? void 0 : { name: local };
@@ -862,15 +867,15 @@ const ensureRecipeHelperImport = (call, isBambooCssModule, isGeneratedCssModule,
 		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;
+	if (declaredAtModuleScope(sourceFile).has(imported)) return void 0;
+	if (isShadowed(call, imported)) return void 0;
 	const last = host.getNamedImports().at(-1);
 	if (!last) return void 0;
 	return {
-		name: RECIPE_PICK_HELPER,
+		name: imported,
 		insert: {
 			pos: last.getEnd(),
-			names: [RECIPE_PICK_HELPER]
+			names: [imported]
 		}
 	};
 };
@@ -881,7 +886,7 @@ const ensureRecipeHelperImport = (call, isBambooCssModule, isGeneratedCssModule,
 * 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) => {
+const lowerRecipeCall = (call, entry, ctx, isInert, resolvedSelection) => {
 	if (!entry || entry === AMBIGUOUS) return {
 		kind: "decline",
 		reason: "unknown-recipe"
@@ -907,13 +912,37 @@ const lowerRecipeCall = (call, entry, ctx, resolvedSelection) => {
 	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 {
+		if (!arg) return {
 			kind: "decline",
 			reason: "dynamic"
 		};
-		for (const property of arg.getProperties()) {
+		/**
+		* `input(variantProps)` — a selection the build cannot see inside.
+		*
+		* The classes are still knowable: a recipe emits one per declared variant, so the call is
+		* one term per variant reading that binding. This is the shape a wrapper component takes,
+		* where the variants are the component's public API and cannot be literals by definition.
+		*
+		* An identifier only. Each variant reads the binding again, and re-reading anything else —
+		* a call, a property access — would evaluate it once per axis instead of once.
+		*/
+		if (ts_morph.Node.isIdentifier(arg)) {
+			const binding = arg.getText();
+			for (const key of Object.keys(config.variants ?? {})) dynamicAxes.set(key, `${binding}${propertyAccess(key)}`);
+		} else if (!ts_morph.Node.isObjectLiteralExpression(arg)) return {
+			kind: "decline",
+			reason: "dynamic"
+		};
+		else for (const property of arg.getProperties()) {
 			if (ts_morph.Node.isSpreadAssignment(property)) return {
 				kind: "decline",
 				reason: "dynamic"
@@ -937,14 +966,27 @@ const lowerRecipeCall = (call, entry, ctx, resolvedSelection) => {
 				kind: "decline",
 				reason: "dynamic"
 			};
-			const literal = literalValue(property.getInitializer());
+			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)) {
-				const initializer = property.getInitializer();
 				if (!initializer) return {
 					kind: "decline",
 					reason: "dynamic"
@@ -962,24 +1004,47 @@ const lowerRecipeCall = (call, entry, ctx, resolvedSelection) => {
 			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) return {
-		kind: "class",
-		className: (0, _bamboocss_shared.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];
+		if (!everyEffectSurvives()) return {
+			kind: "decline",
+			reason: "dynamic"
+		};
 		return {
 			kind: "class",
-			className: (0, _bamboocss_shared.getRecipeClassNames)(name, config.variants, staticOnly, ctx.utility.separator, format)
+			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];
@@ -988,7 +1053,8 @@ const lowerRecipeCall = (call, entry, ctx, resolvedSelection) => {
 		if (expression === void 0) {
 			const value = merged[key];
 			if (value == null) continue;
-			if (config.variants?.[key]?.[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);
@@ -1371,7 +1437,7 @@ const hasStyles = (data) => data.length > 0 && data.every((entry) => entry != nu
 const argumentsAccountedFor = (call, boxNode) => {
 	if (!ts_morph.Node.isCallExpression(call)) return false;
 	const args = call.getArguments();
-	if (args.length === 0) return false;
+	if (args.length === 0) return true;
 	if (_bamboocss_extractor.box.isArray(boxNode) && boxNode.getNode() === call) {
 		if (boxNode.value.length !== args.length) return false;
 		return args.every((arg, index) => accountsForSource(arg, boxNode.value[index]));
@@ -1496,6 +1562,8 @@ const foldSource = (options) => {
 	* saving real, and it is only correct to claim it once nothing reads the binding.
 	*/
 	const recipeCalls = /* @__PURE__ */ new Map();
+	/** Bindings whose `splitVariantProps` was rewritten, so that access no longer reads them. */
+	const loweredSplitProps = /* @__PURE__ */ new Set();
 	/** Ranges already reported as declined, so one call is never counted twice. */
 	const reportedRanges = /* @__PURE__ */ new Set();
 	const importCache = /* @__PURE__ */ new Map();
@@ -1635,12 +1703,9 @@ const foldSource = (options) => {
 					recipeCalls.set(name, tally);
 					const resolvedSelection = item.data?.length === 1 ? item.data[0] : void 0;
 					const entry = recipeConfigs.get(name);
-					const lowered = ts_morph.Node.isCallExpression(call) && call.getArguments().every(isInertExpression) ? lowerRecipeCall(call, entry, ctx, resolvedSelection) : {
-						kind: "decline",
-						reason: "dynamic"
-					};
+					const lowered = lowerRecipeCall(call, entry, ctx, isInertExpression, resolvedSelection);
 					if (lowered.kind === "expression") {
-						const helper = ensureRecipeHelperImport(call, isBambooCssModule, isGeneratedCssModule, isShadowed);
+						const helper = ensureRecipeHelperImport(RECIPE_PICK_HELPER, call, isBambooCssModule, isGeneratedCssModule, isShadowed);
 						if (helper) {
 							tally.lowered++;
 							candidates.push({
@@ -1751,7 +1816,7 @@ const foldSource = (options) => {
 			});
 			continue;
 		}
-		if (!isStaticBox(item.box) || !hasStyles(item.data) || !argumentsAccountedFor(call, item.box)) {
+		if (!(ts_morph.Node.isCallExpression(call) && call.getArguments().length === 0 && item.data.length === 1) && !isStaticBox(item.box) || !hasStyles(item.data) || !argumentsAccountedFor(call, item.box)) {
 			const partial = partial_ ? tryPartial(item, call, rootName) : void 0;
 			if (partial) {
 				candidates.push({
@@ -1891,6 +1956,30 @@ const foldSource = (options) => {
 		});
 		collectSourceFiles(item.box, dependencyScan);
 	}
+	const recipeSourceFile = recipeConfigs?.size ? [...recipeConfigs.values()].find((entry) => entry.box)?.box?.getNode?.()?.getSourceFile() : void 0;
+	if (recipeSourceFile) for (const access of recipeSourceFile.getDescendantsOfKind(ts_morph.SyntaxKind.PropertyAccessExpression)) {
+		if (access.getName() !== "splitVariantProps") continue;
+		const target = access.getExpression();
+		if (!ts_morph.Node.isIdentifier(target)) continue;
+		const entry = recipeConfigs?.get(target.getText());
+		if (!entry || entry === AMBIGUOUS) continue;
+		if (isShadowed(access, target.getText())) continue;
+		const call = access.getParent();
+		if (!ts_morph.Node.isCallExpression(call) || call.getExpression() !== access) continue;
+		const args = call.getArguments();
+		if (args.length !== 1) continue;
+		const start = call.getStart();
+		const end = call.getEnd();
+		if (code.slice(start, end) !== call.getText()) continue;
+		if (collides([[start, end]])) continue;
+		const helper = ensureRecipeHelperImport(SPLIT_PROPS_HELPER, call, isBambooCssModule, isGeneratedCssModule, isShadowed);
+		if (!helper) continue;
+		const keys = Object.keys(entry.config.variants ?? {});
+		magic.overwrite(start, end, `${helper.name}(${args[0].getText()}, ${JSON.stringify(keys)})`);
+		applyInsert(helper.insert);
+		applied.push([start, end]);
+		loweredSplitProps.add(target.getText());
+	}
 	for (const [binding, tally] of recipeCalls) {
 		if (!tally.seen || tally.lowered !== tally.seen) continue;
 		const definition = recipeConfigs?.get(binding)?.box?.getNode?.();

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.

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";

package/dist/index.mjs

@@ -768,6 +768,8 @@ const collectRecipeConfigs = (parserResult) => {
 };
 /** The generated binding a lowered dynamic axis calls. Lives in `cx`, which pulls no engine. */
 const RECIPE_PICK_HELPER = "cvaPick";
+/** What `recipe.splitVariantProps` calls, reached directly once the call is lowered. */
+const SPLIT_PROPS_HELPER = "splitProps";
 const HELPER = RECIPE_PICK_HELPER;
 /** Marker for a binding the fold must never resolve — declared twice, or unresolvable. */
 const AMBIGUOUS = Object.freeze({
@@ -775,6 +777,9 @@ const AMBIGUOUS = Object.freeze({
 	name: "",
 	box: void 0
 });
+/** `.size`, or `["x-large"]` when the variant is not a valid identifier. */
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
+const propertyAccess = (key) => IDENTIFIER.test(key) ? `.${key}` : `[${JSON.stringify(key)}]`;
 const LITERAL_KINDS = new Set([
 	SyntaxKind.StringLiteral,
 	SyntaxKind.NoSubstitutionTemplateLiteral,
@@ -818,7 +823,7 @@ const propertyKey = (nameNode) => {
 * 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 ensureRecipeHelperImport = (imported, call, isBambooCssModule, isGeneratedCssModule, isShadowed) => {
 	const sourceFile = call.getSourceFile();
 	let host;
 	for (const declaration of sourceFile.getImportDeclarations()) {
@@ -826,7 +831,7 @@ const ensureRecipeHelperImport = (call, isBambooCssModule, isGeneratedCssModule,
 		if (declaration.isTypeOnly()) continue;
 		for (const named of declaration.getNamedImports()) {
 			if (named.isTypeOnly()) continue;
-			if (named.getNameNode().getText() === "cvaPick") {
+			if (named.getNameNode().getText() === imported) {
 				if (!isBambooCssModule(mod)) return void 0;
 				const local = (named.getAliasNode() ?? named.getNameNode()).getText();
 				return isShadowed(call, local) ? void 0 : { name: local };
@@ -835,15 +840,15 @@ const ensureRecipeHelperImport = (call, isBambooCssModule, isGeneratedCssModule,
 		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;
+	if (declaredAtModuleScope(sourceFile).has(imported)) return void 0;
+	if (isShadowed(call, imported)) return void 0;
 	const last = host.getNamedImports().at(-1);
 	if (!last) return void 0;
 	return {
-		name: RECIPE_PICK_HELPER,
+		name: imported,
 		insert: {
 			pos: last.getEnd(),
-			names: [RECIPE_PICK_HELPER]
+			names: [imported]
 		}
 	};
 };
@@ -854,7 +859,7 @@ const ensureRecipeHelperImport = (call, isBambooCssModule, isGeneratedCssModule,
 * 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) => {
+const lowerRecipeCall = (call, entry, ctx, isInert, resolvedSelection) => {
 	if (!entry || entry === AMBIGUOUS) return {
 		kind: "decline",
 		reason: "unknown-recipe"
@@ -880,13 +885,37 @@ const lowerRecipeCall = (call, entry, ctx, resolvedSelection) => {
 	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 {
+		if (!arg) return {
 			kind: "decline",
 			reason: "dynamic"
 		};
-		for (const property of arg.getProperties()) {
+		/**
+		* `input(variantProps)` — a selection the build cannot see inside.
+		*
+		* The classes are still knowable: a recipe emits one per declared variant, so the call is
+		* one term per variant reading that binding. This is the shape a wrapper component takes,
+		* where the variants are the component's public API and cannot be literals by definition.
+		*
+		* An identifier only. Each variant reads the binding again, and re-reading anything else —
+		* a call, a property access — would evaluate it once per axis instead of once.
+		*/
+		if (Node.isIdentifier(arg)) {
+			const binding = arg.getText();
+			for (const key of Object.keys(config.variants ?? {})) dynamicAxes.set(key, `${binding}${propertyAccess(key)}`);
+		} else if (!Node.isObjectLiteralExpression(arg)) return {
+			kind: "decline",
+			reason: "dynamic"
+		};
+		else for (const property of arg.getProperties()) {
 			if (Node.isSpreadAssignment(property)) return {
 				kind: "decline",
 				reason: "dynamic"
@@ -910,14 +939,27 @@ const lowerRecipeCall = (call, entry, ctx, resolvedSelection) => {
 				kind: "decline",
 				reason: "dynamic"
 			};
-			const literal = literalValue(property.getInitializer());
+			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)) {
-				const initializer = property.getInitializer();
 				if (!initializer) return {
 					kind: "decline",
 					reason: "dynamic"
@@ -935,24 +977,47 @@ const lowerRecipeCall = (call, entry, ctx, resolvedSelection) => {
 			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) 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];
+		if (!everyEffectSurvives()) return {
+			kind: "decline",
+			reason: "dynamic"
+		};
 		return {
 			kind: "class",
-			className: getRecipeClassNames(name, config.variants, staticOnly, ctx.utility.separator, format)
+			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];
@@ -961,7 +1026,8 @@ const lowerRecipeCall = (call, entry, ctx, resolvedSelection) => {
 		if (expression === void 0) {
 			const value = merged[key];
 			if (value == null) continue;
-			if (config.variants?.[key]?.[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);
@@ -1344,7 +1410,7 @@ const hasStyles = (data) => data.length > 0 && data.every((entry) => entry != nu
 const argumentsAccountedFor = (call, boxNode) => {
 	if (!Node.isCallExpression(call)) return false;
 	const args = call.getArguments();
-	if (args.length === 0) return false;
+	if (args.length === 0) return true;
 	if (box.isArray(boxNode) && boxNode.getNode() === call) {
 		if (boxNode.value.length !== args.length) return false;
 		return args.every((arg, index) => accountsForSource(arg, boxNode.value[index]));
@@ -1469,6 +1535,8 @@ const foldSource = (options) => {
 	* saving real, and it is only correct to claim it once nothing reads the binding.
 	*/
 	const recipeCalls = /* @__PURE__ */ new Map();
+	/** Bindings whose `splitVariantProps` was rewritten, so that access no longer reads them. */
+	const loweredSplitProps = /* @__PURE__ */ new Set();
 	/** Ranges already reported as declined, so one call is never counted twice. */
 	const reportedRanges = /* @__PURE__ */ new Set();
 	const importCache = /* @__PURE__ */ new Map();
@@ -1608,12 +1676,9 @@ const foldSource = (options) => {
 					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"
-					};
+					const lowered = lowerRecipeCall(call, entry, ctx, isInertExpression, resolvedSelection);
 					if (lowered.kind === "expression") {
-						const helper = ensureRecipeHelperImport(call, isBambooCssModule, isGeneratedCssModule, isShadowed);
+						const helper = ensureRecipeHelperImport(RECIPE_PICK_HELPER, call, isBambooCssModule, isGeneratedCssModule, isShadowed);
 						if (helper) {
 							tally.lowered++;
 							candidates.push({
@@ -1724,7 +1789,7 @@ const foldSource = (options) => {
 			});
 			continue;
 		}
-		if (!isStaticBox(item.box) || !hasStyles(item.data) || !argumentsAccountedFor(call, item.box)) {
+		if (!(Node.isCallExpression(call) && call.getArguments().length === 0 && item.data.length === 1) && !isStaticBox(item.box) || !hasStyles(item.data) || !argumentsAccountedFor(call, item.box)) {
 			const partial = partial_ ? tryPartial(item, call, rootName) : void 0;
 			if (partial) {
 				candidates.push({
@@ -1864,6 +1929,30 @@ const foldSource = (options) => {
 		});
 		collectSourceFiles(item.box, dependencyScan);
 	}
+	const recipeSourceFile = recipeConfigs?.size ? [...recipeConfigs.values()].find((entry) => entry.box)?.box?.getNode?.()?.getSourceFile() : void 0;
+	if (recipeSourceFile) for (const access of recipeSourceFile.getDescendantsOfKind(SyntaxKind.PropertyAccessExpression)) {
+		if (access.getName() !== "splitVariantProps") continue;
+		const target = access.getExpression();
+		if (!Node.isIdentifier(target)) continue;
+		const entry = recipeConfigs?.get(target.getText());
+		if (!entry || entry === AMBIGUOUS) continue;
+		if (isShadowed(access, target.getText())) continue;
+		const call = access.getParent();
+		if (!Node.isCallExpression(call) || call.getExpression() !== access) continue;
+		const args = call.getArguments();
+		if (args.length !== 1) continue;
+		const start = call.getStart();
+		const end = call.getEnd();
+		if (code.slice(start, end) !== call.getText()) continue;
+		if (collides([[start, end]])) continue;
+		const helper = ensureRecipeHelperImport(SPLIT_PROPS_HELPER, call, isBambooCssModule, isGeneratedCssModule, isShadowed);
+		if (!helper) continue;
+		const keys = Object.keys(entry.config.variants ?? {});
+		magic.overwrite(start, end, `${helper.name}(${args[0].getText()}, ${JSON.stringify(keys)})`);
+		applyInsert(helper.insert);
+		applied.push([start, end]);
+		loweredSplitProps.add(target.getText());
+	}
 	for (const [binding, tally] of recipeCalls) {
 		if (!tally.seen || tally.lowered !== tally.seen) continue;
 		const definition = recipeConfigs?.get(binding)?.box?.getNode?.();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/vite",
-  "version": "1.23.0",
+  "version": "1.25.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/core": "1.23.0",
-    "@bamboocss/extractor": "1.23.0",
-    "@bamboocss/config": "1.23.0",
-    "@bamboocss/node": "1.23.0",
-    "@bamboocss/logger": "1.23.0",
-    "@bamboocss/shared": "1.23.0",
-    "@bamboocss/types": "1.23.0"
+    "@bamboocss/config": "1.25.0",
+    "@bamboocss/core": "1.25.0",
+    "@bamboocss/extractor": "1.25.0",
+    "@bamboocss/logger": "1.25.0",
+    "@bamboocss/node": "1.25.0",
+    "@bamboocss/types": "1.25.0",
+    "@bamboocss/shared": "1.25.0"
   },
   "devDependencies": {
     "@jridgewell/trace-mapping": "^0.3.31",
     "vite": "7.2.6",
-    "@bamboocss/fixture": "1.23.0"
+    "@bamboocss/fixture": "1.25.0"
   },
   "peerDependencies": {
     "vite": ">=5"