styled-components-to-stylex-codemod 0.0.26 → 0.0.28

package/dist/transform.mjs

@@ -591,6 +591,51 @@ function literalToString(node) {
 	return typeof v === "string" ? v : null;
 }
 /**
+* Scans the file AST for TypeScript string/numeric enum declarations and
+* returns a two-level map: enumName -> memberName -> static value.
+* Only handles members with literal initializers.
+*/
+function buildEnumValueMap(root, j) {
+	const map = /* @__PURE__ */ new Map();
+	root.find(j.TSEnumDeclaration).forEach((path) => {
+		const enumNode = path.value;
+		const enumName = enumNode.id.name;
+		const members = /* @__PURE__ */ new Map();
+		let nextNumericValue = 0;
+		for (const member of enumNode.members) {
+			const memberName = member.id.type === "Identifier" ? member.id.name : member.id.value;
+			if (member.initializer) {
+				const val = literalToStaticValue(member.initializer);
+				if (val !== null) {
+					members.set(memberName, val);
+					nextNumericValue = typeof val === "number" ? val + 1 : 0;
+				}
+			} else {
+				members.set(memberName, nextNumericValue);
+				nextNumericValue++;
+			}
+		}
+		if (members.size > 0) map.set(enumName, members);
+	});
+	return map;
+}
+/**
+* Resolves a MemberExpression node (e.g., `ProgressType.success`) to its
+* static enum value using a pre-built enum map. Returns null if the node
+* is not a MemberExpression or doesn't reference a known enum member.
+*/
+function resolveStaticExpressionValue(node, enumValueMap) {
+	const v = literalToStaticValue(node);
+	if (v !== null) return v;
+	if (!enumValueMap || !node || typeof node !== "object") return null;
+	const n = node;
+	if (n.type !== "MemberExpression" || n.computed) return null;
+	const obj = n.object;
+	const prop = n.property;
+	if (obj?.type !== "Identifier" || !obj.name || prop?.type !== "Identifier" || !prop.name) return null;
+	return enumValueMap.get(obj.name)?.get(prop.name) ?? null;
+}
+/**
 * Returns true if an AST node represents an "empty" CSS branch value.
 * Styled-components treats falsy interpolations as "omit this declaration".
 *
@@ -674,6 +719,16 @@ function unwrapLogicalFallback(expr) {
 	return null;
 }
 /**
+* Returns true when `expr` is a `??` / `||` logical expression whose
+* right-hand side is a non-literal value (e.g., `props.fallbackColor`).
+*
+* Used to bail on theme resolution when the fallback references a runtime
+* value the user depends on — dropping it silently would change semantics.
+*/
+function hasNonLiteralLogicalFallback(expr) {
+	return isLogicalExpressionNode(expr) && (expr.operator === "??" || expr.operator === "||") && literalToStaticValue(expr.right) === null;
+}
+/**
 * Type guard for ConditionalExpression nodes.
 */
 function isConditionalExpressionNode(node) {
@@ -1360,7 +1415,7 @@ const isValidIdentifier = (name) => /^[$A-Z_][0-9A-Z_$]*$/i.test(name);
 * - Disjunction: `"a || b"` → `a || b`
 * - Grouped negation: `"!(a || b)"` → `!(a || b)`
 */
-function parseVariantWhenToAst(j, when) {
+function parseVariantWhenToAst(j, when, booleanProps) {
 	const buildMemberExpr = (raw) => {
 		if (!raw.includes(".")) return null;
 		const parts = raw.split(".").map((part) => part.trim()).filter(Boolean);
@@ -1414,7 +1469,7 @@ function parseVariantWhenToAst(j, when) {
 		isBoolean: true
 	};
 	if (trimmed.startsWith("!(") && trimmed.endsWith(")")) {
-		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(2, -1).trim());
+		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(2, -1).trim(), booleanProps);
 		return {
 			cond: j.unaryExpression("!", innerParsed.cond),
 			props: innerParsed.props,
@@ -1422,7 +1477,7 @@ function parseVariantWhenToAst(j, when) {
 		};
 	}
 	if (trimmed.includes("&&")) {
-		const parsed = trimmed.split("&&").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p));
+		const parsed = trimmed.split("&&").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps));
 		const firstParsed = parsed[0];
 		if (!firstParsed) return {
 			cond: j.identifier("true"),
@@ -1436,7 +1491,7 @@ function parseVariantWhenToAst(j, when) {
 		};
 	}
 	if (trimmed.includes(" || ")) {
-		const parsed = trimmed.split(" || ").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p));
+		const parsed = trimmed.split(" || ").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps));
 		const firstParsedOr = parsed[0];
 		if (!firstParsedOr) return {
 			cond: j.identifier("true"),
@@ -1450,7 +1505,7 @@ function parseVariantWhenToAst(j, when) {
 		};
 	}
 	if (trimmed.startsWith("!")) {
-		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(1).trim());
+		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(1).trim(), booleanProps);
 		return {
 			cond: j.unaryExpression("!", innerParsed.cond),
 			props: innerParsed.props,
@@ -1471,10 +1526,11 @@ function parseVariantWhenToAst(j, when) {
 		};
 	}
 	const simple = parsePropRef(trimmed);
+	const propIsBoolean = !!(simple.propName && booleanProps?.has(simple.propName));
 	return {
 		cond: simple.expr,
 		props: simple.propName ? [simple.propName] : [],
-		isBoolean: false
+		isBoolean: propIsBoolean
 	};
 }
 /**
@@ -1483,8 +1539,8 @@ function parseVariantWhenToAst(j, when) {
 * function's parameter destructuring.
 */
 function collectConditionProps(j, args) {
-	const { when, destructureProps } = args;
-	const parsed = parseVariantWhenToAst(j, when);
+	const { when, destructureProps, booleanProps } = args;
+	const parsed = parseVariantWhenToAst(j, when, booleanProps);
 	if (destructureProps) {
 		for (const p of parsed.props) if (p && !destructureProps.includes(p)) destructureProps.push(p);
 	}
@@ -1492,8 +1548,9 @@ function collectConditionProps(j, args) {
 }
 /**
 * Creates a conditional style expression that's safe for stylex.props().
-* For boolean conditions, uses && (since false is valid for stylex.props).
-* For non-boolean conditions (could be "" or 0), uses ternary with undefined fallback.
+* For boolean conditions, uses `cond && expr` (since `false` is a valid StyleXArray element).
+* For non-boolean conditions, uses `cond ? expr : undefined` to avoid producing
+* values like `""` or `0` which are not valid StyleXArray elements.
 */
 function makeConditionalStyleExpr(j, args) {
 	const { cond, expr, isBoolean } = args;
@@ -1525,7 +1582,7 @@ function areEquivalentWhen(left, right) {
 * `prop ? trueExpr : falseExpr` instead of emitting separate conditionals.
 */
 function buildExtraStylexPropsExprs(j, args) {
-	const { entries, destructureProps } = args;
+	const { entries, destructureProps, booleanProps } = args;
 	const result = [];
 	const consumed = /* @__PURE__ */ new Set();
 	for (let i = 0; i < entries.length; i++) {
@@ -1552,7 +1609,8 @@ function buildExtraStylexPropsExprs(j, args) {
 		}
 		const { cond, isBoolean } = collectConditionProps(j, {
 			when: entry.when,
-			destructureProps
+			destructureProps,
+			booleanProps
 		});
 		result.push(makeConditionalStyleExpr(j, {
 			cond,
@@ -1880,10 +1938,11 @@ function analyzeBeforeEmitStep(ctx) {
 		if (decl.isDirectJsxResolution) continue;
 		if (decl.base.kind !== "intrinsic") continue;
 		if (relationChildStyleKeys.has(decl.styleKey)) continue;
-		if (decl.promotedStyleProps?.length) continue;
+		const usageCount = getJsxUsageCount(decl.localName);
+		if (decl.promotedStyleProps?.length && decl.promotedStyleProps.length >= usageCount) continue;
 		const { ref } = getJsxAttributeUsage(decl.localName);
 		if (ref) continue;
-		if (getJsxUsageCount(decl.localName) > INLINE_USAGE_THRESHOLD) decl.needsWrapperComponent = true;
+		if (usageCount > INLINE_USAGE_THRESHOLD) decl.needsWrapperComponent = true;
 	}
 	const hasSpreadInJsx = (name) => {
 		let found = false;
@@ -1970,11 +2029,13 @@ function analyzeBeforeEmitStep(ctx) {
 		existingPropNames.add("className").add("style").add("children").add("ref").add("key").add("as");
 		if (decl.base.kind === "component") collectBaseComponentPropNames(root, j, decl.base.ident, existingPropNames);
 		if (decl.base.kind === "intrinsic") for (const attr of BLOCKED_INTRINSIC_ATTR_RENAMES[decl.base.tagName] ?? []) existingPropNames.add(attr);
-		if (collectCallSiteAttrNames(root, j, decl.localName, existingPropNames)) continue;
+		const { hasSpread, explicitTransientAtSpreadSites } = collectCallSiteAttrNames(root, j, decl.localName, existingPropNames);
 		const renames = /* @__PURE__ */ new Map();
 		for (const prop of transientProps) {
 			const stripped = prop.slice(1);
-			if (!existingPropNames.has(stripped)) renames.set(prop, stripped);
+			if (existingPropNames.has(stripped)) continue;
+			if (hasSpread && !explicitTransientAtSpreadSites?.has(prop)) continue;
+			renames.set(prop, stripped);
 		}
 		if (renames.size > 0) {
 			if (collectReferencedTypeNames(decl.propsType).some((name) => isTypeNameUsedElsewhere(root, j, name, decl.localName) || !isTypeLocallyDefined(root, j, name))) continue;
@@ -2148,10 +2209,12 @@ function analyzeBeforeEmitStep(ctx) {
 			decl.variantStyleKeys[whenKey] = styleKey;
 		}
 		if (decl.callSiteCombinedStyles?.length) for (const { styleKey, styles } of decl.callSiteCombinedStyles) ctx.resolvedStyleObjects.set(styleKey, styles);
-		if (decl.promotedStyleProps?.length) for (const entry of decl.promotedStyleProps) if (entry.mergeIntoBase) {
+		if (decl.promotedStyleProps?.length) for (const entry of decl.promotedStyleProps) if (entry.mergeIntoBase) if (isAstNode(entry.styleValue)) ctx.resolvedStyleObjects.set(decl.styleKey, entry.styleValue);
+		else {
 			const existing = ctx.resolvedStyleObjects.get(decl.styleKey);
 			if (existing && typeof existing === "object" && !isAstNode(existing)) Object.assign(existing, entry.styleValue);
-		} else ctx.resolvedStyleObjects.set(entry.styleKey, entry.styleValue);
+		}
+		else ctx.resolvedStyleObjects.set(entry.styleKey, entry.styleValue);
 	}
 	return CONTINUE;
 }
@@ -2245,19 +2308,26 @@ function collectResolverImportNames(ctx) {
 	}
 	return names;
 }
-/**
-* Collects non-`$`-prefixed attribute names from JSX call sites of a component.
-* Returns true if any call site uses a JSX spread attribute (e.g., `{...props}`),
-* which means the spread may contain `$`-prefixed keys at runtime — all renames
-* must be blocked to prevent mismatches.
-*/
 function collectCallSiteAttrNames(root, j, componentName, names) {
 	let hasSpread = false;
+	const spreadSiteTransientProps = [];
 	const collectFromElement = (openingElement) => {
-		for (const attr of openingElement.attributes ?? []) if (attr.type === "JSXSpreadAttribute") hasSpread = true;
-		else if (attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier") {
+		let siteHasSpread = false;
+		const siteTransientAfterSpread = /* @__PURE__ */ new Set();
+		const siteTransientBeforeSpread = /* @__PURE__ */ new Set();
+		for (const attr of openingElement.attributes ?? []) if (attr.type === "JSXSpreadAttribute") {
+			hasSpread = true;
+			siteHasSpread = true;
+			for (const name of siteTransientAfterSpread) siteTransientBeforeSpread.add(name);
+			siteTransientAfterSpread.clear();
+		} else if (attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier") {
 			const name = attr.name.name;
-			if (!name.startsWith("$")) names.add(name);
+			if (name.startsWith("$")) siteTransientAfterSpread.add(name);
+			else names.add(name);
+		}
+		if (siteHasSpread) {
+			for (const name of siteTransientBeforeSpread) siteTransientAfterSpread.delete(name);
+			spreadSiteTransientProps.push(siteTransientAfterSpread);
 		}
 	};
 	root.find(j.JSXElement, { openingElement: { name: {
@@ -2268,7 +2338,20 @@ function collectCallSiteAttrNames(root, j, componentName, names) {
 		type: "JSXIdentifier",
 		name: componentName
 	} }).forEach((p) => collectFromElement(p.node));
-	return hasSpread;
+	if (!hasSpread) return {
+		hasSpread: false,
+		explicitTransientAtSpreadSites: null
+	};
+	if (spreadSiteTransientProps.length === 0) return {
+		hasSpread: true,
+		explicitTransientAtSpreadSites: /* @__PURE__ */ new Set()
+	};
+	const intersection = new Set(spreadSiteTransientProps[0]);
+	for (let i = 1; i < spreadSiteTransientProps.length; i++) for (const prop of intersection) if (!spreadSiteTransientProps[i].has(prop)) intersection.delete(prop);
+	return {
+		hasSpread: true,
+		explicitTransientAtSpreadSites: intersection
+	};
 }
 /**
 * Collects prop names from a locally-defined base component's type that match
@@ -2382,6 +2465,7 @@ function applyTransientPropRenames(decl, renames) {
 	}
 	if (decl.styleFnFromProps) for (const sf of decl.styleFnFromProps) {
 		sf.jsxProp = renames.get(sf.jsxProp) ?? sf.jsxProp;
+		if (sf.propsObjectKey) sf.propsObjectKey = renames.get(sf.propsObjectKey) ?? sf.propsObjectKey;
 		if (sf.conditionWhen) sf.conditionWhen = renamePropsInWhenString(sf.conditionWhen, renames);
 		if (sf.callArg) renameIdentifiersInAst(sf.callArg, renames);
 	}
@@ -2466,7 +2550,6 @@ function renameIdentifiersInAst(node, renames) {
 	if (n.type === "Identifier" && typeof n.name === "string") {
 		const renamed = renames.get(n.name);
 		if (renamed) n.name = renamed;
-		return;
 	}
 	for (const [key, value] of Object.entries(n)) {
 		if (AST_METADATA_KEYS.has(key)) continue;
@@ -2621,8 +2704,11 @@ const NUMERIC_CSS_PROPS = new Set([
 	"widows",
 	"columnCount"
 ]);
-/** CSS properties that accept both numeric and string values (e.g., grid line numbers or span syntax). */
-const NUMBER_OR_STRING_CSS_PROPS = new Set([
+/**
+* CSS properties that accept numeric values in standard CSS / React inline styles
+* but are typed as `string` in StyleX. Numeric values must be coerced to strings.
+*/
+const STYLEX_STRING_ONLY_CSS_PROPS = new Set([
 	"gridRow",
 	"gridColumn",
 	"gridRowStart",
@@ -2635,16 +2721,22 @@ const IDENTIFIER_NAME_RE = /^[$A-Z_][0-9A-Z_$]*$/i;
 function isValidIdentifierName$1(name) {
 	return IDENTIFIER_NAME_RE.test(name);
 }
+function coerceToStringForStyleX(cssProp, value) {
+	if (STYLEX_STRING_ONLY_CSS_PROPS.has(cssProp) && typeof value === "number") return String(value);
+	return value;
+}
 /**
 * Infers a TS type keyword for a dynamic expression based on the CSS property it's assigned to.
 * Numeric-only properties get `number`; ambiguous length-like values get `number | string`.
+* Properties in STYLEX_STRING_ONLY_CSS_PROPS always get `string` even when the value is numeric.
 */
 function inferTypeForCssProp(cssProp, expr) {
+	if (STYLEX_STRING_ONLY_CSS_PROPS.has(cssProp)) return "string";
 	const staticVal = literalToStaticValue(expr);
 	if (typeof staticVal === "number") return "number";
 	if (typeof staticVal === "string") return "string";
 	if (NUMERIC_CSS_PROPS.has(cssProp)) return "number";
-	if (NUMBER_OR_STRING_CSS_PROPS.has(cssProp) || LENGTH_LIKE_CSS_PROP_RE.test(cssProp)) return "numberOrString";
+	if (LENGTH_LIKE_CSS_PROP_RE.test(cssProp)) return "numberOrString";
 	return "string";
 }
 /**
@@ -2773,7 +2865,7 @@ function analyzePromotableStyleProps(root, j, styledDecls, declByLocal, getJsxUs
 			const hasDynamic = site.properties.some((p) => p.dynamicExpr !== null);
 			if (allStatic && !hasDynamic) {
 				const staticObj = {};
-				for (const p of site.properties) staticObj[p.key] = p.staticValue;
+				for (const p of site.properties) staticObj[p.key] = coerceToStringForStyleX(p.key, p.staticValue);
 				if (usageCount <= 1 && !decl.isExported && !hasPropertyOverlap(staticObj, resolvedStyleObjects.get(decl.styleKey))) {
 					promotedEntries.push({
 						styleKey: decl.styleKey,
@@ -2791,15 +2883,31 @@ function analyzePromotableStyleProps(root, j, styledDecls, declByLocal, getJsxUs
 					site.opening.__promotedStyleKey = styleKey;
 				}
 			} else if (hasDynamic) {
-				const styleKey = generatePromotedDynamicStyleKey(decl.styleKey, usedKeyNames, site.children);
-				usedKeyNames.add(styleKey);
-				const staticObj = {};
+				const inlineStaticObj = {};
 				const dynamicParams = [];
-				for (const p of site.properties) if (p.staticValue !== null) staticObj[p.key] = p.staticValue;
+				for (const p of site.properties) if (p.staticValue !== null) inlineStaticObj[p.key] = coerceToStringForStyleX(p.key, p.staticValue);
 				else dynamicParams.push({
 					cssProp: p.key,
 					expr: p.dynamicExpr
 				});
+				const baseObj = resolvedStyleObjects.get(decl.styleKey);
+				const baseIsSimpleObject = baseObj && typeof baseObj === "object" && !isAstNode(baseObj) && Object.values(baseObj).every((v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean" || isAstNode(v));
+				const isExtendedByOther = styledDecls.some((d) => d !== decl && d.base.kind === "component" && d.base.ident === decl.localName);
+				const canMergeDynamic = usageCount <= 1 && !decl.isExported && !isExtendedByOther && baseIsSimpleObject && !hasPropertyOverlap(inlineStaticObj, baseObj);
+				const dynamicPropKeys = new Set(dynamicParams.map((dp) => dp.cssProp));
+				const mergedStaticProps = [];
+				if (canMergeDynamic) {
+					for (const [k, v] of Object.entries(baseObj)) if (!dynamicPropKeys.has(k)) mergedStaticProps.push({
+						key: k,
+						value: v
+					});
+				}
+				for (const [k, v] of Object.entries(inlineStaticObj)) mergedStaticProps.push({
+					key: k,
+					value: v
+				});
+				const styleKey = canMergeDynamic ? decl.styleKey : generatePromotedDynamicStyleKey(decl.styleKey, usedKeyNames, site.children);
+				if (!canMergeDynamic) usedKeyNames.add(styleKey);
 				const paramEntries = [];
 				const seenParamNames = /* @__PURE__ */ new Set();
 				for (const dp of dynamicParams) {
@@ -2819,24 +2927,34 @@ function analyzePromotableStyleProps(root, j, styledDecls, declByLocal, getJsxUs
 					id.typeAnnotation = j.tsTypeAnnotation(typeNode);
 					return id;
 				});
-				const bodyProperties = site.properties.map((p) => {
-					if (p.staticValue !== null) {
-						const val = typeof p.staticValue === "string" ? j.stringLiteral(p.staticValue) : typeof p.staticValue === "number" ? j.numericLiteral(p.staticValue) : j.booleanLiteral(p.staticValue);
-						return j.property("init", j.identifier(p.key), val);
-					} else {
-						const prop = j.property("init", j.identifier(p.key), j.identifier(p.key));
-						prop.shorthand = true;
-						return prop;
-					}
-				});
+				const bodyProperties = [];
+				for (const sp of mergedStaticProps) {
+					const val = isAstNode(sp.value) ? sp.value : typeof sp.value === "string" ? j.stringLiteral(sp.value) : typeof sp.value === "number" ? j.numericLiteral(sp.value) : j.booleanLiteral(sp.value);
+					bodyProperties.push(j.property("init", j.identifier(sp.key), val));
+				}
+				for (const p of site.properties) if (p.dynamicExpr !== null) {
+					const prop = j.property("init", j.identifier(p.key), j.identifier(p.key));
+					prop.shorthand = true;
+					bodyProperties.push(prop);
+				}
 				const fnNode = j.arrowFunctionExpression(params, j.objectExpression(bodyProperties));
-				promotedEntries.push({
-					styleKey,
-					styleValue: fnNode
-				});
-				site.opening.__promotedStyleKey = styleKey;
-				const callArgs = dynamicParams.map((dp) => dp.expr);
-				site.opening.__promotedStyleArgs = callArgs;
+				if (canMergeDynamic) {
+					promotedEntries.push({
+						styleKey: decl.styleKey,
+						styleValue: fnNode,
+						mergeIntoBase: true
+					});
+					site.opening.__promotedMergeIntoBase = true;
+					site.opening.__promotedMergeArgs = dynamicParams.map((dp) => STYLEX_STRING_ONLY_CSS_PROPS.has(dp.cssProp) ? j.callExpression(j.identifier("String"), [dp.expr]) : dp.expr);
+				} else {
+					promotedEntries.push({
+						styleKey,
+						styleValue: fnNode
+					});
+					site.opening.__promotedStyleKey = styleKey;
+					const callArgs = dynamicParams.map((dp) => STYLEX_STRING_ONLY_CSS_PROPS.has(dp.cssProp) ? j.callExpression(j.identifier("String"), [dp.expr]) : dp.expr);
+					site.opening.__promotedStyleArgs = callArgs;
+				}
 			}
 		}
 		if (promotedEntries.length > 0) decl.promotedStyleProps = promotedEntries;
@@ -4434,6 +4552,14 @@ function printNode(node) {
 function areAllValuesSame(values) {
 	return values.length > 1 && values.every((value) => value === values[0]);
 }
+/**
+* Shorthands that StyleX requires to be fully expanded to physical longhands.
+* Unlike `padding`/`margin` (which StyleX's Babel plugin can expand internally),
+* `scrollPadding`/`scrollMargin` and their logical forms (Block/Inline) are not
+* recognized by `@stylexjs/valid-styles` and must always be written as
+* Top/Right/Bottom/Left.
+*/
+const PHYSICAL_ONLY_SHORTHANDS = new Set(["scrollMargin", "scrollPadding"]);
 function expandQuadValues(values) {
 	const top = values[0] ?? "";
 	const right = values[1] ?? top;
@@ -4465,12 +4591,13 @@ function splitDirectionalProperty(args) {
 	const bottom = values[2] ?? top;
 	const left = values[3] ?? right;
 	const withImportant = (value) => important ? `${value} !important` : value;
-	if (values.length === 1 && !important && !alwaysExpand) return [{
+	const physicalOnly = PHYSICAL_ONLY_SHORTHANDS.has(prop);
+	if (values.length === 1 && !important && !alwaysExpand && !physicalOnly) return [{
 		prop,
 		value: withImportant(top)
 	}];
 	const quad = expandQuadValues(values);
-	if (important) return [
+	if (important || physicalOnly) return [
 		{
 			prop: `${prop}Top`,
 			value: withImportant(quad[0])
@@ -7991,8 +8118,8 @@ function buildInlineResolverVariantDimensions(args) {
 			return type === "ArrowFunctionExpression" || type === "FunctionExpression";
 		});
 		const hasCompleteCallsiteVisibility = !willHaveExternalInterface(ctx, decl, styledDecls) && !decl.usedAsValue;
-		if (variantKeys.length === 1 && !hasPropReferencingTemplateExpressions) {
-			if (hasCompleteCallsiteVisibility) {
+		if (variantKeys.length === 1) {
+			if (hasCompleteCallsiteVisibility && !hasPropReferencingTemplateExpressions) {
 				if (usageResult.propsByUsage.filter((siteProps) => propName in siteProps).length === totalCallSites) {
 					const [, singleVariantStyles] = Object.entries(variants)[0];
 					for (const [cssKey, cssVal] of Object.entries(singleVariantStyles)) foldedBaseSx[cssKey] = String(cssVal);
@@ -9625,6 +9752,22 @@ function buildVariantDimPropTypeMap(d) {
 		return [dim.propName, typeText];
 	}));
 }
+/**
+* Collects prop names that are known to have `boolean` type from all available sources:
+* - `staticBooleanVariants` without a variantKey (confirmed boolean from prepass)
+* - `variantDimensions` with `isBooleanProp` flag
+* - `propsType` AST type literal with `boolean` type annotations
+*
+* Used to emit `cond && styles.key` (valid for StyleXArray since `false` is accepted)
+* instead of `cond ? styles.key : undefined` for boolean-guarded variant conditions.
+*/
+function collectBooleanPropNames(d) {
+	const result = /* @__PURE__ */ new Set();
+	for (const sbv of d.staticBooleanVariants ?? []) if (!sbv.variantKey) result.add(sbv.propName);
+	for (const dim of d.variantDimensions ?? []) if (dim.isBooleanProp) result.add(dim.propName);
+	collectBooleanPropsFromTypeLiteral(d.propsType, result);
+	return result;
+}
 function getAttrsAsString(d) {
 	const v = d.attrsInfo?.staticAttrs?.as;
 	return typeof v === "string" ? v : null;
@@ -9658,6 +9801,41 @@ function injectStylePropsIntoTypeLiteralString(typeText, options) {
 	}
 	return `${typeText} & { ${propsToAdd.join(", ")} }`;
 }
+function collectBooleanPropsFromTypeLiteral(node, result) {
+	for (const name of extractBooleanProps(node)) {
+		result.add(name);
+		if (name.startsWith("$")) result.add(name.slice(1));
+	}
+}
+function extractBooleanProps(node) {
+	const typed = node;
+	if (!typed || typeof typed !== "object") return /* @__PURE__ */ new Set();
+	if (typed.type === "TSTypeLiteral") {
+		const props = /* @__PURE__ */ new Set();
+		for (const member of typed.members ?? []) {
+			if (member?.type !== "TSPropertySignature") continue;
+			const key = member.key;
+			const name = key?.type === "Identifier" ? key.name : null;
+			if (!name) continue;
+			if ((member.typeAnnotation?.typeAnnotation)?.type === "TSBooleanKeyword") props.add(name);
+		}
+		return props;
+	}
+	if (typed.type === "TSIntersectionType") {
+		const combined = /* @__PURE__ */ new Set();
+		for (const t of typed.types ?? []) for (const p of extractBooleanProps(t)) combined.add(p);
+		return combined;
+	}
+	if (typed.type === "TSUnionType") {
+		const arms = (typed.types ?? []).map(extractBooleanProps);
+		if (arms.length === 0) return /* @__PURE__ */ new Set();
+		const first = arms[0];
+		const intersection = /* @__PURE__ */ new Set();
+		for (const name of first) if (arms.every((arm) => arm.has(name))) intersection.add(name);
+		return intersection;
+	}
+	return /* @__PURE__ */ new Set();
+}
 
 //#endregion
 //#region src/internal/emit-wrappers/jsx-builders.ts
@@ -9816,6 +9994,15 @@ function styleRef(j, stylesIdentifier, key) {
 	return j.memberExpression(j.identifier(stylesIdentifier), j.identifier(key));
 }
 /**
+* When a style function uses a `props` object parameter, wraps the raw call
+* argument in `{ [propsObjectKey]: rawArg }`. Returns `rawArg` unchanged when
+* `propsObjectKey` is not set.
+*/
+function wrapCallArgForPropsObject(j, rawArg, propsObjectKey) {
+	if (!propsObjectKey) return rawArg;
+	return j.objectExpression([j.property("init", j.identifier(propsObjectKey), rawArg)]);
+}
+/**
 * Splits a declaration's extra style keys into those that appear before and
 * after the base style in stylex.props() argument order.
 */
@@ -10093,9 +10280,10 @@ function buildStyleFnExpressions(emitter, args) {
 		}
 		return null;
 	};
+	const booleanProps = collectBooleanPropNames(d);
 	for (const p of styleFnPairs) {
 		const propExpr = p.jsxProp === "__props" ? propsId : propExprBuilder(p.jsxProp);
-		const callArg = p.callArg ?? propExpr;
+		const callArg = wrapCallArgForPropsObject(j, p.callArg ?? propExpr, p.propsObjectKey);
 		const call = j.callExpression(styleRef(j, stylesIdentifier, p.fnKey), [callArg]);
 		if (p.callArg?.type === "Identifier") {
 			const name = p.callArg.name;
@@ -10122,7 +10310,8 @@ function buildStyleFnExpressions(emitter, args) {
 		if (p.conditionWhen) {
 			const { cond, isBoolean } = collectConditionProps(j, {
 				when: p.conditionWhen,
-				destructureProps
+				destructureProps,
+				booleanProps
 			});
 			pushExpr(makeConditionalStyleExpr(j, {
 				cond,
@@ -11769,6 +11958,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 		const needsUseTheme = appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, () => ctx.markNeedsUseThemeImport());
 		for (const gp of appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier)) if (!destructureProps.includes(gp)) destructureProps.push(gp);
 		const compoundVariantKeys = collectCompoundVariantKeys(d.compoundVariants);
+		const booleanProps = collectBooleanPropNames(d);
 		const hasSourceOrder = !!(d.variantSourceOrder && Object.keys(d.variantSourceOrder).length > 0);
 		const orderedEntries = [];
 		if (d.variantStyleKeys) {
@@ -11787,7 +11977,8 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 					const positiveWhen = getPositiveWhen(when, otherWhen) ?? when;
 					const { cond } = emitter.collectConditionProps({
 						when: positiveWhen,
-						destructureProps
+						destructureProps,
+						booleanProps
 					});
 					const isCurrentPositive = areEquivalentWhen(when, positiveWhen);
 					const trueKey = isCurrentPositive ? variantKey : otherKey;
@@ -11805,7 +11996,8 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				}
 				const { cond, isBoolean } = emitter.collectConditionProps({
 					when,
-					destructureProps
+					destructureProps,
+					booleanProps
 				});
 				const styleExpr = j.memberExpression(j.identifier(stylesIdentifier), j.identifier(variantKey));
 				const expr = emitter.makeConditionalStyleExpr({
@@ -12167,12 +12359,12 @@ function appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier) {
 * Each entry is mapped to an expression via `buildExpr`, then optionally
 * wrapped in a conditional if the entry has a `guard`.
 */
-function appendGuardedStyleArgs(entries, styleArgs, j, buildExpr) {
+function appendGuardedStyleArgs(entries, styleArgs, j, buildExpr, booleanProps) {
 	const guardProps = [];
 	for (const entry of entries) {
 		const expr = buildExpr(entry);
 		if (entry.guard) {
-			const parsed = parseVariantWhenToAst(j, entry.guard.when);
+			const parsed = parseVariantWhenToAst(j, entry.guard.when, booleanProps);
 			for (const p of parsed.props) if (p && !guardProps.includes(p)) guardProps.push(p);
 			styleArgs.push(makeConditionalStyleExpr(j, {
 				cond: parsed.cond,
@@ -12364,6 +12556,7 @@ function emitComponentWrappers(emitter) {
 		];
 		const hasSourceOrder = !!(d.variantSourceOrder && Object.keys(d.variantSourceOrder).length > 0);
 		const orderedEntries = [];
+		const booleanProps = collectBooleanPropNames(d);
 		if (d.variantStyleKeys) {
 			const sortedEntries = sortVariantEntriesBySpecificity(Object.entries(d.variantStyleKeys));
 			const consumedVariantIndices = /* @__PURE__ */ new Set();
@@ -12378,7 +12571,8 @@ function emitComponentWrappers(emitter) {
 					const positiveWhen = getPositiveWhen(when, otherWhen) ?? when;
 					const { cond } = emitter.collectConditionProps({
 						when: positiveWhen,
-						destructureProps
+						destructureProps,
+						booleanProps
 					});
 					for (let i = prevLength; i < destructureProps.length; i++) styleOnlyConditionProps.add(destructureProps[i]);
 					const isCurrentPositive = areEquivalentWhen(when, positiveWhen);
@@ -12397,7 +12591,8 @@ function emitComponentWrappers(emitter) {
 				}
 				const { cond, isBoolean } = emitter.collectConditionProps({
 					when,
-					destructureProps
+					destructureProps,
+					booleanProps
 				});
 				for (let i = prevLength; i < destructureProps.length; i++) styleOnlyConditionProps.add(destructureProps[i]);
 				const styleExpr = j.memberExpression(j.identifier(stylesIdentifier), j.identifier(variantKey));
@@ -13344,6 +13539,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			...extraStyleArgsAfterBase
 		];
 		const compoundVariantKeys = collectCompoundVariantKeys(d.compoundVariants);
+		const booleanProps = collectBooleanPropNames(d);
 		const hasSourceOrder = !!(d.variantSourceOrder && Object.keys(d.variantSourceOrder).length > 0);
 		const orderedEntries = [];
 		if (d.variantStyleKeys) {
@@ -13352,7 +13548,8 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 				if (compoundVariantKeys.has(when)) continue;
 				const { cond, isBoolean } = emitter.collectConditionProps({
 					when,
-					destructureProps
+					destructureProps,
+					booleanProps
 				});
 				const styleExpr = j.memberExpression(j.identifier(stylesIdentifier), j.identifier(variantKey));
 				const expr = emitter.makeConditionalStyleExpr({
@@ -13653,13 +13850,17 @@ function emitShouldForwardPropWrappers(ctx) {
 		const needsUseTheme = appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, () => ctx.markNeedsUseThemeImport());
 		const pseudoGuardProps = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier);
 		const compoundVariantKeys = collectCompoundVariantKeys(d.compoundVariants);
+		const booleanProps = collectBooleanPropNames(d);
 		const hasSourceOrder = !!(d.variantSourceOrder && Object.keys(d.variantSourceOrder).length > 0);
 		const orderedEntries = [];
 		if (d.variantStyleKeys) {
 			const sortedEntries = sortVariantEntriesBySpecificity(Object.entries(d.variantStyleKeys));
 			for (const [when, variantKey] of sortedEntries) {
 				if (compoundVariantKeys.has(when)) continue;
-				const { cond, isBoolean } = emitter.collectConditionProps({ when });
+				const { cond, isBoolean } = emitter.collectConditionProps({
+					when,
+					booleanProps
+				});
 				const styleExpr = j.memberExpression(j.identifier(stylesIdentifier), j.identifier(variantKey));
 				const expr = emitter.makeConditionalStyleExpr({
 					cond,
@@ -13703,13 +13904,14 @@ function emitShouldForwardPropWrappers(ctx) {
 			const prefix = dropPrefix;
 			const isPrefixProp = !!prefix && typeof p.jsxProp === "string" && p.jsxProp !== "__props" && p.jsxProp.startsWith(prefix);
 			const propExpr = isPrefixProp ? knownPrefixPropsSet.has(p.jsxProp) ? j.identifier(p.jsxProp) : j.memberExpression(j.identifier("props"), j.literal(p.jsxProp), true) : p.jsxProp === "__props" ? j.identifier("props") : j.identifier(p.jsxProp);
-			const callArg = p.callArg ?? propExpr;
+			const callArg = wrapCallArgForPropsObject(j, p.callArg ?? propExpr, p.propsObjectKey);
 			const call = j.callExpression(styleRef(j, stylesIdentifier, p.fnKey), [callArg]);
 			let expr;
 			if (p.conditionWhen) {
 				const { cond, isBoolean } = emitter.collectConditionProps({
 					when: p.conditionWhen,
-					destructureProps: destructureParts
+					destructureProps: destructureParts,
+					booleanProps
 				});
 				expr = emitter.makeConditionalStyleExpr({
 					cond,
@@ -14876,8 +15078,8 @@ function createThemeResolvers(args) {
 		const themeAccessExpr = unwrapLogicalFallback(bodyExpr) ?? bodyExpr;
 		const direct = resolveThemeValue(themeAccessExpr, cssProperty);
 		if (direct) {
-			if (isDirectionalThemeResult(direct)) return direct;
-			return wrapWithLogicalFallback(direct, bodyExpr, j);
+			if (hasNonLiteralLogicalFallback(bodyExpr)) return null;
+			return direct;
 		}
 		const paramName = expr.params?.[0]?.type === "Identifier" ? expr.params[0].name : null;
 		const unwrap = (node) => {
@@ -14911,8 +15113,8 @@ function createThemeResolvers(args) {
 		if (!themePath) return null;
 		const resolved = resolveThemePath(themePath, getNodeLocStart(unwrapped) ?? void 0, cssProperty);
 		if (!resolved) return null;
-		if (isDirectionalThemeResult(resolved)) return resolved;
-		return wrapWithLogicalFallback(resolved, bodyExpr, j);
+		if (hasNonLiteralLogicalFallback(bodyExpr)) return null;
+		return resolved;
 	};
 	return {
 		hasLocalThemeBinding,
@@ -14921,20 +15123,6 @@ function createThemeResolvers(args) {
 	};
 }
 /**
-* If `originalExpr` was a logical fallback (`X ?? "default"` / `X || "default"`),
-* wraps the resolved AST node in a LogicalExpression preserving the original
-* operator and fallback value.
-*
-* Returns null if the fallback (RHS) is not a static literal, because dynamic
-* references (e.g., `props.fallbackColor`) would be invalid in a static
-* `stylex.create()` context where `props` is not in scope.
-*/
-function wrapWithLogicalFallback(resolved, originalExpr, j) {
-	if (!isLogicalExpressionNode(originalExpr) || originalExpr.operator !== "??" && originalExpr.operator !== "||") return resolved;
-	if (literalToStaticValue(originalExpr.right) === null) return null;
-	return j.logicalExpression(originalExpr.operator, resolved, originalExpr.right);
-}
-/**
 * Type guard for the internal `__directional` tagged result.
 */
 function isDirectionalThemeResult(value) {
@@ -16088,6 +16276,7 @@ function createLowerRulesState(ctx) {
 		j,
 		importMap
 	});
+	const enumValueMap = buildEnumValueMap(root, j);
 	const crossFileSelectorsByLocal = /* @__PURE__ */ new Map();
 	if (ctx.crossFileSelectorUsages) for (const usage of ctx.crossFileSelectorUsages) crossFileSelectorsByLocal.set(usage.localName, usage);
 	const state = {
@@ -16132,6 +16321,7 @@ function createLowerRulesState(ctx) {
 		resolveCssHelperTemplate,
 		resolveImportInScope,
 		resolveImportForExpr,
+		enumValueMap,
 		crossFileSelectorsByLocal,
 		inlineKeyframeNameMap: void 0,
 		bail: false,
@@ -17024,7 +17214,15 @@ function tryResolveConditionalValue(node, ctx) {
 	if (!isArrowFunctionExpression(expr)) return null;
 	const info = getArrowFnThemeParamInfo(expr);
 	const paramName = info?.kind === "propsParam" ? info.propsName : null;
+	const propsParamName = paramName ?? void 0;
+	const themeBindingName = info?.kind === "themeBinding" ? info.themeName : void 0;
 	const paramBindings = !paramName && !info ? getArrowFnParamBindings(expr) : null;
+	const runtimeCallState = { info: null };
+	const buildRuntimeCallResult = () => runtimeCallState.info ? {
+		type: "runtimeCallOnly",
+		resolveCallContext: runtimeCallState.info.resolveCallContext,
+		resolveCallResult: runtimeCallState.info.resolveCallResult
+	} : null;
 	const body = getFunctionBodyExpr(expr);
 	if (!body || body.type !== "ConditionalExpression") return null;
 	const checkThemeBooleanTest = (test) => {
@@ -17148,17 +17346,66 @@ function tryResolveConditionalValue(node, ctx) {
 			};
 		}
 		if (!b || typeof b !== "object") return null;
+		const callHasThemeArg = (call) => (call.arguments ?? []).some((arg) => {
+			if (!arg || typeof arg !== "object" || arg.type !== "MemberExpression") return false;
+			if (propsParamName) {
+				const parts = getMemberPathFromIdentifier(arg, propsParamName);
+				return parts !== null && parts[0] === "theme" && parts.length > 1;
+			}
+			if (themeBindingName) {
+				const parts = getMemberPathFromIdentifier(arg, themeBindingName);
+				return parts !== null && parts.length > 0;
+			}
+			return false;
+		});
+		const markAsRuntimeCall = (call) => {
+			runtimeCallState.info = {
+				resolveCallContext: {
+					callSiteFilePath: ctx.filePath,
+					calleeImportedName: "<local>",
+					calleeSource: {
+						kind: "specifier",
+						value: ctx.filePath
+					},
+					args: [],
+					...call.loc?.start ? { loc: {
+						line: call.loc.start.line,
+						column: call.loc.start.column
+					} } : {}
+				},
+				resolveCallResult: { preserveRuntimeCall: true }
+			};
+		};
 		const resolveCallExpr = (call, cssProperty) => {
-			const res = resolveImportedHelperCall(call, ctx, void 0, cssProperty);
-			if (res.kind === "resolved" && "expr" in res.result) return res.result;
+			const res = resolveImportedHelperCall(call, ctx, propsParamName, cssProperty, themeBindingName);
+			if (res.kind === "resolved") {
+				if ("expr" in res.result) return res.result;
+				if (res.result.preserveRuntimeCall) {
+					runtimeCallState.info = {
+						resolveCallContext: res.resolveCallContext,
+						resolveCallResult: res.resolveCallResult
+					};
+					return null;
+				}
+			}
 			if (isCallExpressionNode(call.callee)) {
 				const inner = call.callee;
 				const outerArgs = call.arguments ?? [];
 				if (outerArgs.length === 1 && outerArgs[0] && typeof outerArgs[0] === "object") {
-					const innerRes = resolveImportedHelperCall(inner, ctx, void 0, cssProperty);
-					if (innerRes.kind === "resolved" && "expr" in innerRes.result) return innerRes.result;
+					const innerRes = resolveImportedHelperCall(inner, ctx, propsParamName, cssProperty, themeBindingName);
+					if (innerRes.kind === "resolved") {
+						if ("expr" in innerRes.result) return innerRes.result;
+						if (innerRes.result.preserveRuntimeCall) {
+							runtimeCallState.info = {
+								resolveCallContext: innerRes.resolveCallContext,
+								resolveCallResult: innerRes.resolveCallResult
+							};
+							return null;
+						}
+					}
 				}
 			}
+			if (callHasThemeArg(call)) markAsRuntimeCall(call);
 			return null;
 		};
 		const templateResult = resolveTemplateLiteralExpressions(b, (expr) => {
@@ -17239,7 +17486,7 @@ function tryResolveConditionalValue(node, ctx) {
 	};
 	const extractConditionInfo = (test) => {
 		if (test.type !== "BinaryExpression" || test.operator !== "===" && test.operator !== "!==") return null;
-		const rhsRaw = literalToStaticValue(test.right);
+		const rhsRaw = resolveStaticExpressionValue(test.right, ctx.enumValueMap);
 		if (rhsRaw === null) return null;
 		if (paramName && test.left.type === "MemberExpression") {
 			const leftPath = getMemberPathFromIdentifier(test.left, paramName);
@@ -17389,7 +17636,7 @@ function tryResolveConditionalValue(node, ctx) {
 				}
 			}
 		}
-		if (!cons || !alt) return null;
+		if (!cons || !alt) return buildRuntimeCallResult();
 		if (new Set([cons.usage, alt.usage]).size !== 1) return null;
 		const usage = cons.usage;
 		const variants = [{
@@ -17438,6 +17685,7 @@ function tryResolveConditionalValue(node, ctx) {
 				};
 			}
 		}
+		if (!cons || !alt) return buildRuntimeCallResult();
 	}
 	if (paramBindings?.kind === "destructured" && test.type === "Identifier" && typeof test.name === "string") {
 		const resolvedProp = resolveIdentifierToPropName(test, paramBindings);
@@ -17475,6 +17723,7 @@ function tryResolveConditionalValue(node, ctx) {
 					if (result) return result;
 				}
 			}
+			if (!cons || !alt) return buildRuntimeCallResult();
 		}
 	}
 	const condInfo = extractConditionInfo(test);
@@ -17520,7 +17769,7 @@ function tryResolveConditionalValue(node, ctx) {
 			};
 		}
 	}
-	return null;
+	return buildRuntimeCallResult();
 }
 function tryResolveConditionalCssBlock(node, ctx) {
 	const expr = node.expr;
@@ -17600,7 +17849,7 @@ function tryResolveConditionalCssBlockTernary(node, ctx) {
 			return null;
 		}
 		if (t.type === "BinaryExpression" && (t.operator === "===" || t.operator === "!==")) {
-			const rhsRaw = literalToStaticValue(t.right);
+			const rhsRaw = resolveStaticExpressionValue(t.right, ctx.enumValueMap);
 			if (rhsRaw === null) return null;
 			const left = t.left;
 			if (paramName && left?.type === "MemberExpression") {
@@ -17982,7 +18231,7 @@ function replaceThemeRefsWithHookVar(expr, paramName, info) {
 * Order matters: more-specific transforms first, then fall back to prop-access emission.
 */
 function resolveDynamicNode(node, ctx) {
-	return tryResolveThemeAccess(node, ctx) ?? tryResolveCallExpression(node, ctx) ?? tryResolveArrowFnHelperCallWithThemeArg(node, ctx) ?? tryResolveArrowFnCallWithConditionalArgs(node, ctx) ?? tryResolveConditionalValue(node, ctx) ?? tryResolveIndexedThemeWithPropFallback(node, ctx) ?? tryResolveConditionalCssBlockTernary(node, ctx) ?? tryResolveConditionalCssBlock(node, ctx) ?? tryResolveArrowFnCallWithSinglePropArg(node, ctx) ?? tryResolveThemeDependentTemplateLiteral(node, ctx) ?? tryResolveStyleFunctionFromTemplateLiteral(node) ?? tryResolveInlineStyleValueForNestedPropAccess(node) ?? tryResolvePropAccess(node) ?? tryResolveConditionalPropStyleFunction(node) ?? tryResolveInlineStyleValueForConditionalExpression(node) ?? tryResolveInlineStyleValueForLogicalExpression(node) ?? tryResolveInlineStyleValueFromArrowFn(node);
+	return tryResolveThemeAccess(node, ctx) ?? tryResolveCallExpression(node, ctx) ?? tryResolveArrowFnHelperCallWithThemeArg(node, ctx) ?? tryResolveArrowFnCallWithConditionalArgs(node, ctx) ?? tryResolveConditionalValue(node, ctx) ?? tryResolveIndexedThemeWithPropFallback(node, ctx) ?? tryResolveConditionalCssBlockTernary(node, ctx) ?? tryResolveConditionalCssBlock(node, ctx) ?? tryResolveArrowFnCallWithSinglePropArg(node, ctx) ?? tryResolveThemeDependentTemplateLiteral(node, ctx) ?? tryResolveStyleFunctionFromTemplateLiteral(node) ?? tryResolveInlineStyleValueForNestedPropAccess(node) ?? tryResolvePropAccess(node) ?? tryResolveConditionalPropStyleFunction(node) ?? tryResolveArrowFnPropExpression(node) ?? tryResolveInlineStyleValueForConditionalExpression(node) ?? tryResolveInlineStyleValueForLogicalExpression(node) ?? tryResolveInlineStyleValueFromArrowFn(node);
 }
 function tryResolveThemeAccess(node, ctx) {
 	const expr = node.expr;
@@ -18011,11 +18260,10 @@ function tryResolveThemeAccess(node, ctx) {
 		type: "resolvedDirectional",
 		directional: res.directional
 	};
-	const resultExpr = appendLogicalFallback(expr.body, res.expr);
-	if (resultExpr === null) return null;
+	if (hasNonLiteralLogicalFallback(expr.body)) return null;
 	return {
 		type: "resolvedValue",
-		expr: resultExpr,
+		expr: res.expr,
 		imports: res.imports
 	};
 }
@@ -18028,8 +18276,8 @@ function tryResolveThemeAccess(node, ctx) {
 *   (LogicalExpression with `??` or `||` and theme access on the left)
 *
 * Returns the MemberExpression node, or null if the pattern doesn't match.
-* The fallback (right side of `??`/`||`) is preserved by the caller via
-* `appendLogicalFallback` so users can review and delete it.
+* The fallback (right side of `??`/`||`) is dropped because StyleX `defineVars`
+* tokens always resolve at runtime.
 */
 function extractThemeMemberExpression(body) {
 	if (!body || typeof body !== "object") return null;
@@ -18375,6 +18623,29 @@ function collectPropsFromExprTree(nodes, paramName) {
 		props
 	};
 }
+/**
+* Checks whether the param name is used as a bare identifier anywhere in the
+* expression tree (i.e., not as the `object` of a non-computed MemberExpression
+* like `props.X`). This detects patterns like `helper(props)` or computed access
+* `props[expr]` where the full props object is needed, which would break
+* `emitStyleFunctionFromPropsObject` since that handler only forwards a subset
+* of collected prop names.
+*/
+function hasBareParamUsage(root, paramName) {
+	const visit = (node, skipIdent) => {
+		if (!node || typeof node !== "object") return false;
+		if (Array.isArray(node)) return node.some((child) => visit(child, false));
+		const n = node;
+		if (n.type === "Identifier" && n.name === paramName && !skipIdent) return true;
+		for (const key of Object.keys(n)) {
+			if (key === "loc" || key === "comments") continue;
+			const child = n[key];
+			if (visit(child, (n.type === "MemberExpression" || n.type === "OptionalMemberExpression") && !n.computed && (key === "object" || key === "property"))) return true;
+		}
+		return false;
+	};
+	return visit(root, false);
+}
 function tryResolveStyleFunctionFromTemplateLiteral(node) {
 	if (!node.css.property) return null;
 	const expr = node.expr;
@@ -18460,6 +18731,35 @@ function tryDecomposeConditionalBranches(condBody, paramName) {
 		isStaticWhenFalse
 	};
 }
+/**
+* Handles arrow functions whose body is a computational expression referencing props.
+*
+* Catches expression types not covered by specific handlers (e.g. BinaryExpression,
+* UnaryExpression) and emits a StyleX style function that takes the props object.
+*
+* Pattern: `(props) => props.$depth * 16 + 4`
+* Output:  `(props) => ({ paddingLeft: \`${props.$depth * 16 + 4}px\` })`
+*/
+function tryResolveArrowFnPropExpression(node) {
+	if (!node.css.property) return null;
+	const expr = node.expr;
+	if (!isArrowFunctionExpression(expr)) return null;
+	const paramName = getArrowFnSingleParamName(expr);
+	if (!paramName) return null;
+	const body = getFunctionBodyExpr(expr);
+	if (!body) return null;
+	const bodyType = body.type;
+	if (bodyType !== "BinaryExpression" && bodyType !== "UnaryExpression") return null;
+	if (hasThemeAccessInArrowFn(expr)) return null;
+	if (hasBareParamUsage(body, paramName)) return null;
+	const { hasUsableProps, hasNonTransientProps, props } = collectPropsFromExprTree([body], paramName);
+	if (!hasUsableProps) return null;
+	if (hasNonTransientProps && node.component.withConfig?.shouldForwardProp) return null;
+	return {
+		type: "emitStyleFunctionFromPropsObject",
+		props
+	};
+}
 function tryResolveInlineStyleValueForNestedPropAccess(node) {
 	if (!node.css.property) return null;
 	const expr = node.expr;
@@ -18544,23 +18844,6 @@ function hasBooleanBranch(node) {
 	if (n.type === "Literal" && typeof n.value === "boolean") return true;
 	return false;
 }
-/**
-* If `body` is a logical fallback expression (`X ?? "default"` / `X || "default"`),
-* appends the operator and fallback literal to the resolved expression string.
-*
-* Returns `null` when the body IS a logical expression but the fallback is non-literal
-* (e.g., `props.fallbackColor`, `null`, `undefined`), signalling to the caller that
-* it's unsafe to drop the fallback — the caller should bail instead of resolving.
-*
-* Returns `resolvedExpr` unchanged when the body is NOT a logical expression (no
-* fallback to preserve).
-*/
-function appendLogicalFallback(body, resolvedExpr) {
-	if (!isLogicalExpressionNode(body) || body.operator !== "??" && body.operator !== "||") return resolvedExpr;
-	const fallback = literalToStaticValue(body.right);
-	if (fallback === null) return null;
-	return `${resolvedExpr} ${body.operator} ${JSON.stringify(fallback)}`;
-}
 
 //#endregion
 //#region src/internal/lower-rules/template-literals.ts
@@ -20729,7 +21012,7 @@ const createValuePatternHandlers = (ctx) => {
 				const p = leftPath[0];
 				propName = propName ?? p;
 				if (propName !== p) return false;
-				const rhs = literalToStaticValue(test.right);
+				const rhs = resolveStaticExpressionValue(test.right, ctx.enumValueMap);
 				if (rhs === null) return false;
 				const retValue = readIfReturnValue(stmt);
 				if (retValue === null) return false;
@@ -20892,7 +21175,7 @@ const createValuePatternHandlers = (ctx) => {
 * Core concepts: per-component style buckets, helper factories, and resolver wiring.
 */
 function createDeclProcessingState(state, decl) {
-	const { api, j, root, filePath, warnings, resolverImports, parseExpr, resolveValue, resolveValueDirectional, resolveCall, resolveCallOptional, resolveSelector, importMap, cssHelperFunctions, stringMappingFns, hasLocalThemeBinding, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveImportInScope, usedCssHelperFunctions, markBail } = state;
+	const { api, j, root, filePath, warnings, resolverImports, parseExpr, resolveValue, resolveValueDirectional, resolveCall, resolveCallOptional, resolveSelector, importMap, cssHelperFunctions, stringMappingFns, hasLocalThemeBinding, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveImportInScope, usedCssHelperFunctions, enumValueMap, markBail } = state;
 	const styleObj = {};
 	const perPropPseudo = {};
 	const perPropMedia = {};
@@ -20990,6 +21273,7 @@ function createDeclProcessingState(state, decl) {
 		...sharedFromState,
 		api,
 		importMap,
+		enumValueMap,
 		decl,
 		styleObj,
 		variantBuckets,
@@ -21009,7 +21293,8 @@ function createDeclProcessingState(state, decl) {
 		resolveCall,
 		resolveCallOptional,
 		resolveImport: resolveImportInScope,
-		hasImportIgnoringShadowing: (localName) => importMap.has(localName)
+		hasImportIgnoringShadowing: (localName) => importMap.has(localName),
+		enumValueMap
 	};
 	const withConfig = decl.shouldForwardProp ? { shouldForwardProp: true } : void 0;
 	const componentInfo = decl.base.kind === "intrinsic" ? {
@@ -21859,13 +22144,13 @@ function handleSplitVariantsResolvedValue(ctx) {
 	}
 	if (isHeterogeneousBackground) {
 		const isNestedTernary = allPosParsed.length > 1;
+		const defaultStylexProp = neg ? resolveBackgroundStylexProp(neg.expr) : null;
 		if (neg && negParsed) {
-			const negStylexProp = resolveBackgroundStylexProp(neg.expr);
-			const bucket = { ...variantBuckets.get(neg.when) };
-			applyParsed(bucket, negParsed, negStylexProp);
-			variantBuckets.set(neg.when, bucket);
-			const suffix = toSuffixFromProp(neg.when);
-			variantStyleKeys[neg.when] ??= `${decl.styleKey}${suffix}`;
+			if (!applyParsed(styleObj, negParsed, defaultStylexProp)) {
+				bailUnsupported(decl, "Resolved conditional border variant could not be expanded to longhand properties");
+				setBail();
+				return true;
+			}
 		}
 		for (let i = 0; i < allPosParsed.length; i++) {
 			const { when, nameHint, parsed } = allPosParsed[i];
@@ -21874,6 +22159,7 @@ function handleSplitVariantsResolvedValue(ctx) {
 			const whenClean = when.replace(/^!/, "");
 			const bucket = { ...variantBuckets.get(whenClean) };
 			applyParsed(bucket, parsed, posStylexProp);
+			if (defaultStylexProp && posStylexProp !== defaultStylexProp) bucket[defaultStylexProp] = j.literal("transparent");
 			variantBuckets.set(whenClean, bucket);
 			const suffix = isNestedTernary && nameHint && !new Set([
 				"truthy",
@@ -23477,6 +23763,12 @@ function handleInterpolatedDeclaration(args) {
 					const { prefix, suffix } = extractStaticPartsForDecl(d);
 					const valueExpr = prefix || suffix ? buildTemplateWithStaticParts(j, valueExprRaw, prefix, suffix) : valueExprRaw;
 					const param = j.identifier(paramName);
+					if (/\.(ts|tsx)$/.test(filePath)) {
+						if (!(decl.propsType?.type === "TSTypeReference")) {
+							const typeName = `${decl.localName}Props`;
+							param.typeAnnotation = j.tsTypeAnnotation(j.tsTypeReference(j.identifier(typeName)));
+						}
+					}
 					const body = j.objectExpression([j.property("init", makeCssPropKey(j, out.prop), buildPseudoMediaPropValue({
 						j,
 						valueExpr,
@@ -23485,18 +23777,10 @@ function handleInterpolatedDeclaration(args) {
 					}))]);
 					styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], body));
 				}
-				if (!styleFnFromProps.some((p) => p.fnKey === fnKey)) {
-					const callArg = j.objectExpression((res.props ?? []).map((propName) => {
-						const prop = j.property("init", j.identifier(propName), j.identifier(propName));
-						prop.shorthand = true;
-						return prop;
-					}));
-					styleFnFromProps.push({
-						fnKey,
-						jsxProp: "__props",
-						callArg
-					});
-				}
+				if (!styleFnFromProps.some((p) => p.fnKey === fnKey)) styleFnFromProps.push({
+					fnKey,
+					jsxProp: "__props"
+				});
 			}
 			continue;
 		}
@@ -25560,11 +25844,195 @@ function finalizeDeclProcessing(ctx) {
 		});
 		decl.styleFnFromProps = styleFnFromProps;
 	}
-	for (const [k, v] of styleFnDecls.entries()) resolvedStyleObjects.set(k, v);
+	mergeBaseIntoSingleStyleFn({
+		j: state.j,
+		decl,
+		styleObj,
+		styleFnFromProps,
+		styleFnDecls,
+		remainingStyleKeys,
+		extraStyleObjects,
+		styledDecls: state.styledDecls
+	});
+	convertStyleFnsToPropsPattern(state.j, styleFnDecls, styleFnFromProps, decl.styleKey);
+	insertStyleFnDeclsAfterComponent(resolvedStyleObjects, styleFnDecls, {
+		styleKey: decl.styleKey,
+		extraStyleObjects,
+		remainingStyleKeys,
+		attrBuckets,
+		enumVariant: decl.enumVariant
+	});
 	if (styleFnDecls.has(decl.styleKey) && Object.keys(styleObj).length === 0) decl.skipBaseStyleRef = true;
 	if (inlineStyleProps.length) decl.inlineStyleProps = inlineStyleProps;
 }
 /**
+* Inserts styleFnDecls entries into resolvedStyleObjects right after the last
+* entry belonging to the current component. This ensures dynamic style functions
+* appear adjacent to their static counterparts in stylex.create() output.
+*/
+function insertStyleFnDeclsAfterComponent(resolvedStyleObjects, styleFnDecls, component) {
+	if (styleFnDecls.size === 0) return;
+	const componentKeys = /* @__PURE__ */ new Set();
+	componentKeys.add(component.styleKey);
+	for (const k of component.extraStyleObjects.keys()) componentKeys.add(k);
+	for (const k of Object.values(component.remainingStyleKeys)) componentKeys.add(k);
+	for (const k of component.attrBuckets.keys()) componentKeys.add(k);
+	if (component.enumVariant) {
+		componentKeys.add(component.enumVariant.baseKey);
+		for (const c of component.enumVariant.cases) componentKeys.add(c.styleKey);
+	}
+	for (const k of styleFnDecls.keys()) if (resolvedStyleObjects.has(k)) componentKeys.add(k);
+	let lastComponentKey = null;
+	for (const k of resolvedStyleObjects.keys()) if (componentKeys.has(k)) lastComponentKey = k;
+	if (lastComponentKey === null) {
+		for (const [k, v] of styleFnDecls.entries()) resolvedStyleObjects.set(k, v);
+		return;
+	}
+	const emittedFnKeys = /* @__PURE__ */ new Set();
+	const entries = [...resolvedStyleObjects.entries()];
+	resolvedStyleObjects.clear();
+	for (const [k, v] of entries) {
+		if (styleFnDecls.has(k)) {
+			resolvedStyleObjects.set(k, styleFnDecls.get(k));
+			emittedFnKeys.add(k);
+		} else resolvedStyleObjects.set(k, v);
+		if (k === lastComponentKey) {
+			for (const [fk, fv] of styleFnDecls.entries()) if (!emittedFnKeys.has(fk)) {
+				resolvedStyleObjects.set(fk, fv);
+				emittedFnKeys.add(fk);
+			}
+		}
+	}
+}
+/**
+* Merges static base properties into a single unconditional style function.
+*
+* When a styled component has both static CSS properties and a single
+* unconditional dynamic style function, the static properties are folded
+* into the function's return object so that the emitted code uses a single
+* `styles.key(arg)` call instead of separate `styles.key, styles.keyDynamic(arg)`.
+*
+* Preconditions:
+* - Exactly one unconditional styleFn entry (no conditionWhen)
+* - Base styleObj has at least one property
+* - No variant style keys, extra style objects, or enum variants
+* - The component is not extended by other styled components
+*/
+function mergeBaseIntoSingleStyleFn(args) {
+	const { j, decl, styleObj, styleFnFromProps, styleFnDecls, remainingStyleKeys, extraStyleObjects, styledDecls } = args;
+	if (Object.keys(styleObj).length === 0) return;
+	if (styleFnFromProps.length === 0) return;
+	if (Object.keys(remainingStyleKeys).length > 0) return;
+	if (extraStyleObjects.size > 0) return;
+	if (decl.enumVariant) return;
+	for (const other of styledDecls) if (other !== decl && other.extendsStyleKey === decl.styleKey) return;
+	const unconditionalEntries = styleFnFromProps.filter((p) => !p.conditionWhen && p.condition === "always");
+	if (unconditionalEntries.length !== 1) return;
+	const entry = unconditionalEntries[0];
+	const fnKey = entry.fnKey;
+	const fnAst = styleFnDecls.get(fnKey);
+	if (!fnAst || typeof fnAst !== "object") return;
+	const body = getFunctionBodyExpr(fnAst);
+	if (!body || body.type !== "ObjectExpression") return;
+	const bodyObj = body;
+	if (!Array.isArray(bodyObj.properties)) return;
+	const existingKeys = /* @__PURE__ */ new Set();
+	for (const prop of bodyObj.properties) {
+		const key = prop.key;
+		if (key) existingKeys.add(key.name ?? key.value ?? "");
+	}
+	if (Object.keys(styleObj).filter((k) => !k.startsWith("__")).some((k) => existingKeys.has(k))) return;
+	const prependProps = [];
+	for (const [cssProp, cssValue] of Object.entries(styleObj)) {
+		if (cssProp.startsWith("__")) continue;
+		const valueAst = literalToAst(j, cssValue);
+		const key = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(cssProp) ? j.identifier(cssProp) : j.literal(cssProp);
+		prependProps.push(j.property("init", key, valueAst));
+	}
+	bodyObj.properties.unshift(...prependProps);
+	if (fnKey !== decl.styleKey) {
+		styleFnDecls.delete(fnKey);
+		styleFnDecls.set(decl.styleKey, fnAst);
+		entry.fnKey = decl.styleKey;
+	}
+	for (const key of Object.keys(styleObj)) delete styleObj[key];
+}
+/**
+* Converts single-positional-param style functions to use a named `props`
+* object parameter. Skips functions that already use a `props` parameter
+* (e.g. consolidated multi-param functions).
+*
+* Before: `(color: string) => ({ color })`
+* After:  `(props: { color: string }) => ({ color: props.color })`
+*/
+function convertStyleFnsToPropsPattern(j, styleFnDecls, styleFnFromProps, baseStyleKey) {
+	const managedFnKeys = new Set(styleFnFromProps.map((p) => p.fnKey));
+	for (const [fnKey, fnAst] of styleFnDecls.entries()) {
+		if (fnKey !== baseStyleKey) continue;
+		if (!managedFnKeys.has(fnKey)) continue;
+		if (!fnAst || typeof fnAst !== "object") continue;
+		const fn = fnAst;
+		if (!Array.isArray(fn.params) || fn.params.length !== 1) continue;
+		const param = fn.params[0];
+		if (param.type !== "Identifier" || !param.name || param.name === "props") continue;
+		const paramName = param.name;
+		const paramTypeAnnotation = param.typeAnnotation;
+		const body = getFunctionBodyExpr(fn);
+		if (!body || body.type !== "ObjectExpression") continue;
+		replaceIdentifierInAst(j, body, paramName);
+		const propsParam = j.identifier("props");
+		if (paramTypeAnnotation) {
+			const innerType = paramTypeAnnotation.typeAnnotation;
+			if (innerType) {
+				const propSignature = j.tsPropertySignature(j.identifier(paramName), j.tsTypeAnnotation(innerType));
+				propsParam.typeAnnotation = j.tsTypeAnnotation(j.tsTypeLiteral([propSignature]));
+			}
+		}
+		fn.params[0] = propsParam;
+		for (const entry of styleFnFromProps) if (entry.fnKey === fnKey && !entry.propsObjectKey) entry.propsObjectKey = paramName;
+	}
+}
+/**
+* Recursively replaces all `Identifier` references matching `oldName` with
+* `props.oldName` (a MemberExpression). Handles shorthand properties by
+* un-shorthanding them.
+*/
+function replaceIdentifierInAst(j, node, oldName) {
+	if (!node || typeof node !== "object") return;
+	const n = node;
+	if (n.type === "ObjectExpression") {
+		const properties = n.properties;
+		if (!Array.isArray(properties)) return;
+		for (const prop of properties) {
+			if (prop.type === "SpreadElement" || prop.type === "SpreadProperty") {
+				if (prop.argument?.type === "Identifier" && prop.argument.name === oldName) prop.argument = j.memberExpression(j.identifier("props"), j.identifier(oldName));
+				else replaceIdentifierInAst(j, prop.argument, oldName);
+				continue;
+			}
+			if (prop.type !== "Property") continue;
+			if (prop.shorthand && prop.value?.type === "Identifier" && prop.value.name === oldName) {
+				prop.shorthand = false;
+				prop.value = j.memberExpression(j.identifier("props"), j.identifier(oldName));
+				continue;
+			}
+			if (prop.computed) if (prop.key?.type === "Identifier" && prop.key.name === oldName) prop.key = j.memberExpression(j.identifier("props"), j.identifier(oldName));
+			else replaceIdentifierInAst(j, prop.key, oldName);
+			if (prop.value?.type === "Identifier" && prop.value.name === oldName) prop.value = j.memberExpression(j.identifier("props"), j.identifier(oldName));
+			else replaceIdentifierInAst(j, prop.value, oldName);
+		}
+		return;
+	}
+	for (const key of Object.keys(n)) {
+		if (key === "type" || key === "loc" || key === "start" || key === "end" || key === "comments") continue;
+		if (key === "property" && n.type === "MemberExpression" && !n.computed) continue;
+		const child = n[key];
+		if (Array.isArray(child)) for (let i = 0; i < child.length; i++) if (child[i]?.type === "Identifier" && child[i].name === oldName) child[i] = j.memberExpression(j.identifier("props"), j.identifier(oldName));
+		else replaceIdentifierInAst(j, child[i], oldName);
+		else if (child?.type === "Identifier" && child.name === oldName) n[key] = j.memberExpression(j.identifier("props"), j.identifier(oldName));
+		else if (child && typeof child === "object" && child.type) replaceIdentifierInAst(j, child, oldName);
+	}
+}
+/**
 * Merges a per-property condition bucket (pseudo or media) into the style object.
 * When a property already exists as an object in styleObj, merges entries to
 * preserve both pseudo-class and media query entries on the same property.
@@ -26623,123 +27091,11 @@ function appendToMapList(map, key, value) {
 	else map.set(key, [value]);
 }
 
-//#endregion
-//#region src/internal/post-process/event-handler-annotations.ts
-/** Maps event handler prop names to their React event type. */
-const EVENT_TYPE_MAP = {
-	onClick: "React.MouseEvent",
-	onContextMenu: "React.MouseEvent",
-	onMouseDown: "React.MouseEvent",
-	onMouseUp: "React.MouseEvent",
-	onMouseEnter: "React.MouseEvent",
-	onMouseLeave: "React.MouseEvent",
-	onMouseMove: "React.MouseEvent",
-	onMouseOver: "React.MouseEvent",
-	onDoubleClick: "React.MouseEvent",
-	onKeyDown: "React.KeyboardEvent",
-	onKeyUp: "React.KeyboardEvent",
-	onKeyPress: "React.KeyboardEvent",
-	onChange: "React.ChangeEvent",
-	onInput: "React.FormEvent",
-	onFocus: "React.FocusEvent",
-	onBlur: "React.FocusEvent",
-	onSubmit: "React.FormEvent",
-	onScroll: "React.UIEvent",
-	onWheel: "React.WheelEvent",
-	onDragStart: "React.DragEvent",
-	onDragEnd: "React.DragEvent",
-	onDrop: "React.DragEvent",
-	onDragOver: "React.DragEvent",
-	onTouchStart: "React.TouchEvent",
-	onTouchEnd: "React.TouchEvent",
-	onTouchMove: "React.TouchEvent",
-	onPointerDown: "React.PointerEvent",
-	onPointerUp: "React.PointerEvent",
-	onPointerMove: "React.PointerEvent",
-	onCopy: "React.ClipboardEvent",
-	onCut: "React.ClipboardEvent",
-	onPaste: "React.ClipboardEvent",
-	onAnimationEnd: "React.AnimationEvent",
-	onAnimationStart: "React.AnimationEvent",
-	onTransitionEnd: "React.TransitionEvent"
-};
-/** Maps intrinsic JSX tag names to their DOM element interface names. */
-const INTRINSIC_TAG_TO_ELEMENT_TYPE = {
-	a: "HTMLAnchorElement",
-	button: "HTMLButtonElement",
-	div: "HTMLDivElement",
-	form: "HTMLFormElement",
-	img: "HTMLImageElement",
-	input: "HTMLInputElement",
-	label: "HTMLLabelElement",
-	li: "HTMLLIElement",
-	ol: "HTMLOListElement",
-	option: "HTMLOptionElement",
-	select: "HTMLSelectElement",
-	span: "HTMLSpanElement",
-	svg: "SVGSVGElement",
-	table: "HTMLTableElement",
-	tbody: "HTMLTableSectionElement",
-	td: "HTMLTableCellElement",
-	textarea: "HTMLTextAreaElement",
-	th: "HTMLTableCellElement",
-	thead: "HTMLTableSectionElement",
-	tr: "HTMLTableRowElement",
-	ul: "HTMLUListElement"
-};
-/**
-* Annotates event handler arrow function parameters at JSX usage sites of converted components.
-*
-* `componentTagMap` is best-effort and only populated for intrinsic-base conversions.
-* For wrappers around non-intrinsic components, event annotations stay non-generic.
-*
-* @returns true if any annotations were added
-*/
-function annotateEventHandlerParams(args) {
-	const { root, j, convertedNames, componentTagMap } = args;
-	if (convertedNames.size === 0) return false;
-	let changed = false;
-	root.find(j.JSXOpeningElement).filter((path) => {
-		const name = path.node.name;
-		if (name.type === "JSXIdentifier") return convertedNames.has(name.name);
-		return false;
-	}).forEach((jsxPath) => {
-		const openingName = jsxPath.node.name;
-		const componentName = openingName.type === "JSXIdentifier" ? openingName.name : null;
-		const intrinsicTag = componentName ? componentTagMap.get(componentName) : void 0;
-		const elementType = intrinsicTag ? INTRINSIC_TAG_TO_ELEMENT_TYPE[intrinsicTag] : void 0;
-		for (const attr of jsxPath.node.attributes ?? []) {
-			if (attr.type !== "JSXAttribute" || !attr.name || attr.name.type !== "JSXIdentifier") continue;
-			const eventType = EVENT_TYPE_MAP[attr.name.name];
-			if (!eventType) continue;
-			const value = attr.value;
-			if (!value || value.type !== "JSXExpressionContainer") continue;
-			const expr = value.expression;
-			if (!expr || expr.type !== "ArrowFunctionExpression") continue;
-			const firstParam = expr.params[0];
-			if (!firstParam) continue;
-			if (firstParam.typeAnnotation) continue;
-			if (firstParam.type !== "Identifier") continue;
-			const parts = eventType.split(".");
-			const typeRef = j.tsTypeReference(j.tsQualifiedName(j.identifier(parts[0]), j.identifier(parts[1])));
-			if (elementType) typeRef.typeParameters = j.tsTypeParameterInstantiation([j.tsTypeReference(j.identifier(elementType))]);
-			const annotatedParam = j.identifier(firstParam.name);
-			annotatedParam.typeAnnotation = j.tsTypeAnnotation(typeRef);
-			const newArrow = j.arrowFunctionExpression([annotatedParam, ...expr.params.slice(1)], expr.body, expr.expression);
-			newArrow.async = expr.async ?? false;
-			newArrow.returnType = expr.returnType ?? null;
-			value.expression = newArrow;
-			changed = true;
-		}
-	});
-	return changed;
-}
-
 //#endregion
 //#region src/internal/transform-steps/post-process.ts
 /**
 * Step: post-process transformed AST and cleanup imports.
-* Core concepts: relation overrides, import reconciliation, and event handler annotations.
+* Core concepts: relation overrides and import reconciliation.
 */
 /**
 * Performs post-processing rewrites, import cleanup, and descendant/ancestor selector adjustments.
@@ -26799,34 +27155,7 @@ function postProcessStep(ctx) {
 			return true;
 		}).size() === 0) fnPaths.forEach((p) => p.prune());
 	}
-	if (/\.(ts|tsx)$/.test(file.path)) {
-		const hasLocalAsUsage = (componentName) => {
-			const hasAsAttr = (attrs) => (attrs ?? []).some((attr) => attr?.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && (attr.name.name === "as" || attr.name.name === "forwardedAs"));
-			if (root.find(j.JSXElement, { openingElement: { name: {
-				type: "JSXIdentifier",
-				name: componentName
-			} } }).some((p) => hasAsAttr(p.node?.openingElement?.attributes))) return true;
-			return root.find(j.JSXSelfClosingElement, { name: {
-				type: "JSXIdentifier",
-				name: componentName
-			} }).some((p) => hasAsAttr(p.node?.attributes));
-		};
-		const convertedNames = /* @__PURE__ */ new Set();
-		const componentTagMap = /* @__PURE__ */ new Map();
-		for (const decl of styledDecls) {
-			const isPolymorphic = !!decl.supportsAsProp || hasLocalAsUsage(decl.localName);
-			if (decl.base.kind === "intrinsic" && !isPolymorphic) {
-				convertedNames.add(decl.localName);
-				componentTagMap.set(decl.localName, decl.base.tagName);
-			}
-		}
-		if (annotateEventHandlerParams({
-			root,
-			j,
-			convertedNames,
-			componentTagMap
-		})) ctx.markChanged();
-	}
+	if (/\.(ts|tsx)$/.test(file.path)) {}
 	return CONTINUE;
 }
 
@@ -26921,13 +27250,16 @@ function rewriteJsxStep(ctx) {
 					if (renamed) attr.name.name = renamed;
 				}
 			});
-			continue;
+			if (!decl.promotedStyleProps?.length) continue;
 		}
 		root.find(j.JSXElement, { openingElement: { name: {
 			type: "JSXIdentifier",
 			name: decl.localName
 		} } }).forEach((p) => {
 			const opening = p.node.openingElement;
+			if (decl.needsWrapperComponent) {
+				if (!(opening.__promotedStyleKey && !opening.__promotedMergeIntoBase || opening.__promotedMergeArgs)) return;
+			}
 			const closing = p.node.closingElement;
 			let finalTag = decl.base.kind === "intrinsic" ? decl.base.tagName : decl.base.ident;
 			const inlineVariantDimensions = decl.inlinedBaseComponent?.hasInlineJsxVariants ? decl.variantDimensions ?? [] : [];
@@ -27049,10 +27381,13 @@ function rewriteJsxStep(ctx) {
 				}
 			}
 			const baseStyleKey = matchedCombinedStyleKey ?? decl.styleKey;
+			const mergeArgs = matchedCombinedStyleKey ? void 0 : opening.__promotedMergeArgs;
+			const baseMember = j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(baseStyleKey));
+			const baseExpr = mergeArgs ? j.callExpression(baseMember, mergeArgs) : baseMember;
 			const styleArgs = [
 				...decl.extendsStyleKey ? [j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(decl.extendsStyleKey))] : [],
 				...extraMixinArgs,
-				j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(baseStyleKey)),
+				baseExpr,
 				...extraAfterBaseArgs
 			];
 			const variantKeys = decl.variantStyleKeys ?? {};
@@ -27095,7 +27430,10 @@ function rewriteJsxStep(ctx) {
 				if (styleFnProps.has(n)) {
 					const pairs = styleFnPairs.filter((p) => p.jsxProp === n);
 					const valueExpr = !attr.value ? j.literal(true) : attr.value.type === "StringLiteral" ? j.literal(attr.value.value) : attr.value.type === "Literal" ? j.literal(attr.value.value) : attr.value.type === "JSXExpressionContainer" ? attr.value.expression : null;
-					if (valueExpr) for (const p of pairs) styleArgs.push(j.callExpression(j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(p.fnKey)), [valueExpr]));
+					if (valueExpr) for (const p of pairs) {
+						const callArg = wrapCallArgForPropsObject(j, valueExpr, p.propsObjectKey);
+						styleArgs.push(j.callExpression(j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(p.fnKey)), [callArg]));
+					}
 					return;
 				}
 				if (combinedStylePropNames.has(n) && matchedCombinedStyleKey) return;