styled-components-to-stylex-codemod 0.0.53 → 0.0.54

package/dist/transform.mjs

@@ -1,10 +1,10 @@
 import { t as createModuleResolver } from "./resolve-imports-DgSAddIF.mjs";
 import { a as isDirectionalResult, n as mergeMarkerDeclarations, o as assertValidAdapter, r as DEFAULT_THEME_HOOK, t as transformedComponentAcceptsSx } from "./sx-surface-CEPFSTO1.mjs";
-import { a as findImportSource, c as resolveBarrelReExportBinding, d as UNSUPPORTED_SHOULD_FORWARD_PROP_WARNING, l as CASCADE_CONFLICT_WARNING, n as createPrepassParser, o as getReExportedSourceName, r as fileExports, t as walkAst, u as Logger } from "./ast-walk-BOXS-DT7.mjs";
+import { a as findImportSource, c as resolveBarrelReExportBinding, d as PARTIAL_MIGRATION_INCOMPLETE_WARNING, f as UNSUPPORTED_SHOULD_FORWARD_PROP_WARNING, l as CASCADE_CONFLICT_WARNING, n as createPrepassParser, o as getReExportedSourceName, r as fileExports, t as walkAst, u as Logger } from "./ast-walk-CCXrDCKY.mjs";
 import { n as resolveExistingFilePath, r as toRealPath, t as isRelativeSpecifier } from "./path-utils-BC4U8X_q.mjs";
 import { a as hasTopLevelMatch, c as isPrettierIgnoreComment, d as isValidIdentifierName, f as kebabToCamelCase, g as sanitizeIdentifier, h as normalizeWhitespace, i as getCommentBody, l as isSingleBackgroundComponent, m as lowerFirst, n as capitalize$1, o as isBackgroundImageValue, p as looksLikeLength, r as escapeRegex, s as isJSDocBlockComment, t as camelToKebabCase, u as isStyleSectionMarkerComment } from "./string-utils-Bo3cWgss.mjs";
 import { a as terminateStandaloneInterpolationStatements, i as parseStyledTemplateLiteral, n as isTemplatePlaceholderInSelectorContext, r as PLACEHOLDER_RE } from "./selector-context-heuristic-LVizWWOR.mjs";
-import { _ as walkForImportsAndTemplates, a as mergeComponentPropUsage, i as getExhaustiveObservedStaticValues, n as createComponentPropUsageInfo, o as readStaticJsxLiteral, r as formatObservedVariantCondition, s as collectStylexExportNames, t as KNOWN_NON_ELEMENT_PROPS, u as buildImportMapFromNodes } from "./prop-usage-SADzZJdX.mjs";
+import { _ as walkForImportsAndTemplates, a as mergeComponentPropUsage, i as getExhaustiveObservedStaticValues, n as createComponentPropUsageInfo, o as readStaticJsxLiteral, r as formatObservedVariantCondition, s as collectStylexExportNames, t as KNOWN_NON_ELEMENT_PROPS, u as buildImportMapFromNodes } from "./prop-usage-DyWABApg.mjs";
 import { createRequire } from "node:module";
 import jscodeshift from "jscodeshift";
 import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
@@ -994,7 +994,7 @@ function createResolveAdapterSafe(args) {
 	*/
 	const resolveValueCore = (ctx) => {
 		if (bailRef.value) return;
-		if (ctx.kind === "importedValue" && isStylexFileSource(ctx.source)) return stylexImportPassthrough(ctx.importedName, ctx.source, ctx.path);
+		if (ctx.kind === "importedValue" && isStylexFileSource$1(ctx.source)) return stylexImportPassthrough(ctx.importedName, ctx.source, ctx.path);
 		const res = adapter.resolveValue(ctx);
 		if (res === void 0 && ctx.kind !== "cssVariable") {
 			bailRef.value = true;
@@ -1012,7 +1012,7 @@ function createResolveAdapterSafe(args) {
 	};
 	const resolveCallSafe = (ctx) => {
 		if (bailRef.value) return;
-		if (isStylexFileSource(ctx.calleeSource)) return stylexImportPassthrough(ctx.calleeImportedName, ctx.calleeSource, ctx.calleeMemberPath?.join("."));
+		if (isStylexFileSource$1(ctx.calleeSource)) return stylexImportPassthrough(ctx.calleeImportedName, ctx.calleeSource, ctx.calleeMemberPath?.join("."));
 		const res = adapter.resolveCall(ctx);
 		if (res === void 0) {
 			bailRef.value = true;
@@ -1021,7 +1021,7 @@ function createResolveAdapterSafe(args) {
 		return res;
 	};
 	const resolveSelectorSafe = (ctx) => {
-		if (isStylexFileSource(ctx.source)) return {
+		if (isStylexFileSource$1(ctx.source)) return {
 			kind: "media",
 			...stylexImportPassthrough(ctx.importedName, ctx.source, ctx.path)
 		};
@@ -1035,10 +1035,10 @@ function createResolveAdapterSafe(args) {
 		bailRef
 	};
 }
-const STYLEX_FILE_RE = /\.stylex(\.\w+)?$/;
+const STYLEX_FILE_RE$1 = /\.stylex(\.\w+)?$/;
 /** Imports from `.stylex` files are already StyleX-compatible and need no adapter resolution. */
-function isStylexFileSource(source) {
-	return STYLEX_FILE_RE.test(source.value);
+function isStylexFileSource$1(source) {
+	return STYLEX_FILE_RE$1.test(source.value);
 }
 /** Build a passthrough result that preserves the original import reference from a `.stylex` file. */
 function stylexImportPassthrough(importedName, source, path) {
@@ -1567,10 +1567,12 @@ function collectPatternBindingNames$2(node, names) {
 *
 * Returns null for non-literal or dynamic nodes.
 */
-function literalToStaticValue(node) {
+function literalToStaticValue(node, options = {}) {
 	if (!node || typeof node !== "object") return null;
+	const allowCssTaggedTemplates = options.allowCssTaggedTemplates ?? true;
+	const allowStaticArrowFunctions = options.allowStaticArrowFunctions ?? true;
 	const type = node.type;
-	if (type === "TSAsExpression" || type === "TSSatisfiesExpression") return literalToStaticValue(node.expression);
+	if (type === "TSAsExpression" || type === "TSSatisfiesExpression") return literalToStaticValue(node.expression, options);
 	if (type === "StringLiteral") return node.value;
 	if (type === "BooleanLiteral") return node.value;
 	if (type === "Literal") {
@@ -1581,25 +1583,53 @@ function literalToStaticValue(node) {
 	if (type === "UnaryExpression") {
 		const n = node;
 		if (n.prefix && (n.operator === "-" || n.operator === "+")) {
-			const argVal = literalToStaticValue(n.argument);
+			const argVal = literalToStaticValue(n.argument, options);
 			if (typeof argVal === "number") return n.operator === "-" ? -argVal : argVal;
 		}
 	}
 	if (type === "TemplateLiteral") {
 		const n = node;
-		if (!n.expressions || n.expressions.length === 0) return (n.quasis ?? []).map((q) => q.value?.raw ?? "").join("");
+		if (!n.expressions || n.expressions.length === 0) {
+			const quasis = n.quasis ?? [];
+			const parts = [];
+			for (const q of quasis) {
+				const cooked = q.value?.cooked;
+				if (cooked == null) return null;
+				parts.push(cooked);
+			}
+			return parts.join("");
+		}
 	}
-	if (type === "TaggedTemplateExpression") {
+	if (type === "TaggedTemplateExpression" && allowCssTaggedTemplates) {
 		const n = node;
-		if (n.tag?.type === "Identifier" && n.tag.name === "css") return literalToStaticValue(n.quasi);
+		if (n.tag?.type === "Identifier" && n.tag.name === "css") return literalToStaticValue(n.quasi, options);
 	}
-	if (type === "ArrowFunctionExpression") {
+	if (type === "ArrowFunctionExpression" && allowStaticArrowFunctions) {
 		const n = node;
-		if (!n.params || n.params.length === 0) return literalToStaticValue(n.body);
+		if (!n.params || n.params.length === 0) return literalToStaticValue(n.body, options);
 	}
 	return null;
 }
 /**
+* Extracts a static literal value from an AST node, distinguishing null literals
+* from extraction failure. Returns `undefined` when the node is not a recognized
+* static literal, and the actual value (including `null`) otherwise.
+*
+* Function expressions are not coerced by default: a function-valued expression
+* is runtime data, even if its body is a static literal.
+*/
+function extractStaticLiteralValue(node, options = {}) {
+	if (!node || typeof node !== "object") return;
+	const typed = node;
+	if (typed.type === "TSAsExpression" || typed.type === "TSSatisfiesExpression") return extractStaticLiteralValue(typed.expression, options);
+	if (typed.type === "NullLiteral" || typed.type === "Literal" && typed.value === null) return null;
+	const v = literalToStaticValue(node, {
+		...options,
+		allowStaticArrowFunctions: options.allowStaticArrowFunctions ?? false
+	});
+	return v !== null ? v : void 0;
+}
+/**
 * Converts an AST literal node to a string value.
 * Returns null if the node is not a string literal.
 */
@@ -4290,6 +4320,7 @@ function buildResolvedHandlerResult(result, cssProperty, payload) {
 		type: "resolvedValue",
 		expr: result.expr,
 		imports: result.imports,
+		cssValueText: result.expr,
 		...payload
 	} : {
 		type: "resolvedStyles",
@@ -12357,8 +12388,9 @@ function collectStyledDeclsImpl(args) {
 				const key = prop.key.type === "Identifier" ? prop.key.name : prop.key.type === "StringLiteral" ? prop.key.value : null;
 				if (!key) continue;
 				const v = prop.value;
-				if (v.type === "StringLiteral" || v.type === "NumericLiteral" || v.type === "BooleanLiteral") {
-					out.staticAttrs[key] = v.value;
+				const literalValue = literalStaticValueFromNode(v);
+				if (literalValue !== void 0) {
+					out.staticAttrs[key] = literalValue;
 					continue;
 				}
 				if (key === "as" && v.type === "Identifier" && v.name !== "undefined") {
@@ -13321,12 +13353,7 @@ function getAttrsParamInfo(params) {
 	};
 }
 function literalStaticValueFromNode(node) {
-	if (!node || typeof node !== "object") return;
-	const typed = node;
-	if (typed.type === "StringLiteral" || typed.type === "NumericLiteral") return typeof typed.value === "string" || typeof typed.value === "number" ? typed.value : void 0;
-	if (typed.type === "BooleanLiteral") return typeof typed.value === "boolean" ? typed.value : void 0;
-	if (typed.type === "Literal" && (typeof typed.value === "string" || typeof typed.value === "number" || typeof typed.value === "boolean")) return typed.value;
-	if (typed.type === "TSAsExpression" || typed.type === "TSSatisfiesExpression") return literalStaticValueFromNode(typed.expression);
+	return extractStaticLiteralValue(node, { allowCssTaggedTemplates: false });
 }
 function isStaticAttrExpression$1(node, attrsParamInfo) {
 	if (!node || typeof node !== "object") return false;
@@ -18105,6 +18132,44 @@ function insertImportDeclarationNearStylex(root, decl) {
 	insertAfterLastImport(body, decl);
 }
 //#endregion
+//#region src/internal/utilities/inline-keyframes-liveness.ts
+function pruneUnusedInlineKeyframes(args) {
+	const { state, emittedStyleValues, styledDecls } = args;
+	const inlineKeyframes = state.inlineKeyframes;
+	if (!inlineKeyframes || inlineKeyframes.size === 0) return;
+	const referenced = collectReferencedInlineKeyframes(inlineKeyframes, emittedStyleValues);
+	collectReferencedTransformedVariantKeyframes(inlineKeyframes, styledDecls, referenced);
+	deleteUnreferencedInlineKeyframes(state, referenced);
+}
+function collectReferencedInlineKeyframes(inlineKeyframes, values) {
+	const referenced = /* @__PURE__ */ new Set();
+	for (const value of values) collectReferencedInlineKeyframeNames(inlineKeyframes, value, referenced);
+	return referenced;
+}
+function collectReferencedTransformedVariantKeyframes(inlineKeyframes, styledDecls, referenced) {
+	for (const decl of styledDecls) {
+		if (decl.skipTransform) continue;
+		for (const dimension of decl.variantDimensions ?? []) collectReferencedInlineKeyframeNames(inlineKeyframes, dimension.variants, referenced);
+		for (const variant of decl.staticBooleanVariants ?? []) collectReferencedInlineKeyframeNames(inlineKeyframes, variant.styles, referenced);
+		for (const combined of decl.callSiteCombinedStyles ?? []) collectReferencedInlineKeyframeNames(inlineKeyframes, combined.styles, referenced);
+	}
+}
+function collectReferencedInlineKeyframeNames(inlineKeyframes, value, referenced) {
+	const identifiers = /* @__PURE__ */ new Set();
+	collectIdentifiers(value, identifiers);
+	for (const name of identifiers) if (inlineKeyframes.has(name)) referenced.add(name);
+}
+function deleteUnreferencedInlineKeyframes(state, referenced) {
+	const inlineKeyframes = state.inlineKeyframes;
+	if (!inlineKeyframes) return;
+	for (const name of inlineKeyframes.keys()) if (!referenced.has(name)) inlineKeyframes.delete(name);
+	if (!state.inlineKeyframeNameMap) return;
+	for (const [cssName, jsName] of state.inlineKeyframeNameMap.entries()) if (!inlineKeyframes.has(jsName)) {
+		state.inlineKeyframeNameMap.delete(cssName);
+		state.keyframesNames.delete(cssName);
+	}
+}
+//#endregion
 //#region src/internal/emit-styles.ts
 /**
 * CSS shorthands that must NEVER appear as property names in stylex.create() output.
@@ -18430,6 +18495,11 @@ function emitStylesAndImports(ctx) {
 		stylesDecl.leadingComments = deduped;
 		stylesDecl.comments = deduped;
 	}
+	pruneUnusedInlineKeyframes({
+		state: ctx,
+		emittedStyleValues: nonEmptyStyleEntries.map(([, value]) => value),
+		styledDecls
+	});
 	const inlineKeyframeDecls = [];
 	if (ctx.inlineKeyframes && ctx.inlineKeyframes.size > 0) for (const [name, frames] of ctx.inlineKeyframes) {
 		const kfDecl = j.variableDeclaration("const", [j.variableDeclarator(j.identifier(name), j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("keyframes")), [objectToAst(j, frames)]))]);
@@ -20256,7 +20326,10 @@ function buildStaticAttrsFromRecord(j, staticAttrs, options) {
 }
 function buildStaticAttrFromValue(j, key, value, options) {
 	const booleanTrueAsShorthand = options?.booleanTrueAsShorthand ?? true;
-	if (typeof value === "string") return j.jsxAttribute(j.jsxIdentifier(key), j.literal(value));
+	if (typeof value === "string") {
+		if (stringNeedsExpressionContainer(value)) return j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(value)));
+		return j.jsxAttribute(j.jsxIdentifier(key), j.literal(value));
+	}
 	if (typeof value === "boolean") return j.jsxAttribute(j.jsxIdentifier(key), value && booleanTrueAsShorthand ? null : j.jsxExpressionContainer(j.booleanLiteral(value)));
 	if (typeof value === "number") return j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(value)));
 	if (value === void 0) return j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.identifier("undefined")));
@@ -20268,6 +20341,15 @@ function isStaticAttrExpression(value) {
 	return !!value && typeof value === "object" && typeof value.type === "string";
 }
 /**
+* Check if a string contains characters that require escaping in a JS string literal.
+* Such strings must be emitted as JSX expression containers (`attr={"value"}`) rather
+* than direct JSX string attributes (`attr="value"`), because JSX string attributes
+* don't interpret JS escape sequences - they're literal strings.
+*/
+function stringNeedsExpressionContainer(value) {
+	return /[\u0000-\u001f\\]/.test(value);
+}
+/**
 * Build all attrs from attrsInfo in the correct order:
 * defaultAttrs, conditionalAttrs, invertedBoolAttrs, staticAttrs
 */
@@ -20749,7 +20831,7 @@ function buildVariantDimensionLookups(j, args) {
 	}
 }
 function hasStyleSourceOrder(d) {
-	return !!(d.variantSourceOrder && Object.keys(d.variantSourceOrder).length > 0) || (d.pseudoAliasSelectors ?? []).some((entry) => entry.sourceOrder !== void 0);
+	return !!(d.variantSourceOrder && Object.keys(d.variantSourceOrder).length > 0) || (d.pseudoAliasSelectors ?? []).some((entry) => entry.sourceOrder !== void 0) || (d.needsUseThemeHook ?? []).some((entry) => entry.sourceOrder !== void 0);
 }
 /**
 * Sort ordered entries by source order and append them to styleArgs.
@@ -20991,7 +21073,7 @@ function buildVariantStyleExprs(opts) {
 * Appends conditional style args driven by theme boolean props (e.g., `theme.isDark`).
 * Returns `true` if the hook is needed (and calls `markNeedsUseThemeImport`).
 */
-function appendThemeBooleanStyleArgs(hooks, styleArgs, j, stylesIdentifier, markNeedsUseThemeImport) {
+function appendThemeBooleanStyleArgs(hooks, styleArgs, j, stylesIdentifier, markNeedsUseThemeImport, orderedEntries) {
 	if (!hooks || hooks.length === 0) return false;
 	markNeedsUseThemeImport();
 	for (const entry of hooks) {
@@ -20999,7 +21081,12 @@ function appendThemeBooleanStyleArgs(hooks, styleArgs, j, stylesIdentifier, mark
 		const trueExpr = entry.trueStyleKey ? styleRef(j, stylesIdentifier, entry.trueStyleKey) : j.identifier("undefined");
 		const falseExpr = entry.falseStyleKey ? styleRef(j, stylesIdentifier, entry.falseStyleKey) : j.identifier("undefined");
 		const condition = entry.conditionExpr ? cloneAstNode(entry.conditionExpr) : j.memberExpression(j.identifier("theme"), j.identifier(entry.themeProp));
-		styleArgs.push(j.conditionalExpression(condition, trueExpr, falseExpr));
+		const finalExpr = j.conditionalExpression(condition, trueExpr, falseExpr);
+		if (orderedEntries && entry.sourceOrder !== void 0) orderedEntries.push({
+			order: entry.sourceOrder,
+			expr: finalExpr
+		});
+		else styleArgs.push(finalExpr);
 	}
 	return true;
 }
@@ -21084,11 +21171,12 @@ function appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, orderedEntr
 * and emit-component.
 */
 function buildAllVariantAndStyleExprs(opts) {
-	const { d, emitter, j, stylesIdentifier, styleArgs, destructureProps, propDefaults, compoundVariantKeys, afterVariantStyleArgs, enableComplementaryMerging, buildCompoundVariantExpressions } = opts;
+	const { d, emitter, j, stylesIdentifier, styleArgs, destructureProps, propDefaults, compoundVariantKeys, afterVariantStyleArgs, enableComplementaryMerging, markNeedsUseThemeImport, buildCompoundVariantExpressions } = opts;
 	const booleanProps = collectBooleanPropNames(d);
 	const knownProps = collectKnownConditionPropNames(emitter, d);
 	const hasSourceOrder = hasStyleSourceOrder(d);
 	const orderedEntries = [];
+	const needsUseTheme = markNeedsUseThemeImport ? appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, markNeedsUseThemeImport, hasSourceOrder ? orderedEntries : void 0) : false;
 	buildVariantStyleExprs({
 		d,
 		emitter,
@@ -21127,6 +21215,7 @@ function buildAllVariantAndStyleExprs(opts) {
 	});
 	mergeOrderedEntries(orderedEntries, styleArgs);
 	if (afterVariantStyleArgs && afterVariantStyleArgs.length > 0) styleArgs.push(...afterVariantStyleArgs);
+	return needsUseTheme;
 }
 /** Builds a `const theme = useTheme();` variable declaration. */
 function buildUseThemeDeclaration(j, themeHookLocalName) {
@@ -23018,7 +23107,7 @@ function emitComponentWrappers(emitter) {
 		}
 		const needsUseTheme = appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, () => {
 			needsUseThemeImport = true;
-		});
+		}, hasSourceOrder ? orderedEntries : void 0);
 		for (const gp of appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, hasSourceOrder ? orderedEntries : void 0)) if (!destructureProps.includes(gp)) {
 			destructureProps.push(gp);
 			styleOnlyConditionProps.add(gp);
@@ -24730,7 +24819,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 		}) : [];
 		const { beforeBase: extraStyleArgs, afterBase: extraStyleArgsAfterBase, afterVariants: afterVariantStyleArgs } = emitter.buildInterleavedExtraStyleArgs(d, propsArgExprs);
 		const styleArgs = buildInitialStyleArgs(j, stylesIdentifier, d, extraStyleArgs, extraStyleArgsAfterBase);
-		buildAllVariantAndStyleExprs({
+		const needsUseTheme = buildAllVariantAndStyleExprs({
 			d,
 			emitter,
 			j,
@@ -24740,6 +24829,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			propDefaults,
 			compoundVariantKeys: collectCompoundVariantKeys(d.compoundVariants),
 			afterVariantStyleArgs,
+			markNeedsUseThemeImport: () => ctx.markNeedsUseThemeImport(),
 			buildCompoundVariantExpressions
 		});
 		const isVoidTag = VOID_TAGS.has(tagName);
@@ -24763,6 +24853,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
 			staticAttrs: d.attrsInfo?.staticAttrs ?? {}
 		});
+		const destructurePropsForPattern = needsUseTheme ? destructureProps.filter((name) => name !== "theme") : destructureProps;
 		const patternProps = emitter.buildDestructurePatternProps({
 			baseProps: [
 				...allowAsProp ? [j.property.from({
@@ -24777,7 +24868,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 				...allowStyleProp ? [ctx.patternProp("style", styleId)] : [],
 				...allowSxProp ? [ctx.patternProp("sx", sxId)] : []
 			],
-			destructureProps,
+			destructureProps: destructurePropsForPattern,
 			propDefaults,
 			includeRest: true,
 			restId
@@ -24797,7 +24888,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			allowClassNameProp,
 			allowStyleProp,
 			allowSxProp,
-			inlineStyleProps: [],
+			inlineStyleProps: d.inlineStyleProps ?? [],
 			staticStyleExpr: attrsInfoWithoutForwardedAsStatic?.attrsStaticStyleExpr,
 			staticClassNameExpr,
 			isIntrinsicElement: false
@@ -24822,6 +24913,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			childrenExpr: childrenId
 		});
 		const fnBodyStmts = [declStmt];
+		if (needsUseTheme) fnBodyStmts.push(buildUseThemeDeclaration(j, emitter.themeHookLocalName));
 		if (merging.sxDecl) fnBodyStmts.push(merging.sxDecl);
 		fnBodyStmts.push(j.returnStatement(jsx));
 		const polymorphicFnTypeParams = emitTypes && allowAsProp ? buildPolymorphicTypeParams(j, tagName) : void 0;
@@ -24985,12 +25077,12 @@ function emitShouldForwardPropWrappers(ctx) {
 		const propsArgExprs = d.extraStylexPropsArgs ? emitter.buildExtraStylexPropsExprEntries({ entries: d.extraStylexPropsArgs }) : [];
 		const { beforeBase: extraStyleArgs, afterBase: extraStyleArgsAfterBase, afterVariants: afterVariantStyleArgs } = emitter.buildInterleavedExtraStyleArgs(d, propsArgExprs);
 		const styleArgs = buildInitialStyleArgs(j, stylesIdentifier, d, extraStyleArgs, extraStyleArgsAfterBase);
-		const needsUseTheme = appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, () => ctx.markNeedsUseThemeImport());
 		const compoundVariantKeys = collectCompoundVariantKeys(d.compoundVariants);
 		const booleanProps = collectBooleanPropNames(d);
 		const knownProps = collectKnownConditionPropNames(emitter, d);
 		const hasSourceOrder = hasStyleSourceOrder(d);
 		const orderedEntries = [];
+		const needsUseTheme = appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, () => ctx.markNeedsUseThemeImport(), hasSourceOrder ? orderedEntries : void 0);
 		const pseudoGuardProps = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, hasSourceOrder ? orderedEntries : void 0);
 		buildVariantStyleExprs({
 			d,
@@ -25688,8 +25780,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 		}) : [];
 		const { beforeBase: extraStyleArgs, afterBase: extraStyleArgsAfterBase, afterVariants: afterVariantStyleArgs } = emitter.buildInterleavedExtraStyleArgs(d, propsArgExprs);
 		const styleArgs = buildInitialStyleArgs(j, stylesIdentifier, d, extraStyleArgs, extraStyleArgsAfterBase);
-		const needsUseTheme = appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, () => ctx.markNeedsUseThemeImport());
-		buildAllVariantAndStyleExprs({
+		const needsUseTheme = buildAllVariantAndStyleExprs({
 			d,
 			emitter,
 			j,
@@ -25700,6 +25791,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			compoundVariantKeys: collectCompoundVariantKeys(d.compoundVariants),
 			afterVariantStyleArgs,
 			enableComplementaryMerging: true,
+			markNeedsUseThemeImport: () => ctx.markNeedsUseThemeImport(),
 			buildCompoundVariantExpressions
 		});
 		for (const attr of d.attrsInfo?.defaultAttrs ?? []) if (destructureProps.includes(attr.jsxProp) && (typeof attr.value === "string" || typeof attr.value === "number")) propDefaults.set(attr.jsxProp, attr.value);
@@ -26647,6 +26739,485 @@ function getTransformedComponentNames(ctx) {
 	return names && names.length > 0 ? names : void 0;
 }
 //#endregion
+//#region src/internal/transform-steps/inline-prop-conditional-css-helpers.ts
+/**
+* Inlines prop-conditional css`` helpers into consumers so their prop-dependent
+* styles are preserved. Helpers that cannot be safely inlined are left untouched
+* (their `${helper}` reference falls through to the existing mixin bail).
+*/
+function inlinePropConditionalCssHelpersStep(ctx) {
+	const styledDecls = ctx.styledDecls;
+	const cssHelperNames = ctx.cssHelpers?.cssHelperNames;
+	if (!styledDecls || !cssHelperNames || cssHelperNames.size === 0) return CONTINUE;
+	const declByLocalName = /* @__PURE__ */ new Map();
+	for (const decl of styledDecls) declByLocalName.set(decl.localName, decl);
+	const fullyInlinedHelpers = /* @__PURE__ */ new Set();
+	const retainedHelpers = /* @__PURE__ */ new Set();
+	for (const consumer of styledDecls) {
+		if (consumer.isCssHelper) continue;
+		for (const reference of collectInlinableHelperReferences(consumer, declByLocalName)) {
+			const helperDecl = reference.helperDecl;
+			if (!inlinablePropDependentDeclaration(helperDecl) || inlineWouldContend(reference, consumer)) {
+				retainedHelpers.add(helperDecl.localName);
+				continue;
+			}
+			if (inlineHelperReference(consumer, reference)) {
+				fullyInlinedHelpers.add(helperDecl.localName);
+				ctx.markChanged();
+			} else retainedHelpers.add(helperDecl.localName);
+		}
+	}
+	for (const decl of styledDecls) {
+		if (!decl.isCssHelper) continue;
+		for (const rule of decl.rules) for (const declaration of rule.declarations) {
+			const referencedName = referencedHelperName(declaration, decl);
+			if (referencedName && declByLocalName.get(referencedName)?.isCssHelper) retainedHelpers.add(referencedName);
+		}
+	}
+	for (const decl of styledDecls) if (decl.isCssHelper && fullyInlinedHelpers.has(decl.localName) && !retainedHelpers.has(decl.localName)) decl.rules = [];
+	return CONTINUE;
+}
+/**
+* Finds property-less `${helper}` references (single-slot identifier interpolations)
+* that sit in the consumer's top-level `&` rule. Only top-level references are returned;
+* references nested under selectors/at-rules are left for the existing bail path because
+* merging a helper's own declarations under another selector is not generally safe.
+*/
+function collectInlinableHelperReferences(consumer, declByLocalName) {
+	const references = [];
+	for (const rule of consumer.rules) {
+		if (rule.selector.trim() !== "&" || rule.atRuleStack.length > 0) continue;
+		for (const referenceDecl of rule.declarations) {
+			const helperName = referencedHelperName(referenceDecl, consumer);
+			if (!helperName) continue;
+			const helperDecl = declByLocalName.get(helperName);
+			if (helperDecl?.isCssHelper) references.push({
+				rule,
+				referenceDecl,
+				helperDecl
+			});
+		}
+	}
+	return references;
+}
+/** Returns the helper identifier name if `d` is a standalone `${identifier}` interpolation. */
+function referencedHelperName(d, consumer) {
+	if (d.property || d.value.kind !== "interpolated") return null;
+	const parts = d.value.parts;
+	if (parts.length !== 1 || parts[0]?.kind !== "slot") return null;
+	const expr = consumer.templateExpressions[parts[0].slotId];
+	return expr?.type === "Identifier" && typeof expr.name === "string" ? expr.name : null;
+}
+/**
+* Returns the helper's single prop-dependent declaration when the helper is structurally
+* inlinable — otherwise null. Inlinable means it carries a prop-based interpolation (the case
+* the mixin path bails on) and is shaped so its declarations can be spliced into the consumer's
+* `&` block:
+*
+*  - private (not exported / preserved for cross-file use),
+*  - every rule is the top-level `&` block (no nested selectors, no at-rules),
+*  - no chained mixin references (a property-less `${otherMixin}` / `${parts.reset}` slot)
+*    — those compose as separate style keys whose ordering we cannot preserve by splicing, and
+*  - exactly one prop-dependent declaration. That single dynamic entry is the case the mixin
+*    path bails on, and it has no intra-helper ordering ambiguity. Zero means a plain mixin
+*    (handled by the shared-style-key path); two or more dynamic entries are emitted as
+*    styleFns/variants whose precedence depends on per-declaration source order, which the
+*    splice (which stamps the single reference order on every inlined declaration) cannot
+*    preserve.
+*
+* Whether the inline is *override-safe* is decided per reference by `inlineWouldContend`, which
+* is independent of how the value lowers.
+*/
+function inlinablePropDependentDeclaration(helperDecl) {
+	if (helperDecl.isExported || helperDecl.preserveCssHelperDeclaration) return null;
+	let propDependentDeclaration = null;
+	let propDependentCount = 0;
+	for (const rule of helperDecl.rules) {
+		if (rule.selector.trim() !== "&" || rule.atRuleStack.length > 0) return null;
+		for (const declaration of rule.declarations) {
+			if (!declaration.property) return null;
+			if (declarationReadsProps(declaration, helperDecl.templateExpressions)) {
+				propDependentCount += 1;
+				propDependentDeclaration = declaration;
+			}
+		}
+	}
+	return propDependentCount === 1 ? propDependentDeclaration : null;
+}
+/**
+* Splicing is override-safe only when the set of properties the helper sets is disjoint from
+* every other declaration in the merged block. When a property has a single contributor, however
+* the inlined value lowers (variant or style function) the result matches styled-components; when
+* two declarations contend, their relative precedence depends on the lowering path, which the
+* splice cannot guarantee — so bail. This checks:
+*
+*  - helper-internal overlap: two helper declarations touching the same leaf (e.g.
+*    `color: ${dyn}; color: red`) have order-dependent precedence the splice may invert;
+*  - helper-vs-consumer overlap: any helper property (its prop-dependent one *or* a static, which
+*    could override an earlier dynamic consumer declaration) overlapping a consumer declaration;
+*  - any property-less consumer declaration — a sibling mixin (`${reset}`) or dynamic block whose
+*    emitted properties are unknown here.
+*
+* Every consumer rule is scanned (not just the reference's), so a later top-level `&` rule or a
+* nested selector/at-rule the consumer authors is included.
+*/
+function inlineWouldContend(reference, consumer) {
+	const helperDeclarations = reference.helperDecl.rules.flatMap((rule) => rule.declarations);
+	for (let i = 0; i < helperDeclarations.length; i += 1) for (let j = i + 1; j < helperDeclarations.length; j += 1) if (propertiesConflict(helperDeclarations[i].property, helperDeclarations[j].property)) return true;
+	for (const rule of consumer.rules) for (const declaration of rule.declarations) {
+		if (declaration === reference.referenceDecl) continue;
+		if (!declaration.property) return true;
+		if (helperDeclarations.some((hd) => propertiesConflict(hd.property, declaration.property))) return true;
+	}
+	return false;
+}
+/**
+* Whether two CSS properties can set a common atomic StyleX longhand — i.e. they are equal, or
+* one is a shorthand whose expansion overlaps the other. Each property is expanded to its set of
+* atomic leaf longhands (a shorthand to its leaves, a longhand to itself) and the sets are
+* intersected. This correctly distinguishes overlapping families (`borderColor` vs
+* `borderTopColor`) from disjoint ones (`borderRadius` vs `border`, `width` vs `padding`).
+*
+* Backstop for shorthands the leaf table does not model: most CSS shorthands name their longhands
+* with their own camelCase prefix (`font` → `fontVariantNumeric`, `overscrollBehavior` →
+* `overscrollBehaviorX`). When the table cannot vouch for *both* properties (one is neither a known
+* shorthand nor a known leaf), a word-prefix relationship is treated as contention so an unmodeled
+* shorthand/longhand pair conservatively bails. Fully-modeled families skip this (so `border` and
+* `borderRadius`, which share the `border` prefix but are disjoint, still inline).
+*/
+function propertiesConflict(a, b) {
+	const stylexA = cssPropertyToStylexProp(a);
+	const stylexB = cssPropertyToStylexProp(b);
+	const leavesA = leafLonghands(stylexA);
+	const leavesB = leafLonghands(stylexB);
+	for (const leaf of leavesA) if (leavesB.has(leaf)) return true;
+	if (isModeledProperty(stylexA) && isModeledProperty(stylexB)) return false;
+	return isWordPrefix(stylexA, stylexB) || isWordPrefix(stylexB, stylexA);
+}
+/** Whether the leaf table reliably classifies a StyleX property (a known shorthand or leaf). */
+function isModeledProperty(stylexProp) {
+	return KNOWN_SHORTHANDS.has(stylexProp) || KNOWN_LEAVES.has(stylexProp);
+}
+/** Whether `prefix` is `full` truncated at a camelCase word boundary (`font` ⊂ `fontVariant`). */
+function isWordPrefix(prefix, full) {
+	if (full.length <= prefix.length || !full.startsWith(prefix)) return false;
+	const next = full[prefix.length] ?? "";
+	return next !== next.toLowerCase() && next === next.toUpperCase();
+}
+/**
+* The atomic physical StyleX longhands a property can set. A shorthand expands to its leaves; a
+* longhand resolves to itself. A logical longhand resolves to *both* physical sides on its axis
+* (e.g. `marginInlineStart` → `marginLeft` and `marginRight`) because the writing direction is
+* unknown — in RTL `inline-start` is the right side — so a logical declaration conservatively
+* contends with either physical side it could map to.
+*/
+function leafLonghands(stylexProp) {
+	const canonical = CSS_ALIASES[stylexProp] ?? stylexProp;
+	if (LOGICAL_LEAF_TO_PHYSICAL[canonical]) return new Set(LOGICAL_LEAF_TO_PHYSICAL[canonical]);
+	const leaves = SHORTHAND_LEAVES[canonical] ?? LOGICAL_TO_PHYSICAL[canonical] ?? [canonical];
+	return new Set(leaves.flatMap(physicalLeaves));
+}
+/**
+* Legacy CSS property aliases → their canonical StyleX property. `cssPropertyToStylexProp` only
+* camelCases authored names, so an alias and its modern name read as disjoint leaves unless
+* collapsed here. This is the standard set of legacy name aliases: `word-wrap` for `overflow-wrap`;
+* `grid-gap`/`grid-row-gap`/`grid-column-gap` for `gap`/`row-gap`/`column-gap`; and
+* `page-break-before`/`page-break-after`/`page-break-inside` for `break-before`/`break-after`/
+* `break-inside`.
+*/
+const CSS_ALIASES = {
+	wordWrap: "overflowWrap",
+	gridGap: "gap",
+	gridRowGap: "rowGap",
+	gridColumnGap: "columnGap",
+	pageBreakBefore: "breakBefore",
+	pageBreakAfter: "breakAfter",
+	pageBreakInside: "breakInside"
+};
+/**
+* Maps a logical atomic longhand to every physical longhand it could map to under any writing
+* mode and direction. Flow-relative sides are not just RTL-swapped: in vertical writing modes the
+* block axis is horizontal and the inline axis is vertical, so a logical side can land on *any*
+* physical side. The mapping is therefore the full physical family, which is conservative but safe.
+*/
+function physicalLeaves(stylexProp) {
+	return LOGICAL_LEAF_TO_PHYSICAL[stylexProp] ?? [stylexProp];
+}
+const PHYSICAL_SIDES = [
+	"Top",
+	"Right",
+	"Bottom",
+	"Left"
+];
+const BORDER_KINDS = [
+	"Width",
+	"Style",
+	"Color"
+];
+const ALL_INSET_SIDES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const ALL_RADIUS_CORNERS = [
+	"borderTopLeftRadius",
+	"borderTopRightRadius",
+	"borderBottomLeftRadius",
+	"borderBottomRightRadius"
+];
+/** Logical atomic longhand → every physical longhand it could map to under any writing mode. */
+const LOGICAL_LEAF_TO_PHYSICAL = {
+	inlineSize: ["width", "height"],
+	blockSize: ["width", "height"],
+	minInlineSize: ["minWidth", "minHeight"],
+	minBlockSize: ["minWidth", "minHeight"],
+	maxInlineSize: ["maxWidth", "maxHeight"],
+	maxBlockSize: ["maxWidth", "maxHeight"],
+	containIntrinsicInlineSize: ["containIntrinsicWidth", "containIntrinsicHeight"],
+	containIntrinsicBlockSize: ["containIntrinsicWidth", "containIntrinsicHeight"],
+	overflowBlock: ["overflowX", "overflowY"],
+	overflowInline: ["overflowX", "overflowY"],
+	overscrollBehaviorBlock: ["overscrollBehaviorX", "overscrollBehaviorY"],
+	overscrollBehaviorInline: ["overscrollBehaviorX", "overscrollBehaviorY"],
+	borderStartStartRadius: ALL_RADIUS_CORNERS,
+	borderStartEndRadius: ALL_RADIUS_CORNERS,
+	borderEndStartRadius: ALL_RADIUS_CORNERS,
+	borderEndEndRadius: ALL_RADIUS_CORNERS
+};
+for (const axis of ["Block", "Inline"]) for (const end of ["Start", "End"]) {
+	for (const base of [
+		"margin",
+		"padding",
+		"scrollMargin",
+		"scrollPadding"
+	]) LOGICAL_LEAF_TO_PHYSICAL[`${base}${axis}${end}`] = PHYSICAL_SIDES.map((side) => `${base}${side}`);
+	LOGICAL_LEAF_TO_PHYSICAL[`inset${axis}${end}`] = ALL_INSET_SIDES;
+	for (const kind of BORDER_KINDS) LOGICAL_LEAF_TO_PHYSICAL[`border${axis}${end}${kind}`] = PHYSICAL_SIDES.map((side) => `border${side}${kind}`);
+}
+/**
+* StyleX shorthand → its atomic leaf longhands (in physical form). Used to decide whether two
+* declarations contend for the same property. Mid-level shorthands (`borderTop`, `borderColor`,
+* `borderBlock`) are included so intersection captures partial overlap (e.g. `border` vs
+* `borderTopColor`). Directional families (margin/padding/inset/border) are generated for both
+* their physical and logical names; logical leaves are normalized to physical via `toPhysicalLeaf`.
+*/
+const SHORTHAND_LEAVES = {
+	gap: ["rowGap", "columnGap"],
+	overflow: ["overflowX", "overflowY"],
+	overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
+	containIntrinsicSize: ["containIntrinsicWidth", "containIntrinsicHeight"],
+	textEmphasis: ["textEmphasisStyle", "textEmphasisColor"],
+	mask: [
+		"maskImage",
+		"maskMode",
+		"maskRepeat",
+		"maskPosition",
+		"maskClip",
+		"maskOrigin",
+		"maskSize",
+		"maskComposite"
+	],
+	offset: [
+		"offsetPath",
+		"offsetDistance",
+		"offsetRotate",
+		"offsetAnchor",
+		"offsetPosition"
+	],
+	borderRadius: [
+		"borderTopLeftRadius",
+		"borderTopRightRadius",
+		"borderBottomRightRadius",
+		"borderBottomLeftRadius"
+	],
+	borderImage: [
+		"borderImageSource",
+		"borderImageSlice",
+		"borderImageWidth",
+		"borderImageOutset",
+		"borderImageRepeat"
+	],
+	outline: [
+		"outlineWidth",
+		"outlineStyle",
+		"outlineColor"
+	],
+	font: [
+		"fontStyle",
+		"fontVariant",
+		"fontWeight",
+		"fontStretch",
+		"fontSize",
+		"lineHeight",
+		"fontFamily"
+	],
+	background: [
+		"backgroundColor",
+		"backgroundImage",
+		"backgroundPositionX",
+		"backgroundPositionY",
+		"backgroundSize",
+		"backgroundRepeat",
+		"backgroundOrigin",
+		"backgroundClip",
+		"backgroundAttachment"
+	],
+	backgroundPosition: ["backgroundPositionX", "backgroundPositionY"],
+	flex: [
+		"flexGrow",
+		"flexShrink",
+		"flexBasis"
+	],
+	flexFlow: ["flexDirection", "flexWrap"],
+	placeItems: ["alignItems", "justifyItems"],
+	placeContent: ["alignContent", "justifyContent"],
+	placeSelf: ["alignSelf", "justifySelf"],
+	gridArea: [
+		"gridRowStart",
+		"gridColumnStart",
+		"gridRowEnd",
+		"gridColumnEnd"
+	],
+	gridColumn: ["gridColumnStart", "gridColumnEnd"],
+	gridRow: ["gridRowStart", "gridRowEnd"],
+	gridTemplate: [
+		"gridTemplateRows",
+		"gridTemplateColumns",
+		"gridTemplateAreas"
+	],
+	grid: [
+		"gridTemplateRows",
+		"gridTemplateColumns",
+		"gridTemplateAreas",
+		"gridAutoRows",
+		"gridAutoColumns",
+		"gridAutoFlow"
+	],
+	columns: ["columnWidth", "columnCount"],
+	columnRule: [
+		"columnRuleWidth",
+		"columnRuleStyle",
+		"columnRuleColor"
+	],
+	transition: [
+		"transitionProperty",
+		"transitionDuration",
+		"transitionTimingFunction",
+		"transitionDelay"
+	],
+	animation: [
+		"animationName",
+		"animationDuration",
+		"animationTimingFunction",
+		"animationDelay",
+		"animationIterationCount",
+		"animationDirection",
+		"animationFillMode",
+		"animationPlayState"
+	],
+	textDecoration: [
+		"textDecorationLine",
+		"textDecorationStyle",
+		"textDecorationColor",
+		"textDecorationThickness"
+	],
+	whiteSpace: ["whiteSpaceCollapse", "textWrapMode"],
+	textWrap: ["textWrapMode", "textWrapStyle"],
+	listStyle: [
+		"listStyleType",
+		"listStylePosition",
+		"listStyleImage"
+	]
+};
+const borderLeaf = (side, kind) => `border${side}${kind}`;
+const ALL_BORDER_LEAVES = PHYSICAL_SIDES.flatMap((side) => BORDER_KINDS.map((kind) => borderLeaf(side, kind)));
+for (const base of [
+	"margin",
+	"padding",
+	"scrollMargin",
+	"scrollPadding"
+]) {
+	const allSides = PHYSICAL_SIDES.map((side) => `${base}${side}`);
+	SHORTHAND_LEAVES[base] = allSides;
+	SHORTHAND_LEAVES[`${base}Block`] = allSides;
+	SHORTHAND_LEAVES[`${base}Inline`] = allSides;
+}
+SHORTHAND_LEAVES.inset = ALL_INSET_SIDES;
+SHORTHAND_LEAVES.insetBlock = ALL_INSET_SIDES;
+SHORTHAND_LEAVES.insetInline = ALL_INSET_SIDES;
+SHORTHAND_LEAVES.border = [...ALL_BORDER_LEAVES, ...SHORTHAND_LEAVES.borderImage];
+SHORTHAND_LEAVES.borderBlock = ALL_BORDER_LEAVES;
+SHORTHAND_LEAVES.borderInline = ALL_BORDER_LEAVES;
+for (const side of PHYSICAL_SIDES) SHORTHAND_LEAVES[`border${side}`] = BORDER_KINDS.map((kind) => borderLeaf(side, kind));
+for (const kind of BORDER_KINDS) {
+	const allOfKind = PHYSICAL_SIDES.map((side) => borderLeaf(side, kind));
+	SHORTHAND_LEAVES[`border${kind}`] = allOfKind;
+	SHORTHAND_LEAVES[`borderBlock${kind}`] = allOfKind;
+	SHORTHAND_LEAVES[`borderInline${kind}`] = allOfKind;
+}
+for (const axis of ["Block", "Inline"]) for (const end of ["Start", "End"]) SHORTHAND_LEAVES[`border${axis}${end}`] = ALL_BORDER_LEAVES;
+const KNOWN_SHORTHANDS = new Set(Object.keys(SHORTHAND_LEAVES));
+const KNOWN_LEAVES = /* @__PURE__ */ new Set();
+for (const leaves of Object.values(SHORTHAND_LEAVES)) for (const leaf of leaves) KNOWN_LEAVES.add(leaf);
+for (const leaves of Object.values(LOGICAL_LEAF_TO_PHYSICAL)) for (const leaf of leaves) KNOWN_LEAVES.add(leaf);
+/** True when a declaration's interpolated value reads a non-theme component prop. */
+function declarationReadsProps(declaration, templateExpressions) {
+	if (declaration.value.kind !== "interpolated") return false;
+	for (const part of declaration.value.parts) if (part.kind === "slot" && expressionReadsNonThemeProps(templateExpressions[part.slotId])) return true;
+	return false;
+}
+/** Mirrors the mixin-bail detection: an arrow/function interpolation that reads non-theme props. */
+function expressionReadsNonThemeProps(expr) {
+	const node = expr;
+	if (!node || node.type !== "ArrowFunctionExpression" && node.type !== "FunctionExpression") return false;
+	const propsUsed = new Set([...collectPropsFromArrowFn(node), ...collectPropsFromArrowFnDestructured(node)]);
+	propsUsed.delete("theme");
+	return propsUsed.size > 0;
+}
+/**
+* Splices the helper's `&`-block declarations into the consumer at the reference site,
+* remapping the helper's interpolation slots onto freshly-appended consumer template
+* expressions. Returns false (without mutating) when the reference is no longer present.
+*/
+function inlineHelperReference(consumer, reference) {
+	const { rule, referenceDecl, helperDecl } = reference;
+	const declIndex = rule.declarations.indexOf(referenceDecl);
+	if (declIndex === -1) return false;
+	const slotOffset = consumer.templateExpressions.length;
+	const inheritedSourceOrder = referenceDecl.sourceOrder;
+	const inlinedDecls = helperDecl.rules.flatMap((helperRule) => helperRule.declarations.map((d) => remapDeclaration(d, slotOffset, inheritedSourceOrder)));
+	for (const expr of helperDecl.templateExpressions) consumer.templateExpressions.push(cloneAstNode(expr));
+	rule.declarations.splice(declIndex, 1, ...inlinedDecls);
+	return true;
+}
+/** Deep-clones a CSS declaration, offsetting every interpolation slot id by `slotOffset`. */
+function remapDeclaration(d, slotOffset, sourceOrder) {
+	const value = d.value.kind === "interpolated" ? {
+		kind: "interpolated",
+		parts: d.value.parts.map((part) => part.kind === "slot" ? {
+			kind: "slot",
+			slotId: part.slotId + slotOffset
+		} : {
+			kind: "static",
+			value: part.value
+		})
+	} : {
+		kind: "static",
+		value: d.value.value
+	};
+	return {
+		...d,
+		value,
+		valueRaw: offsetPlaceholders(d.valueRaw, slotOffset),
+		sourceOrder
+	};
+}
+/** Rewrites `__SC_EXPR_<n>__` placeholders in a raw value string by adding `slotOffset`. */
+function offsetPlaceholders(valueRaw, slotOffset) {
+	return valueRaw.replace(/__SC_EXPR_(\d+)__/g, (_, n) => `__SC_EXPR_${Number(n) + slotOffset}__`);
+}
+//#endregion
 //#region src/internal/lower-rules/slot-utils.ts
 /**
 * Locate the slot interpolation in a `${...}` value and return its
@@ -27071,8 +27642,45 @@ function tryResolveConditionalValue(node, ctx) {
 	const buildRuntimeCallResult = () => runtimeCallState.info ? {
 		type: "runtimeCallOnly",
 		resolveCallContext: runtimeCallState.info.resolveCallContext,
-		resolveCallResult: runtimeCallState.info.resolveCallResult
+		resolveCallResult: runtimeCallState.info.resolveCallResult,
+		...runtimeCallState.info.cssValueText ? { cssValueText: runtimeCallState.info.cssValueText } : {}
 	} : null;
+	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 markFirstRuntimeCallInBranch = (branch) => {
+		const pending = [branch];
+		const seen = /* @__PURE__ */ new Set();
+		while (pending.length > 0) {
+			const current = pending.pop();
+			if (!current || typeof current !== "object" || seen.has(current)) continue;
+			seen.add(current);
+			if (isCallExpressionNode(current)) {
+				markAsRuntimeCall(current);
+				return;
+			}
+			const node = current;
+			if (node.type === "BinaryExpression" || node.type === "LogicalExpression") pending.push(node.left, node.right);
+			else if (node.type === "TemplateLiteral") pending.push(...node.expressions ?? []);
+			else if (node.type === "ConditionalExpression") pending.push(node.test, node.consequent, node.alternate);
+			else if (node.expression) pending.push(node.expression);
+		}
+	};
 	const body = getFunctionBodyExpr(expr);
 	if (!body || body.type !== "ConditionalExpression") return null;
 	const checkThemeBooleanTest = (test) => {
@@ -27119,93 +27727,41 @@ function tryResolveConditionalValue(node, ctx) {
 		}
 		return null;
 	};
-	const resolveThemeBranchValue = (branch) => {
-		const themeInfo = resolveThemeFromMemberExpr(branch);
-		if (!themeInfo) return null;
-		const res = (ctx.resolveValueOptional ?? ctx.resolveValue)({
-			kind: "theme",
-			path: themeInfo.path,
-			filePath: ctx.filePath,
-			loc: getNodeLocStart(branch) ?? void 0
-		});
-		if (!res) return null;
-		const astNode = parseExpr(ctx.api, res.expr);
-		if (!astNode) return null;
-		return {
-			astNode,
-			imports: res.imports
-		};
-	};
-	const themeBoolInfo = checkThemeBooleanTest(body.test);
-	if (themeBoolInfo && node.css.property) {
-		const { consequent, alternate } = body;
-		const trueBranch = themeBoolInfo.isNegated ? alternate : consequent;
-		const falseBranch = themeBoolInfo.isNegated ? consequent : alternate;
-		const trueRaw = literalToStaticValue(trueBranch);
-		const falseRaw = literalToStaticValue(falseBranch);
-		let trueValue = trueRaw !== null && typeof trueRaw !== "boolean" ? trueRaw : null;
-		let falseValue = falseRaw !== null && typeof falseRaw !== "boolean" ? falseRaw : null;
-		const trueImports = [];
-		const falseImports = [];
-		if (trueValue === null) {
-			const resolved = resolveThemeBranchValue(trueBranch);
-			if (resolved) {
-				trueValue = resolved.astNode;
-				trueImports.push(...resolved.imports);
-			}
-		}
-		if (falseValue === null) {
-			const resolved = resolveThemeBranchValue(falseBranch);
-			if (resolved) {
-				falseValue = resolved.astNode;
-				falseImports.push(...resolved.imports);
-			}
-		}
-		if (trueValue !== null && falseValue !== null) return {
-			type: "splitThemeBooleanVariants",
-			cssProp: node.css.property,
-			themeProp: themeBoolInfo.themeProp,
-			trueValue,
-			falseValue,
-			trueImports,
-			falseImports
-		};
-		const inlineStyleFallback = tryBuildThemeBooleanInlineStyleFallback({
-			trueValue,
-			falseValue,
-			trueImports,
-			falseImports,
-			trueBranch,
-			falseBranch,
-			themeBoolInfo,
-			cssProp: node.css.property,
-			paramName,
-			info
-		});
-		if (inlineStyleFallback) return inlineStyleFallback;
-	}
 	const expectedUsage = node.css.property ? "create" : "props";
-	const branchToExpr = (b) => {
+	const branchToExpr = (b, mode = "default") => {
+		const resolveValue = mode === "optional" ? ctx.resolveValueOptional ?? ctx.resolveValue : ctx.resolveValue;
+		const resolverCtx = mode === "optional" ? {
+			...ctx,
+			resolveValue,
+			resolveCall: ctx.resolveCallOptional ?? ctx.resolveCall
+		} : ctx;
 		const v = literalToStaticValue(b);
 		if (v !== null) {
 			if (typeof v === "boolean") return null;
 			return {
 				usage: "create",
 				expr: typeof v === "string" ? JSON.stringify(v) : String(v),
-				imports: []
+				imports: [],
+				...typeof v === "string" ? { cssValueText: v } : {}
 			};
 		}
 		if (!b || typeof b !== "object") return null;
 		if (b.type === "BinaryExpression") {
 			const binary = b;
 			if (isCssCalcOperator$1(binary.operator)) {
-				const left = branchToExpr(binary.left);
-				const right = branchToExpr(binary.right);
-				if (left && right && left.usage === expectedUsage && right.usage === expectedUsage && (left.imports.length > 0 || right.imports.length > 0) && isCssCalcSafeOperand(left) && isCssCalcSafeOperand(right)) return {
-					usage: expectedUsage,
-					expr: buildCssCalcExprSource(left, binary.operator, right),
-					imports: [...left.imports, ...right.imports]
-				};
+				const left = branchToExpr(binary.left, mode);
+				const right = branchToExpr(binary.right, mode);
+				if (left && right && left.usage === expectedUsage && right.usage === expectedUsage && (left.imports.length > 0 || right.imports.length > 0) && isCssCalcSafeOperand(left) && isCssCalcSafeOperand(right)) {
+					if (left.dynamicArgUsage || right.dynamicArgUsage) {
+						markFirstRuntimeCallInBranch(left.dynamicArgUsage ? binary.left : binary.right);
+						return null;
+					}
+					return {
+						usage: expectedUsage,
+						expr: buildCssCalcExprSource(left, binary.operator, right),
+						imports: [...left.imports, ...right.imports]
+					};
+				}
 			}
 		}
 		const callHasThemeArg = (call) => (call.arguments ?? []).some((arg) => {
@@ -27220,28 +27776,17 @@ function tryResolveConditionalValue(node, ctx) {
 			}
 			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, propsParamName, cssProperty, themeBindingName);
+			const res = resolveImportedHelperCall(call, resolverCtx, propsParamName, cssProperty, themeBindingName);
 			if (res.kind === "resolved") {
-				if ("expr" in res.result) return res.result;
+				if ("expr" in res.result) {
+					if ("preserveRuntimeCall" in res.result && res.result.preserveRuntimeCall) runtimeCallState.info = {
+						resolveCallContext: res.resolveCallContext,
+						resolveCallResult: res.resolveCallResult,
+						cssValueText: res.result.expr
+					};
+					return res.result;
+				}
 				if ("preserveRuntimeCall" in res.result && res.result.preserveRuntimeCall) {
 					runtimeCallState.info = {
 						resolveCallContext: res.resolveCallContext,
@@ -27253,10 +27798,17 @@ function tryResolveConditionalValue(node, ctx) {
 			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, propsParamName, cssProperty, themeBindingName);
+				if (outerArgs.length === 1 && isCurrentCurriedHelperContextArg(outerArgs[0], propsParamName, themeBindingName)) {
+					const innerRes = resolveImportedHelperCall(inner, resolverCtx, propsParamName, cssProperty, themeBindingName);
 					if (innerRes.kind === "resolved") {
-						if ("expr" in innerRes.result) return innerRes.result;
+						if ("expr" in innerRes.result) {
+							if ("preserveRuntimeCall" in innerRes.result && innerRes.result.preserveRuntimeCall) runtimeCallState.info = {
+								resolveCallContext: innerRes.resolveCallContext,
+								resolveCallResult: innerRes.resolveCallResult,
+								cssValueText: innerRes.result.expr
+							};
+							return innerRes.result;
+						}
 						if ("preserveRuntimeCall" in innerRes.result && innerRes.result.preserveRuntimeCall) {
 							runtimeCallState.info = {
 								resolveCallContext: innerRes.resolveCallContext,
@@ -27270,9 +27822,10 @@ function tryResolveConditionalValue(node, ctx) {
 			if (callHasThemeArg(call)) markAsRuntimeCall(call);
 			return null;
 		};
+		let templateHasDynamicArgUsage = false;
 		const templateResult = resolveTemplateLiteralExpressions(b, (expr) => {
 			const themeInfo = resolveThemeFromMemberExpr(expr);
-			if (themeInfo) return ctx.resolveValue({
+			if (themeInfo) return resolveValue({
 				kind: "theme",
 				path: themeInfo.path,
 				filePath: ctx.filePath,
@@ -27280,6 +27833,10 @@ function tryResolveConditionalValue(node, ctx) {
 			}) ?? null;
 			if (isCallExpressionNode(expr)) {
 				const callRes = resolveCallExpr(expr, node.css.property);
+				if (callRes?.dynamicArgUsage) {
+					templateHasDynamicArgUsage = true;
+					markAsRuntimeCall(expr);
+				}
 				return callRes ? {
 					expr: callRes.expr,
 					imports: callRes.imports
@@ -27287,22 +27844,29 @@ function tryResolveConditionalValue(node, ctx) {
 			}
 			return null;
 		});
-		if (templateResult) return {
-			usage: "create",
-			...templateResult
-		};
+		if (templateResult) {
+			if (templateHasDynamicArgUsage && runtimeCallState.info) runtimeCallState.info.cssValueText = templateResult.expr;
+			return {
+				usage: "create",
+				...templateResult,
+				cssValueText: templateResult.expr,
+				...templateHasDynamicArgUsage ? { dynamicArgUsage: "call" } : {}
+			};
+		}
 		if (isCallExpressionNode(b)) {
 			const resolved = resolveCallExpr(b, node.css.property);
 			if (resolved) return {
 				usage: isAdapterResultCssValue(resolved, node.css.property) ? "create" : "props",
 				expr: resolved.expr,
-				imports: resolved.imports
+				imports: resolved.imports,
+				cssValueText: resolved.expr,
+				...resolved.dynamicArgUsage ? { dynamicArgUsage: resolved.dynamicArgUsage } : {}
 			};
 			return null;
 		}
 		const themeInfo = resolveThemeFromMemberExpr(b);
 		if (themeInfo) {
-			const res = ctx.resolveValue({
+			const res = resolveValue({
 				kind: "theme",
 				path: themeInfo.path,
 				filePath: ctx.filePath,
@@ -27312,14 +27876,15 @@ function tryResolveConditionalValue(node, ctx) {
 			return {
 				usage: expectedUsage,
 				expr: res.expr,
-				imports: res.imports
+				imports: res.imports,
+				cssValueText: res.expr
 			};
 		}
 		const importedInfo = extractRootAndPath(b);
 		if (importedInfo) {
 			const imp = ctx.resolveImport(importedInfo.rootName, importedInfo.rootNode);
 			if (imp) {
-				const res = ctx.resolveValue({
+				const res = resolveValue({
 					kind: "importedValue",
 					importedName: imp.importedName,
 					source: imp.source,
@@ -27330,7 +27895,8 @@ function tryResolveConditionalValue(node, ctx) {
 				if (res) return {
 					usage: expectedUsage,
 					expr: res.expr,
-					imports: res.imports
+					imports: res.imports,
+					cssValueText: res.expr
 				};
 			}
 		}
@@ -27339,6 +27905,106 @@ function tryResolveConditionalValue(node, ctx) {
 	const getBranch = (value) => {
 		return branchToExpr(value);
 	};
+	const getBranchOptional = (value) => {
+		return branchToExpr(value, "optional");
+	};
+	const isEmptyCssInterpolationBranch = (value) => isEmptyCssBranch(value);
+	const resolveThemeBooleanStyleValue = (branch) => {
+		if (isEmptyCssBranch(branch)) return null;
+		const raw = literalToStaticValue(branch);
+		if (raw !== null && typeof raw !== "boolean") return {
+			value: raw,
+			imports: [],
+			...typeof raw === "string" ? { cssValueText: raw } : {}
+		};
+		const themeInfo = resolveThemeFromMemberExpr(branch);
+		if (themeInfo) {
+			const res = (ctx.resolveValueOptional ?? ctx.resolveValue)({
+				kind: "theme",
+				path: themeInfo.path,
+				filePath: ctx.filePath,
+				loc: getNodeLocStart(branch) ?? void 0
+			});
+			if (!res) return null;
+			const astNode = parseExpr(ctx.api, res.expr);
+			return astNode ? {
+				value: astNode,
+				imports: res.imports,
+				cssValueText: res.expr
+			} : null;
+		}
+		const resolved = getBranchOptional(branch);
+		if (!resolved || resolved.usage !== "create") return null;
+		if (resolved.dynamicArgUsage) {
+			if (isCallExpressionNode(branch)) markAsRuntimeCall(branch);
+			return null;
+		}
+		const astNode = parseExpr(ctx.api, resolved.expr);
+		return astNode ? {
+			value: astNode,
+			imports: resolved.imports,
+			cssValueText: resolved.cssValueText ?? resolved.expr
+		} : null;
+	};
+	const themeBoolInfo = checkThemeBooleanTest(body.test);
+	if (themeBoolInfo && node.css.property) {
+		const { consequent, alternate } = body;
+		const trueBranch = themeBoolInfo.isNegated ? alternate : consequent;
+		const falseBranch = themeBoolInfo.isNegated ? consequent : alternate;
+		let runtimeCallBranch = null;
+		const noteRuntimeCallBranch = (branch, before) => {
+			if (runtimeCallState.info === before) return;
+			runtimeCallBranch = runtimeCallBranch && runtimeCallBranch !== branch ? "both" : branch;
+		};
+		const beforeTrueResolve = runtimeCallState.info;
+		const trueResolved = resolveThemeBooleanStyleValue(trueBranch);
+		noteRuntimeCallBranch("true", beforeTrueResolve);
+		const beforeFalseResolve = runtimeCallState.info;
+		const falseResolved = resolveThemeBooleanStyleValue(falseBranch);
+		noteRuntimeCallBranch("false", beforeFalseResolve);
+		const trueValue = trueResolved?.value ?? null;
+		const falseValue = falseResolved?.value ?? null;
+		const trueImports = trueResolved?.imports ?? [];
+		const falseImports = falseResolved?.imports ?? [];
+		const trueCssValueText = trueResolved?.cssValueText;
+		const falseCssValueText = falseResolved?.cssValueText;
+		if (trueValue !== null && falseValue !== null) {
+			const runtimeCallInfo = runtimeCallState.info;
+			return {
+				type: "splitThemeBooleanVariants",
+				cssProp: node.css.property,
+				themeProp: themeBoolInfo.themeProp,
+				trueValue,
+				falseValue,
+				trueImports,
+				falseImports,
+				...trueCssValueText ? { trueCssValueText } : {},
+				...falseCssValueText ? { falseCssValueText } : {},
+				...runtimeCallInfo?.resolveCallResult ? { runtimeResolveCallResult: runtimeCallInfo.resolveCallResult } : {},
+				...runtimeCallInfo?.cssValueText ? { runtimeCssValueText: runtimeCallInfo.cssValueText } : {}
+			};
+		}
+		if (trueValue === null !== (falseValue === null) && isEmptyCssInterpolationBranch(trueValue === null ? trueBranch : falseBranch)) return null;
+		const inlineStyleFallback = tryBuildThemeBooleanInlineStyleFallback({
+			trueValue,
+			falseValue,
+			trueImports,
+			falseImports,
+			trueBranch,
+			falseBranch,
+			themeBoolInfo,
+			cssProp: node.css.property,
+			paramName,
+			info
+		});
+		if (inlineStyleFallback) {
+			if (inlineStyleFallback.type === "splitThemeBooleanWithInlineStyleFallback") {
+				const resolvedRuntimeBranch = inlineStyleFallback.resolvedBranchIsTrue ? "true" : "false";
+				if (runtimeCallBranch === resolvedRuntimeBranch || runtimeCallBranch === "both") return null;
+			}
+			return inlineStyleFallback;
+		}
+	}
 	const buildOneSidedVariantResult = (args) => {
 		const { cons, alt, alternate, truthyWhen } = args;
 		if (!cons || alt || !isEmptyCssBranch(alternate)) return null;
@@ -28057,6 +28723,21 @@ function isDestructuredFromParam(arrowFn, name) {
 		return p.key?.type === "Identifier" && p.key.name === name;
 	});
 }
+function isCurrentCurriedHelperContextArg(arg, propsParamName, themeBindingName) {
+	if (!arg || typeof arg !== "object") return false;
+	const node = arg;
+	if (node.type === "Identifier") return node.name === propsParamName || node.name === themeBindingName;
+	if (node.type !== "ObjectExpression" || node.properties?.length !== 1) return false;
+	const property = node.properties[0];
+	if (property.type !== "Property" && property.type !== "ObjectProperty" || property.computed || property.key?.type !== "Identifier" || property.key.name !== "theme") return false;
+	const value = property.value;
+	if (value?.type === "Identifier" && value.name === themeBindingName) return true;
+	if (propsParamName) {
+		const valuePath = getMemberPathFromIdentifier(property.value, propsParamName);
+		return valuePath?.length === 1 && valuePath[0] === "theme";
+	}
+	return false;
+}
 /**
 * Parses a template literal that contains a simple prop-based ternary expression.
 * Supports patterns like: `background: ${props.$primary ? "red" : "blue"}`
@@ -28105,7 +28786,6 @@ function tryBuildThemeBooleanInlineStyleFallback(args) {
 		type: "splitThemeBooleanWithInlineStyleFallback",
 		cssProp,
 		themeProp: themeBoolInfo.themeProp,
-		isNegated: themeBoolInfo.isNegated,
 		resolvedValue: resolvedBranchIsTrue ? trueValue : falseValue,
 		resolvedImports: resolvedBranchIsTrue ? trueImports : falseImports,
 		resolvedBranchIsTrue,
@@ -28488,20 +29168,6 @@ function tryResolveArrowFnCallWithConditionalArgs(node, ctx) {
 	};
 }
 /**
-* Extracts a static literal value from an AST node, distinguishing null literals
-* from extraction failure. Returns `undefined` when the node is not a recognized
-* static literal, and the actual value (including `null`) otherwise.
-*/
-function extractStaticLiteralValue(node) {
-	if (!node || typeof node !== "object") return;
-	const type = node.type;
-	if (type === "ArrowFunctionExpression" || type === "FunctionExpression") return;
-	if (type === "NullLiteral") return null;
-	if (type === "Literal" && node.value === null) return null;
-	const v = literalToStaticValue(node);
-	return v !== null ? v : void 0;
-}
-/**
 * Extracts the prop name from a conditional expression's test node.
 *
 * Supports:
@@ -29704,6 +30370,13 @@ function tryHandleInterpolatedStringValue(args) {
 		}
 		return true;
 	}
+	if (tryHandleTwoValueShorthandLeadingExpression({
+		decl,
+		d,
+		resolveImportedValueExpr,
+		addImport,
+		setValue
+	})) return true;
 	const tl = buildInterpolatedTemplate({
 		j,
 		decl,
@@ -29730,6 +30403,48 @@ function tryHandleInterpolatedStringValue(args) {
 	}
 	return true;
 }
+function tryHandleTwoValueShorthandLeadingExpression(args) {
+	const { decl, d, resolveImportedValueExpr, addImport, setValue } = args;
+	const prop = (d.property ?? "").trim();
+	if (prop !== "padding" && prop !== "margin") return false;
+	if (!resolveImportedValueExpr || d.value?.kind !== "interpolated") return false;
+	const parts = d.value.parts ?? [];
+	if (parts.length !== 2 || parts[0]?.kind !== "slot" || parts[1]?.kind !== "static") return false;
+	const slotId = parts[0].slotId;
+	if (slotId === void 0) return false;
+	const suffixMatch = (parts[1].value ?? "").match(/^([a-zA-Z%]+)\s+(.+)$/);
+	if (!suffixMatch) return false;
+	const expr = decl.templateExpressions[slotId];
+	if (!expr || expr.type === "ArrowFunctionExpression") return false;
+	const resolved = resolveImportedValueExpr(expr, {
+		allowCssCalc: true,
+		cssCalcUnit: suffixMatch[1]
+	});
+	if (!resolved || "bail" in resolved || !resolved.skipStaticWrap) return false;
+	const entries = splitDirectionalProperty({
+		prop,
+		rawValue: (d.valueRaw ?? "").trim(),
+		important: d.important,
+		useLogical: getUseLogicalProperties()
+	});
+	if (!entries.length) return false;
+	for (const imp of resolved.imports ?? []) addImport?.(imp);
+	const placeholder = `__SC_EXPR_${slotId}__`;
+	for (const entry of entries) {
+		if (!entry.value.includes(placeholder)) {
+			setValue(entry.prop, normalizeWhitespace(entry.value));
+			continue;
+		}
+		if (resolvedValueCarriesUnit(resolved.resolved)) {
+			setValue(entry.prop, resolved.resolved);
+			continue;
+		}
+		const literalValue = literalToStaticValue(resolved.resolved);
+		if (literalValue === null || typeof literalValue === "boolean") return false;
+		setValue(entry.prop, normalizeWhitespace(entry.value.replace(placeholder, String(literalValue))));
+	}
+	return true;
+}
 function buildInterpolatedTemplate(args) {
 	const { j, decl, cssValue, resolveCallExpr, resolveImportedValueExpr, addImport, multiline } = args;
 	if (!cssValue || cssValue.kind !== "interpolated") return null;
@@ -29739,17 +30454,23 @@ function buildInterpolatedTemplate(args) {
 	let allStatic = true;
 	const quasis = [];
 	let q = "";
+	let staticPrefixToConsume = "";
 	for (let partIndex = 0; partIndex < parts.length; partIndex++) {
 		const part = parts[partIndex];
 		if (part.kind === "static") {
-			q += part.value;
-			fullStaticValue += part.value;
+			const rawValue = part.value ?? "";
+			const value = staticPrefixToConsume && rawValue.startsWith(staticPrefixToConsume) ? rawValue.slice(staticPrefixToConsume.length) : rawValue;
+			staticPrefixToConsume = "";
+			q += value;
+			fullStaticValue += value;
 			continue;
 		}
 		if (part.kind === "slot") {
 			const expr = decl.templateExpressions[part.slotId];
 			if (!expr || expr.type === "ArrowFunctionExpression") return null;
-			if (expr.type === "CallExpression" && resolveCallExpr) {
+			const adjacentUnit = getAdjacentUnitAfterParts(parts, partIndex);
+			const negateResolvedUnit = Boolean(adjacentUnit && q.endsWith("-"));
+			if (expr.type === "CallExpression" && resolveCallExpr && !adjacentUnit) {
 				const resolved = resolveCallExpr(expr);
 				if (resolved) {
 					if (hasAdjacentUnitInParts(parts, partIndex)) return null;
@@ -29760,18 +30481,17 @@ function buildInterpolatedTemplate(args) {
 						for (const imp of resolved.imports ?? []) addImport?.(imp);
 						continue;
 					}
-					quasis.push(j.templateElement({
-						raw: q,
-						cooked: q
-					}, false));
-					q = "";
 					allStatic = false;
 					for (const imp of resolved.imports ?? []) addImport?.(imp);
-					exprs.push(resolved.resolved);
+					q = appendExpressionToTemplate(j, quasis, exprs, q, resolved.resolved);
 					continue;
 				}
 			}
-			const importedResolved = resolveImportedValueExpr?.(expr);
+			const importedResolved = resolveImportedValueExpr?.(expr, adjacentUnit ? {
+				allowCssCalc: true,
+				cssCalcUnit: adjacentUnit,
+				negate: negateResolvedUnit
+			} : void 0);
 			if (importedResolved) {
 				if ("bail" in importedResolved) return null;
 				const resolved = importedResolved;
@@ -29779,7 +30499,13 @@ function buildInterpolatedTemplate(args) {
 					for (const imp of resolved.imports ?? []) addImport?.(imp);
 					return resolved.resolved;
 				}
-				if (hasAdjacentUnitInParts(parts, partIndex) && !hasSingleSlotUnitSuffix(cssValue)) return null;
+				if (hasAdjacentUnitInParts(parts, partIndex) && !hasSingleSlotUnitSuffix(cssValue)) {
+					if (!adjacentUnit || !resolved.skipStaticWrap) return null;
+					if (resolvedValueCarriesUnit(resolved.resolved)) {
+						staticPrefixToConsume = adjacentUnit;
+						if (negateResolvedUnit) q = q.slice(0, -1);
+					}
+				}
 				if (resolved.resolved?.type === "StringLiteral" || resolved.resolved?.type === "Literal" && typeof resolved.resolved.value === "string") {
 					const strValue = resolved.resolved.value;
 					q += strValue;
@@ -29787,14 +30513,9 @@ function buildInterpolatedTemplate(args) {
 					for (const imp of resolved.imports ?? []) addImport?.(imp);
 					continue;
 				}
-				quasis.push(j.templateElement({
-					raw: q,
-					cooked: q
-				}, false));
-				q = "";
 				allStatic = false;
 				for (const imp of resolved.imports ?? []) addImport?.(imp);
-				exprs.push(resolved.resolved);
+				q = appendExpressionToTemplate(j, quasis, exprs, q, resolved.resolved);
 				continue;
 			}
 			const literalValue = literalToStaticValue(expr);
@@ -29827,6 +30548,39 @@ function buildInterpolatedTemplate(args) {
 		stylisValueRaw: multiline.stylisValueRaw
 	});
 }
+function resolvedValueCarriesUnit(node) {
+	if (!node || typeof node !== "object") return false;
+	if (node.type === "NumericLiteral" || node.type === "Literal" && typeof node.value === "number") return false;
+	if (node.type === "StringLiteral" || node.type === "Literal" && typeof node.value === "string") return /[a-zA-Z%]$/.test(String(node.value));
+	return true;
+}
+const CSS_UNIT_PATTERN = /^(?:px|rem|em|ex|ch|cap|ic|lh|rlh|vw|vh|vi|vb|vmin|vmax|svw|svh|lvw|lvh|dvw|dvh|cqw|cqh|cqi|cqb|cqmin|cqmax|cm|mm|q|in|pt|pc|fr|%)$/i;
+function getAdjacentUnitAfterParts(parts, slotIndex) {
+	const candidate = (parts[slotIndex + 1]?.kind === "static" ? parts[slotIndex + 1]?.value ?? "" : "").match(/^([a-zA-Z%]+)/)?.[1];
+	return candidate && CSS_UNIT_PATTERN.test(candidate) ? candidate : null;
+}
+function appendExpressionToTemplate(j, quasis, expressions, currentQuasi, expression) {
+	if (expression?.type !== "TemplateLiteral") {
+		quasis.push(j.templateElement({
+			raw: currentQuasi,
+			cooked: currentQuasi
+		}, false));
+		expressions.push(expression);
+		return "";
+	}
+	const nestedQuasis = expression.quasis ?? [];
+	const nestedExpressions = expression.expressions ?? [];
+	currentQuasi += nestedQuasis[0]?.value?.raw ?? nestedQuasis[0]?.value?.cooked ?? "";
+	for (let index = 0; index < nestedExpressions.length; index++) {
+		quasis.push(j.templateElement({
+			raw: currentQuasi,
+			cooked: currentQuasi
+		}, false));
+		expressions.push(nestedExpressions[index]);
+		currentQuasi = nestedQuasis[index + 1]?.value?.raw ?? nestedQuasis[index + 1]?.value?.cooked ?? "";
+	}
+	return currentQuasi;
+}
 function hasAdjacentUnitInParts(parts, slotIndex) {
 	const before = parts[slotIndex - 1]?.kind === "static" ? parts[slotIndex - 1]?.value ?? "" : "";
 	const after = parts[slotIndex + 1]?.kind === "static" ? parts[slotIndex + 1]?.value ?? "" : "";
@@ -37339,10 +38093,11 @@ function tryHandleInterpolatedBorder(ctx, args) {
 	{
 		const slotIndices = [];
 		for (let i = 0; i < tokens.length; i++) {
-			const m = tokens[i].match(/^__SC_EXPR_(\d+)__$/);
+			const m = tokens[i].match(/^__SC_EXPR_(\d+)__(?:([a-zA-Z%]+))?$/);
 			if (m?.[1]) slotIndices.push({
 				idx: i,
-				slotId: Number(m[1])
+				slotId: Number(m[1]),
+				...m[2] ? { unit: m[2] } : {}
 			});
 		}
 		if (slotIndices.length === 2 && tokens.length === 3) {
@@ -37370,7 +38125,7 @@ function tryHandleInterpolatedBorder(ctx, args) {
 								return true;
 							}
 							const shouldSwap = slot0Role === "color" || slot1Role === "width";
-							const widthAst = shouldSwap ? slot1Ast : slot0Ast;
+							const widthAst = withBorderWidthUnit(shouldSwap ? slot1Ast : slot0Ast, shouldSwap ? slot1.unit : slot0.unit);
 							const colorAst = shouldSwap ? slot0Ast : slot1Ast;
 							applyResolvedPropValue(widthProp, widthAst);
 							applyResolvedPropValue(styleProp, middleStyle);
@@ -37737,6 +38492,16 @@ function classifyBorderSlotRole(ast) {
 	if ((node.type === "StringLiteral" || node.type === "Literal") && typeof node.value === "string") return looksLikeLength(node.value) ? "width" : "color";
 	return null;
 }
+function withBorderWidthUnit(expr, unit) {
+	if (!unit) return expr;
+	const staticValue = literalToStaticValue(expr);
+	if (typeof staticValue === "number") return `${staticValue}${unit}`;
+	if (typeof staticValue === "string" && looksLikeLength(staticValue)) {
+		const trimmed = staticValue.trim();
+		return /[a-zA-Z%]$/.test(trimmed) || Number.parseFloat(trimmed) === 0 ? staticValue : `${staticValue}${unit}`;
+	}
+	return expr;
+}
 function hasConflictingEarlierVariant(variantBuckets, borderEntries) {
 	const borderProps = borderEntries.map(([prop]) => prop);
 	return variantBuckets.some((bucket) => Object.keys(bucket).some((variantProp) => borderProps.some((borderProp) => borderLonghandsConflict(variantProp, borderProp))));
@@ -37757,6 +38522,61 @@ function parseBorderLonghand(prop) {
 	};
 }
 //#endregion
+//#region src/internal/lower-rules/important-values.ts
+function appendImportantToStyleValue(j, valueAst, important) {
+	if (!important) return valueAst;
+	if (typeof valueAst === "string") return valueAst.includes("!important") ? valueAst : `${valueAst} !important`;
+	if (typeof valueAst === "number") return `${valueAst} !important`;
+	if (!valueAst || typeof valueAst !== "object") return valueAst;
+	const node = valueAst;
+	if (node.type === "ExpressionStatement") return appendImportantToStyleValue(j, node.expression, important);
+	if (node.type === "StringLiteral" || node.type === "Literal" || node.type === "NumericLiteral") {
+		if (typeof node.value === "string") return node.value.includes("!important") ? valueAst : j.literal(`${node.value} !important`);
+		if (typeof node.value === "number") return j.literal(`${node.value} !important`);
+		return valueAst;
+	}
+	if (node.type === "TemplateLiteral" && Array.isArray(node.quasis)) return appendImportantToTemplateLiteral(j, node.quasis, node.expressions, valueAst);
+	return j.templateLiteral([j.templateElement({
+		raw: "",
+		cooked: ""
+	}, false), j.templateElement({
+		raw: " !important",
+		cooked: " !important"
+	}, true)], [valueAst]);
+}
+function cssValueIsImportant(value) {
+	if (typeof value === "string") return value.includes("!important");
+	if (!value || typeof value !== "object") return false;
+	const node = value;
+	if (node.type === "ExpressionStatement") return cssValueIsImportant(node.expression);
+	if ((node.type === "StringLiteral" || node.type === "Literal") && typeof node.value === "string") return node.value.includes("!important");
+	if (node.type === "TemplateLiteral" && Array.isArray(node.quasis)) return node.quasis.some((q) => {
+		const raw = q?.value?.raw ?? "";
+		const cooked = q?.value?.cooked ?? "";
+		return raw.includes("!important") || cooked.includes("!important");
+	});
+	return false;
+}
+function appendImportantToTemplateLiteral(j, quasis, expressions, originalValue) {
+	const lastIndex = quasis.length - 1;
+	const last = quasis[lastIndex];
+	const lastRaw = last?.value?.raw ?? last?.value?.cooked ?? "";
+	const lastCooked = last?.value?.cooked ?? last?.value?.raw ?? "";
+	if (lastRaw.includes("!important") || lastCooked.includes("!important")) return originalValue;
+	const importantQuasis = quasis.map((quasi, i) => {
+		const raw = quasi?.value?.raw ?? quasi?.value?.cooked ?? "";
+		const cooked = quasi?.value?.cooked ?? quasi?.value?.raw ?? "";
+		return i === lastIndex ? j.templateElement({
+			raw: `${raw} !important`,
+			cooked: `${cooked} !important`
+		}, true) : j.templateElement({
+			raw,
+			cooked
+		}, false);
+	});
+	return j.templateLiteral(importantQuasis, expressions ?? []);
+}
+//#endregion
 //#region src/internal/lower-rules/interpolated-variant-resolvers.ts
 function handleSplitVariantsResolvedValue(ctx) {
 	const { j, decl, d, res, styleObj, variantBuckets, variantStyleKeys, pseudos, media, resolvedSelectorMedia, parseExpr, resolverImports, warnings, setBail, bailUnsupported } = ctx;
@@ -37874,39 +38694,8 @@ function handleSplitVariantsResolvedValue(ctx) {
 			target[prop] = map;
 			return map;
 		};
-		const withImportant = (valueAst) => {
-			if (!d.important || !valueAst || typeof valueAst !== "object") return valueAst;
-			const node = valueAst;
-			if (node.type === "StringLiteral" || node.type === "Literal" || node.type === "NumericLiteral") {
-				if (typeof node.value === "string") return node.value.includes("!important") ? valueAst : j.literal(`${node.value} !important`);
-				if (typeof node.value === "number") return j.literal(`${node.value} !important`);
-				return valueAst;
-			}
-			if (node.type === "TemplateLiteral" && Array.isArray(node.quasis)) {
-				const quasis = node.quasis;
-				const lastIndex = quasis.length - 1;
-				const last = quasis[lastIndex];
-				const lastText = last?.value?.cooked ?? last?.value?.raw ?? "";
-				if (lastText.includes("!important")) return valueAst;
-				const newQuasis = quasis.map((q, i) => i === lastIndex ? j.templateElement({
-					raw: `${lastText} !important`,
-					cooked: `${lastText} !important`
-				}, true) : j.templateElement({
-					raw: q?.value?.raw ?? q?.value?.cooked ?? "",
-					cooked: q?.value?.cooked ?? q?.value?.raw ?? ""
-				}, false));
-				return j.templateLiteral(newQuasis, node.expressions ?? []);
-			}
-			return j.templateLiteral([j.templateElement({
-				raw: "",
-				cooked: ""
-			}, false), j.templateElement({
-				raw: " !important",
-				cooked: " !important"
-			}, true)], [valueAst]);
-		};
 		const applyWithContext = (prop, valueAstRaw) => {
-			const valueAst = withImportant(valueAstRaw);
+			const valueAst = appendImportantToStyleValue(j, valueAstRaw, d.important);
 			if (media) {
 				const map = getOrCreateConditionMap(prop);
 				map[media] = valueAst;
@@ -38496,7 +39285,7 @@ function emitPseudoMediaStyleFnFromProps(args) {
 //#endregion
 //#region src/internal/lower-rules/rule-interpolated-declaration.ts
 function handleInterpolatedDeclaration(args) {
-	const { ctx, rule, allRules, d, media, pseudos, pseudoElement, attrTarget, resolvedSelectorMedia, applyResolvedPropValue } = args;
+	const { ctx, rule, allRules, d, media, pseudos, pseudoElement, attrTarget, resolvedSelectorMedia, hasAncestorAttributeScope, applyResolvedPropValue } = args;
 	const { state, decl, styleObj, perPropPseudo, variantBuckets, variantStyleKeys, variantSourceOrder, observedVariantFallbackFns, extraStyleObjects, styleFnFromProps, styleFnDecls, inlineStyleProps, cssHelperPropValues, tryHandleMappedFunctionColor, tryHandleLogicalOrDefault, tryHandleConditionalPropCoalesceWithTheme, tryHandleEnumIfChainValue, tryHandleThemeIndexedLookup, handlerContext, componentInfo, tryHandlePropertyTernaryTemplateLiteral, tryHandleCssHelperFunctionSwitchBlock, tryHandleCssHelperConditionalBlock, findJsxPropTsType, findJsxPropTsTypeForVariantExtraction, annotateParamFromJsxProp, isJsxPropOptional, applyVariant, getBaseStyleTarget, notifyResolvedStylesArg } = ctx;
 	const hasStaticPropsBeforeResolvedStylesArg = () => Object.keys(styleObj).length > 0 || getBaseStyleTarget() !== styleObj;
 	const annotateScalarParams = (params, propNames) => {
@@ -38508,7 +39297,7 @@ function handleInterpolatedDeclaration(args) {
 			if (isJsxPropOptional(propName)) addUndefinedToParamType(j, param);
 		});
 	};
-	const { api, j, filePath, warnings, resolverImports, keyframesNames, parseExpr, resolveValue, resolveCall, importMap, cssHelperNames, cssHelperObjectMembers, declByLocalName, cssHelperValuesByKey, staticPropertyValues, warnPropInlineStyle, applyCssHelperMixin, hasLocalThemeBinding, resolveThemeValue, resolveThemeValueFromFn, getOrCreateLocalStylexVar, resolveImportInScope, resolveImportForExpr } = state;
+	const { api, j, filePath, warnings, resolverImports, keyframesNames, parseExpr, resolveValue, resolveCall, importMap, cssHelperNames, cssHelperObjectMembers, declByLocalName, cssHelperValuesByKey, staticPropertyValues, staticIdentifierValues, warnPropInlineStyle, applyCssHelperMixin, hasLocalThemeBinding, resolveThemeValue, resolveThemeValueFromFn, getOrCreateLocalStylexVar, resolveImportInScope, resolveImportForExpr } = state;
 	const avoidNames = new Set(importMap.keys());
 	if (state.bail) return;
 	if (d.value.kind !== "interpolated") return;
@@ -38856,7 +39645,7 @@ function handleInterpolatedDeclaration(args) {
 		return (observedNumericCssTextProps.has(jsxProp) || isNumberLikeTsType(findJsxPropTsType(jsxProp))) && getNumericCssEmissionMode(stylexProp) === "cssText";
 	};
 	const maybeEmitPreservedRuntimeCallOverride = (args) => {
-		const { resolveCallResult, originalExpr, loc } = args;
+		const { resolveCallResult, originalExpr, loc, cssValueText } = args;
 		if (!resolveCallResult || !("preserveRuntimeCall" in resolveCallResult) || !resolveCallResult.preserveRuntimeCall) return "not-requested";
 		if (!d.property) {
 			warnings.push({
@@ -38900,7 +39689,17 @@ function handleInterpolatedDeclaration(args) {
 		const effectiveSuffix = d.important ? `${suffix} !important` : suffix;
 		const runtimeCallArg = prefix || effectiveSuffix ? buildTemplateWithStaticParts(j, baseRuntimeExpr, prefix, effectiveSuffix) : baseRuntimeExpr;
 		if (runtimeExprNeedsTheme) markDeclNeedsUseThemeHook(decl);
-		const outs = cssDeclarationToStylexDeclarations(d);
+		const runtimeBackgroundProp = d.property === "background" ? resolveRuntimeBackgroundStylexProp(baseRuntimeExpr, cssValueText) : null;
+		if (runtimeBackgroundProp === "unsupported") {
+			warnings.push({
+				severity: "error",
+				type: "Arrow function: helper call body is not supported",
+				loc
+			});
+			bail = true;
+			return "failed";
+		}
+		const outs = runtimeBackgroundProp ? [{ prop: runtimeBackgroundProp }] : cssDeclarationToStylexDeclarations(d);
 		if (outs.length !== 1 || !outs[0]?.prop) {
 			warnings.push({
 				severity: "error",
@@ -38910,21 +39709,38 @@ function handleInterpolatedDeclaration(args) {
 			bail = true;
 			return "failed";
 		}
-		const out = outs[0];
-		const fnKey = styleKeyWithSuffix(decl.styleKey, out.prop);
-		if (!styleFnDecls.has(fnKey)) {
-			const outParamName = cssPropertyToIdentifier(out.prop, avoidNames);
-			const param = j.identifier(outParamName);
-			if (/\.(ts|tsx)$/.test(filePath)) param.typeAnnotation = j.tsTypeAnnotation(j.tsStringKeyword());
-			const body = j.objectExpression([makeCssProperty(j, out.prop, outParamName)]);
-			styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], body));
+		const runtimeProp = outs[0].prop;
+		const runtimeStyle = { [runtimeProp]: runtimeCallArg };
+		if (runtimeBackgroundProp) applyBackgroundShorthandLayerReset(j, runtimeStyle, runtimeBackgroundProp, d.important);
+		if (!subtractLaterStaticOverrides({
+			rule,
+			allRules,
+			currentDecl: d,
+			branchStyles: [runtimeStyle],
+			ignoreUnsafeOverlaps: true
+		})) {
+			warnings.push({
+				severity: "error",
+				type: "Arrow function: helper call body is not supported",
+				loc
+			});
+			bail = true;
+			return "failed";
 		}
+		if (Object.keys(runtimeStyle).length === 0) return "suppressed";
+		const fnKey = styleKeyWithSuffix(decl.styleKey, runtimeProp);
+		const outParamName = cssPropertyToIdentifier(runtimeProp, avoidNames);
+		const param = j.identifier(outParamName);
+		if (/\.(ts|tsx)$/.test(filePath)) param.typeAnnotation = j.tsTypeAnnotation(j.tsStringKeyword());
+		const body = j.objectExpression(Object.entries(runtimeStyle).map(([prop, value]) => prop === runtimeProp ? makeCssProperty(j, runtimeProp, outParamName) : j.property("init", makeCssPropKey(j, prop), cloneAstNode(value))));
+		styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], body));
 		const existingIdx = styleFnFromProps.findIndex((entry) => entry.fnKey === fnKey && entry.jsxProp === "__props" && entry.condition === "always");
 		const newEntry = {
 			fnKey,
 			jsxProp: "__props",
 			condition: "always",
-			callArg: cloneAstNode(runtimeCallArg)
+			callArg: cloneAstNode(runtimeCallArg),
+			sourceOrder: ctx.allocateSourceOrder()
 		};
 		if (existingIdx >= 0) styleFnFromProps[existingIdx] = newEntry;
 		else styleFnFromProps.push(newEntry);
@@ -39057,7 +39873,10 @@ function handleInterpolatedDeclaration(args) {
 			return null;
 		};
 		const allowCssCalcForImportedArithmetic = isEntireInterpolatedValueSingleSlot(d, decl);
-		const resolveImportedValueExpr = (expr, allowCssCalc = allowCssCalcForImportedArithmetic) => {
+		const resolveImportedValueExpr = (expr, options = allowCssCalcForImportedArithmetic) => {
+			const allowCssCalc = typeof options === "boolean" ? options : options.allowCssCalc ?? false;
+			const cssCalcUnit = typeof options === "boolean" ? void 0 : options.cssCalcUnit;
+			const forceNegate = typeof options === "boolean" ? false : options.negate === true;
 			const resolveChildExpression = (child) => resolveImportedValueExpr(child, false);
 			const isBailResolution = (result) => Boolean(result && "bail" in result);
 			const resolvedOrOriginal = (result, original) => result && !isBailResolution(result) ? result.resolved : original;
@@ -39094,7 +39913,9 @@ function handleInterpolatedDeclaration(args) {
 						prefix: "",
 						suffix: ""
 					};
-					if (staticParts.prefix) {
+					const calcUnit = cssCalcUnit ?? staticParts.suffix;
+					const hasNegativePrefix = !cssCalcUnit && staticParts.prefix === "-" && /^-?(?:[a-zA-Z%]+)$/.test(staticParts.suffix) && (expr.operator === "+" || expr.operator === "-");
+					if (staticParts.prefix && !hasNegativePrefix && !cssCalcUnit) {
 						warnings.push({
 							severity: "warning",
 							type: "Unsupported interpolation: call expression",
@@ -39106,7 +39927,9 @@ function handleInterpolatedDeclaration(args) {
 					const calcExpr = buildCssCalcTemplateExpression({
 						j,
 						operator: expr.operator,
-						unit: expr.operator === "+" || expr.operator === "-" ? staticParts.suffix : "",
+						unit: expr.operator === "+" || expr.operator === "-" ? calcUnit : "",
+						negate: forceNegate || hasNegativePrefix,
+						staticIdentifierValues,
 						left: {
 							node: resolvedLeft,
 							allowExpression: Boolean(leftResult)
@@ -39119,9 +39942,9 @@ function handleInterpolatedDeclaration(args) {
 					if (calcExpr) return {
 						resolved: calcExpr,
 						imports,
-						skipStaticWrap: staticParts.suffix !== ""
+						skipStaticWrap: calcUnit !== ""
 					};
-					if (staticParts.suffix && imports.length > 0) return bailResolvedUnitExpression(expr);
+					if (calcUnit && imports.length > 0) return bailResolvedUnitExpression(expr);
 				}
 				return {
 					resolved: j.binaryExpression(expr.operator, resolvedLeft, resolvedRight),
@@ -39229,7 +40052,25 @@ function handleInterpolatedDeclaration(args) {
 				const imp = calleeInfo ? resolveImportInScope(calleeInfo.rootName, calleeInfo.rootNode) : null;
 				if (!imp) return null;
 				const resolvedCall = resolveCallExpr(expr);
-				if (resolvedCall) return resolvedCall;
+				if (resolvedCall) {
+					if (!cssCalcUnit) return resolvedCall;
+					const literalValue = literalToStaticValue(resolvedCall.resolved);
+					const numericLiteral = typeof literalValue === "number" ? literalValue : typeof literalValue === "string" && literalValue.trim() !== "" && Number.isFinite(Number(literalValue)) ? Number(literalValue) : null;
+					if (numericLiteral !== null) return {
+						resolved: j.literal(`${numericLiteral}${cssCalcUnit}`),
+						imports: resolvedCall.imports,
+						skipStaticWrap: true
+					};
+					if (forceNegate) return {
+						resolved: buildNegatedCssTokenTemplate(j, resolvedCall.resolved),
+						imports: resolvedCall.imports,
+						skipStaticWrap: true
+					};
+					return {
+						...resolvedCall,
+						skipStaticWrap: true
+					};
+				}
 				warnings.push({
 					severity: "warning",
 					type: "Adapter resolveCall returned undefined for helper call",
@@ -39623,6 +40464,10 @@ function handleInterpolatedDeclaration(args) {
 				bail = true;
 				break;
 			}
+			if (hasSourceOrderedThemeStyleOverlap(decl, extraStyleObjects, res.cssText)) {
+				bail = true;
+				continue;
+			}
 			addResolverImports(res.imports);
 			const exprAst = parseExpr(res.expr);
 			if (!exprAst) {
@@ -39708,7 +40553,9 @@ function handleInterpolatedDeclaration(args) {
 			addResolverImports(res.imports);
 			const { prefix, suffix } = extractStaticPartsForDecl(d);
 			const effectiveSuffix = d.important ? `${suffix} !important` : suffix;
-			const exprAst = parseExpr(wrapExprWithStaticParts(res.expr, prefix, effectiveSuffix));
+			const wrappedExpr = wrapExprWithStaticParts(res.expr, prefix, effectiveSuffix);
+			const cssValueTextForClassification = prefix || effectiveSuffix ? wrappedExpr : res.cssValueText;
+			const exprAst = parseExpr(wrappedExpr);
 			if (!exprAst) {
 				const resolveCallMeta = res.resolveCallContext && res.resolveCallResult ? {
 					resolveCallContext: res.resolveCallContext,
@@ -39730,7 +40577,7 @@ function handleInterpolatedDeclaration(args) {
 				bail = true;
 				break;
 			}
-			const outs = cssDeclarationToStylexDeclarations(d);
+			const outs = d.property === "background" && cssValueTextForClassification ? [{ prop: resolveBackgroundStylexProp(cssValueTextForClassification) }] : cssDeclarationToStylexDeclarations(d);
 			for (let i = 0; i < outs.length; i++) {
 				const out = outs[i];
 				const commentSource = i === 0 ? {
@@ -39738,12 +40585,13 @@ function handleInterpolatedDeclaration(args) {
 					leadingLine: d.leadingLineComment,
 					trailingLine: d.trailingLineComment
 				} : null;
-				applyResolvedPropValue(out.prop, exprAst, commentSource);
+				applyResolvedPropValue(out.prop, exprAst, commentSource, d.property);
 			}
 			if (maybeEmitPreservedRuntimeCallOverride({
 				resolveCallResult: res.resolveCallResult,
 				originalExpr: expr,
-				loc
+				loc,
+				cssValueText: cssValueTextForClassification
 			}) === "failed") break;
 			continue;
 		}
@@ -39751,43 +40599,89 @@ function handleInterpolatedDeclaration(args) {
 			if (maybeEmitPreservedRuntimeCallOverride({
 				resolveCallResult: res.resolveCallResult,
 				originalExpr: expr,
-				loc
+				loc,
+				cssValueText: res.cssValueText
 			}) === "failed") break;
 			continue;
 		}
 		if (res && res.type === "splitThemeBooleanVariants") {
+			if (pseudos?.length || media || pseudoElement || attrTarget || resolvedSelectorMedia || hasAncestorAttributeScope) {
+				bail = true;
+				continue;
+			}
 			addResolverImports(res.trueImports);
 			addResolverImports(res.falseImports);
-			const { trueKey: trueStyleKey, falseKey: falseStyleKey } = buildThemeStyleKeys(decl.styleKey, res.themeProp);
-			if (!decl.needsUseThemeHook) decl.needsUseThemeHook = [];
-			let entry = decl.needsUseThemeHook.find((e) => e.themeProp === res.themeProp);
-			if (!entry) {
-				entry = {
-					themeProp: res.themeProp,
-					trueStyleKey,
-					falseStyleKey
-				};
-				decl.needsUseThemeHook.push(entry);
-				extraStyleObjects.set(trueStyleKey, {});
-				extraStyleObjects.set(falseStyleKey, {});
-			}
-			const trueStyle = extraStyleObjects.get(trueStyleKey) ?? {};
-			const falseStyle = extraStyleObjects.get(falseStyleKey) ?? {};
-			if (!applyThemeBooleanValue(j, res.cssProp, res.trueValue, trueStyle)) {
+			const trueStyle = {};
+			const falseStyle = {};
+			if (!applyThemeBooleanValue(j, res.cssProp, res.trueValue, trueStyle, d.important, res.trueCssValueText)) {
 				bail = true;
 				continue;
 			}
-			if (!applyThemeBooleanValue(j, res.cssProp, res.falseValue, falseStyle)) {
+			if (!applyThemeBooleanValue(j, res.cssProp, res.falseValue, falseStyle, d.important, res.falseCssValueText)) {
 				bail = true;
 				continue;
 			}
-			extraStyleObjects.set(trueStyleKey, trueStyle);
-			extraStyleObjects.set(falseStyleKey, falseStyle);
+			const { trueKey: baseTrueStyleKey, falseKey: baseFalseStyleKey } = buildThemeStyleKeys(decl.styleKey, res.themeProp);
+			if (!decl.needsUseThemeHook) decl.needsUseThemeHook = [];
+			const latestSourceOrder = getLatestThemeInterleavableSourceOrder({
+				decl,
+				variantSourceOrder,
+				styleFnFromProps
+			});
+			const matchingThemeEntries = decl.needsUseThemeHook.filter((entry) => entry.themeProp === res.themeProp && (entry.trueStyleKey || entry.falseStyleKey));
+			let reusableEntry = null;
+			for (let i = matchingThemeEntries.length - 1; i >= 0; i--) {
+				const entry = matchingThemeEntries[i];
+				if (entry.sourceOrder !== void 0 && entry.sourceOrder === latestSourceOrder) {
+					reusableEntry = entry;
+					break;
+				}
+			}
+			const mergeExtraStyleObject = (styleKey, style) => {
+				const existing = extraStyleObjects.get(styleKey);
+				if (!existing) {
+					extraStyleObjects.set(styleKey, style);
+					return;
+				}
+				const merged = { ...existing };
+				for (const [prop, value] of Object.entries(style)) {
+					if (Object.hasOwn(merged, prop) && cssValueIsImportant(merged[prop]) && !cssValueIsImportant(value)) continue;
+					merged[prop] = value;
+				}
+				extraStyleObjects.set(styleKey, merged);
+			};
+			if (reusableEntry) {
+				const restoredTrueStyleKey = reusableEntry.trueStyleKey ?? restoreThemeStyleKeyFromPairedSide(baseTrueStyleKey, baseFalseStyleKey, reusableEntry.falseStyleKey);
+				const restoredFalseStyleKey = reusableEntry.falseStyleKey ?? restoreThemeStyleKeyFromPairedSide(baseFalseStyleKey, baseTrueStyleKey, reusableEntry.trueStyleKey);
+				reusableEntry.trueStyleKey = restoredTrueStyleKey;
+				reusableEntry.falseStyleKey = restoredFalseStyleKey;
+				mergeExtraStyleObject(restoredTrueStyleKey, trueStyle);
+				mergeExtraStyleObject(restoredFalseStyleKey, falseStyle);
+			} else {
+				const sourceOrder = ctx.allocateSourceOrder();
+				const hasExistingStyleBucketForThemeProp = matchingThemeEntries.length > 0;
+				const trueStyleKey = hasExistingStyleBucketForThemeProp ? styleKeyWithSuffix(baseTrueStyleKey, `theme${sourceOrder}`) : baseTrueStyleKey;
+				const falseStyleKey = hasExistingStyleBucketForThemeProp ? styleKeyWithSuffix(baseFalseStyleKey, `theme${sourceOrder}`) : baseFalseStyleKey;
+				decl.needsUseThemeHook.push({
+					themeProp: res.themeProp,
+					trueStyleKey,
+					falseStyleKey,
+					sourceOrder
+				});
+				extraStyleObjects.set(trueStyleKey, trueStyle);
+				extraStyleObjects.set(falseStyleKey, falseStyle);
+			}
+			if (maybeEmitPreservedRuntimeCallOverride({
+				resolveCallResult: res.runtimeResolveCallResult,
+				originalExpr: expr,
+				loc,
+				cssValueText: res.runtimeCssValueText
+			}) === "failed") break;
 			decl.needsWrapperComponent = true;
 			continue;
 		}
 		if (res && res.type === "splitThemeBooleanWithInlineStyleFallback") {
-			if (pseudos?.length || media || pseudoElement) {
+			if (pseudos?.length || media || pseudoElement || attrTarget || resolvedSelectorMedia || hasAncestorAttributeScope) {
 				bail = true;
 				continue;
 			}
@@ -39795,9 +40689,14 @@ function handleInterpolatedDeclaration(args) {
 				bail = true;
 				continue;
 			}
+			const stylexDeclarations = cssDeclarationToStylexDeclarations(d);
+			if (hasLaterDeclarationForStylexProps(d, allRules, new Set(stylexDeclarations.map((out) => out.prop).filter(Boolean)))) {
+				bail = true;
+				continue;
+			}
 			addResolverImports(res.resolvedImports);
 			if (!decl.needsUseThemeHook) decl.needsUseThemeHook = [];
-			if (!decl.needsUseThemeHook.some((e) => e.themeProp === res.themeProp)) decl.needsUseThemeHook.push({
+			if (!decl.needsUseThemeHook.some((e) => e.themeProp === res.themeProp && e.trueStyleKey === null && e.falseStyleKey === null)) decl.needsUseThemeHook.push({
 				themeProp: res.themeProp,
 				trueStyleKey: null,
 				falseStyleKey: null
@@ -39805,8 +40704,8 @@ function handleInterpolatedDeclaration(args) {
 			const themeCondition = j.memberExpression(j.identifier("theme"), j.identifier(res.themeProp));
 			const undefinedExpr = j.identifier("undefined");
 			const inlineExpr = res.inlineExpr;
-			const conditionalExpr = !res.resolvedBranchIsTrue !== res.isNegated ? j.conditionalExpression(themeCondition, inlineExpr, undefinedExpr) : j.conditionalExpression(themeCondition, undefinedExpr, inlineExpr);
-			for (const out of cssDeclarationToStylexDeclarations(d)) {
+			const conditionalExpr = !res.resolvedBranchIsTrue ? j.conditionalExpression(themeCondition, inlineExpr, undefinedExpr) : j.conditionalExpression(themeCondition, undefinedExpr, inlineExpr);
+			for (const out of stylexDeclarations) {
 				if (!out.prop) continue;
 				styleObj[out.prop] = res.resolvedValue;
 				inlineStyleProps.push({
@@ -40644,13 +41543,23 @@ function handleInterpolatedDeclaration(args) {
 							hint: "Expected: props.x && 'css-string'"
 						}
 					};
-					if (op === "||" || op === "??") return {
-						type: "Arrow function: indexed theme lookup pattern not matched",
-						context: {
-							property: d.property,
-							operator: op
-						}
-					};
+					if (op === "||" || op === "??") {
+						const left = body?.left;
+						if (isMemberExpression(left) && !memberExpressionTouchesTheme(left)) return {
+							type: "Unsupported interpolation: member expression",
+							context: {
+								memberExpression: left?.type,
+								operator: op
+							}
+						};
+						return {
+							type: "Arrow function: indexed theme lookup pattern not matched",
+							context: {
+								property: d.property,
+								operator: op
+							}
+						};
+					}
 				}
 				if (bodyType === "CallExpression") return {
 					type: "Arrow function: helper call body is not supported",
@@ -40705,6 +41614,18 @@ function handleInterpolatedDeclaration(args) {
 	if (bail) state.markBail();
 }
 /**
+* Returns true if any part of a member/identifier chain references `theme`
+* (e.g. `props.theme.color[x]` or a destructured `theme.color[x]`). Used to
+* distinguish indexed theme lookups from prop-rooted member accesses.
+*/
+function memberExpressionTouchesTheme(node) {
+	if (!node || typeof node !== "object") return false;
+	const n = node;
+	if (n.type === "Identifier") return n.name === "theme";
+	if (isMemberExpression(n)) return memberExpressionTouchesTheme(n.property) || memberExpressionTouchesTheme(n.object);
+	return false;
+}
+/**
 * Searches the function body for a local variable with the given name whose
 * initializer references `fnParamName`. Returns a cloned expression with
 * `fnParamName` replaced by `jsxProp`, or null if no such variable is found.
@@ -40895,7 +41816,7 @@ function sameStyleProps(left, right) {
 * must bail in that case.
 */
 function subtractLaterStaticOverrides(args) {
-	const { rule, allRules, currentDecl, branchStyles } = args;
+	const { rule, allRules, currentDecl, branchStyles, ignoreUnsafeOverlaps = false } = args;
 	const currentIndex = rule.declarations.indexOf(currentDecl);
 	if (currentIndex === -1) return true;
 	const laterContexts = [{
@@ -40921,12 +41842,32 @@ function subtractLaterStaticOverrides(args) {
 			if (branchProps().some((prop) => [...borderProps].some((borderProp) => stylexPropsOverlap(prop, borderProp)))) return false;
 			continue;
 		}
+		if (laterDecl.property.trim() === "background") {
+			const overlapped = branchProps().filter((prop) => prop.startsWith("background"));
+			if (!overlapped.length) continue;
+			if (currentDecl.important && !laterDecl.important) {
+				if (ignoreUnsafeOverlaps) continue;
+				return false;
+			}
+			if (!context.unconditional || laterDecl.value.kind !== "static") {
+				if (ignoreUnsafeOverlaps) continue;
+				return false;
+			}
+			for (const branch of branchStyles) for (const prop of overlapped) delete branch[prop];
+			continue;
+		}
 		for (const out of cssDeclarationToStylexDeclarations(laterDecl)) {
 			const overrideProp = out.prop;
 			const overlapped = branchProps().filter((prop) => stylexPropsOverlap(prop, overrideProp));
 			if (!overlapped.length) continue;
-			if (currentDecl.important && !laterDecl.important) return false;
-			if (!context.unconditional || laterDecl.value.kind !== "static") return false;
+			if (currentDecl.important && !laterDecl.important) {
+				if (ignoreUnsafeOverlaps) continue;
+				return false;
+			}
+			if (!context.unconditional || laterDecl.value.kind !== "static") {
+				if (ignoreUnsafeOverlaps) continue;
+				return false;
+			}
 			for (const branch of branchStyles) if (!subtractOverrideFromBranch(branch, overlapped, overrideProp)) return false;
 		}
 	}
@@ -41358,20 +42299,22 @@ function buildCssCalcTemplateExpression(args) {
 	const expressions = [];
 	const quasis = [];
 	let currentQuasi = "calc(";
-	const appendOperand = (operand) => {
-		const staticText = expressionToCalcStaticText(operand.node, args.unit);
+	const appendOperand = (operand, options = {}) => {
+		const staticText = expressionToCalcStaticText(operand.node, args.unit, args.staticIdentifierValues);
 		if (staticText !== null) {
-			currentQuasi += staticText;
+			currentQuasi += options.negate ? negateCalcStaticText(staticText) : staticText;
 			return true;
 		}
 		if (!operand.allowExpression || !isStylexCalcExpression(operand.node)) return false;
+		if (options.negate) currentQuasi += "-1 * ";
 		quasis.push(currentQuasi);
 		currentQuasi = "";
 		expressions.push(operand.node);
 		return true;
 	};
-	if (!appendOperand(args.left)) return null;
-	currentQuasi += ` ${args.operator} `;
+	if (!appendOperand(args.left, { negate: args.negate })) return null;
+	const operator = args.negate ? negateCssCalcOperator(args.operator) : args.operator;
+	currentQuasi += ` ${operator} `;
 	if (!appendOperand(args.right)) return null;
 	currentQuasi += ")";
 	if (expressions.length === 0) return args.j.literal(currentQuasi);
@@ -41382,9 +42325,27 @@ function buildCssCalcTemplateExpression(args) {
 		cooked: raw
 	}, index === quasis.length - 1)), expressions);
 }
-function expressionToCalcStaticText(node, unit = "") {
+function buildNegatedCssTokenTemplate(j, expression) {
+	return j.templateLiteral([j.templateElement({
+		raw: "calc(-1 * ",
+		cooked: "calc(-1 * "
+	}, false), j.templateElement({
+		raw: ")",
+		cooked: ")"
+	}, true)], [expression]);
+}
+function negateCssCalcOperator(operator) {
+	return operator === "+" ? "-" : operator === "-" ? "+" : operator;
+}
+function negateCalcStaticText(value) {
+	return value.startsWith("-") ? value.slice(1) : `-${value}`;
+}
+function expressionToCalcStaticText(node, unit = "", staticIdentifierValues) {
 	const staticValue = literalToStaticValue(node);
 	if (typeof staticValue === "number") return `${staticValue}${unit}`;
+	const identifierName = node && typeof node === "object" && node.type === "Identifier" ? node.name : void 0;
+	const identifierValue = identifierName ? staticIdentifierValues?.get(identifierName) : void 0;
+	if (typeof identifierValue === "number") return `${identifierValue}${unit}`;
 	return null;
 }
 function hasAdjacentTemplateUnit(quasis, expressionIndex) {
@@ -41547,7 +42508,7 @@ function tryHandleDynamicPseudoElementStyleFunction(args) {
 * Apply a resolved theme boolean value to a style object, expanding CSS shorthands.
 * Returns false if the value cannot be expanded (caller should bail).
 */
-function applyThemeBooleanValue(j, cssProp, value, target) {
+function applyThemeBooleanValue(j, cssProp, value, target, important, cssValueText) {
 	const node = value;
 	const unwrapped = node?.type === "ExpressionStatement" ? node.expression : node;
 	const strValue = unwrapped && (unwrapped.type === "StringLiteral" || unwrapped.type === "Literal") && typeof unwrapped.value === "string" ? unwrapped.value : null;
@@ -41557,18 +42518,85 @@ function applyThemeBooleanValue(j, cssProp, value, target) {
 		const direction = borderMatch[1] ? borderMatch[1].slice(1).charAt(0).toUpperCase() + borderMatch[1].slice(2) : "";
 		const parsed = parseBorderShorthandParts(strValue);
 		if (!parsed) return false;
-		if (parsed.width) target[`border${direction}Width`] = j.literal(parsed.width);
-		if (parsed.style) target[`border${direction}Style`] = j.literal(parsed.style);
-		if (parsed.color) target[`border${direction}Color`] = j.literal(parsed.color);
+		if (parsed.width) target[`border${direction}Width`] = appendImportantToStyleValue(j, j.literal(parsed.width), important);
+		if (parsed.style) target[`border${direction}Style`] = appendImportantToStyleValue(j, j.literal(parsed.style), important);
+		if (parsed.color) target[`border${direction}Color`] = appendImportantToStyleValue(j, j.literal(parsed.color), important);
 		return true;
 	}
 	if (cssProp === "background") {
-		target[resolveBackgroundStylexProp(strValue ?? "")] = value;
+		const backgroundText = strValue ?? cssValueText ?? "";
+		if (backgroundText.trim() === "none") {
+			target.backgroundImage = appendImportantToStyleValue(j, j.literal("none"), important);
+			target.backgroundColor = appendImportantToStyleValue(j, j.literal("transparent"), important);
+			return true;
+		}
+		const backgroundProp = resolveBackgroundStylexProp(backgroundText);
+		target[backgroundProp] = appendImportantToStyleValue(j, value, important);
+		applyBackgroundShorthandLayerReset(j, target, backgroundProp, important);
 		return true;
 	}
-	target[cssPropertyToStylexProp(cssProp)] = value;
+	if (isCssShorthandProperty(cssProp)) return false;
+	target[cssPropertyToStylexProp(cssProp)] = appendImportantToStyleValue(j, value, important);
 	return true;
 }
+function restoreThemeStyleKeyFromPairedSide(targetBaseKey, pairedBaseKey, pairedStyleKey) {
+	if (pairedStyleKey?.startsWith(pairedBaseKey)) return `${targetBaseKey}${pairedStyleKey.slice(pairedBaseKey.length)}`;
+	return targetBaseKey;
+}
+function getLatestThemeInterleavableSourceOrder(args) {
+	const sourceOrders = Object.values(args.variantSourceOrder);
+	appendSourceOrders(sourceOrders, args.styleFnFromProps);
+	appendSourceOrders(sourceOrders, args.decl.needsUseThemeHook);
+	appendSourceOrders(sourceOrders, args.decl.pseudoAliasSelectors);
+	appendSourceOrders(sourceOrders, args.decl.variantDimensions);
+	return sourceOrders.length > 0 ? Math.max(...sourceOrders) : -1;
+}
+function appendSourceOrders(sourceOrders, entries) {
+	for (const entry of entries ?? []) if (entry.sourceOrder !== void 0) sourceOrders.push(entry.sourceOrder);
+}
+function applyBackgroundShorthandLayerReset(j, target, backgroundProp, important) {
+	if (backgroundProp === "backgroundColor") {
+		target.backgroundImage = appendImportantToStyleValue(j, j.literal("none"), important);
+		return;
+	}
+	target.backgroundColor = appendImportantToStyleValue(j, j.literal("transparent"), important);
+}
+function resolveRuntimeBackgroundStylexProp(value, cssValueText) {
+	const node = unwrapExpressionNode(value);
+	if (node?.type !== "ConditionalExpression") {
+		const staticText = getRuntimeBackgroundStaticText(node);
+		if (staticText !== null) return resolveBackgroundStylexProp(staticText);
+		return cssValueText ? resolveBackgroundStylexProp(cssValueText) : null;
+	}
+	const consequentProp = classifyRuntimeBackgroundBranch(node.consequent);
+	const alternateProp = classifyRuntimeBackgroundBranch(node.alternate);
+	if (consequentProp && alternateProp) return consequentProp === alternateProp ? consequentProp : "unsupported";
+	const cssTextProp = cssValueText ? resolveBackgroundStylexProp(cssValueText) : null;
+	const knownProp = consequentProp ?? alternateProp;
+	if (knownProp) {
+		if (knownProp === "backgroundImage") return "unsupported";
+		if (cssTextProp && cssTextProp !== knownProp) return "unsupported";
+		return "backgroundColor";
+	}
+	if (cssTextProp === "backgroundImage") return "unsupported";
+	return "backgroundColor";
+}
+function classifyRuntimeBackgroundBranch(value) {
+	const staticText = getRuntimeBackgroundStaticText(unwrapExpressionNode(value));
+	return staticText === null ? null : resolveBackgroundStylexProp(staticText);
+}
+function unwrapExpressionNode(value) {
+	if (!value || typeof value !== "object") return null;
+	const node = value;
+	if (node.type === "ExpressionStatement" || node.type === "TSAsExpression" || node.type === "TSSatisfiesExpression") return unwrapExpressionNode(node.expression);
+	return node;
+}
+function getRuntimeBackgroundStaticText(value) {
+	if (!value) return null;
+	if ((value.type === "StringLiteral" || value.type === "Literal") && typeof value.value === "string") return value.value;
+	if (value.type === "TemplateLiteral") return (value.quasis ?? []).map((quasi) => quasi.value?.cooked ?? quasi.value?.raw ?? "").join("") || null;
+	return null;
+}
 function scalarizePropsObjectDynamicValue(args) {
 	const propNames = uniqueScalarPropNames(args.propNames);
 	if (propNames.length === 0) return null;
@@ -42212,6 +43240,84 @@ function tryHandleMultiSlotTernary(ctx, d) {
 function hasRuntimeImport(imports) {
 	return (imports ?? []).some((imp) => !isStylexImportSource(imp.from.value));
 }
+function hasSourceOrderedThemeStyleOverlap(decl, extraStyleObjects, cssText) {
+	const themeProps = /* @__PURE__ */ new Set();
+	for (const entry of decl.needsUseThemeHook ?? []) {
+		if (entry.sourceOrder === void 0) continue;
+		collectStyleObjectProps(extraStyleObjects.get(entry.trueStyleKey ?? ""), themeProps);
+		collectStyleObjectProps(extraStyleObjects.get(entry.falseStyleKey ?? ""), themeProps);
+	}
+	return cssTextMayOverlapStylexProps(cssText, themeProps);
+}
+function collectStyleObjectProps(style, props) {
+	if (!style) return;
+	for (const prop of Object.keys(style)) props.add(prop);
+}
+function cssTextMayOverlapStylexProps(cssText, props) {
+	if (props.size === 0) return false;
+	if (!cssText) return true;
+	const chunks = cssText.split(";").map((chunk) => chunk.trim()).filter(Boolean);
+	if (chunks.length === 0) return true;
+	for (const chunk of chunks) {
+		const match = chunk.match(/^([^:]+):([\s\S]+)$/);
+		if (!match?.[1] || !match[2]) return true;
+		const property = match[1].trim();
+		const valueRaw = match[2].trim();
+		if (laterDeclarationMayResetStylexProps(property, props)) return true;
+		for (const out of cssDeclarationToStylexDeclarations({
+			property,
+			value: {
+				kind: "static",
+				value: valueRaw
+			},
+			important: false,
+			valueRaw
+		})) if (hasOverlappingStylexProp(props, out.prop)) return true;
+	}
+	return false;
+}
+function hasLaterDeclarationForStylexProps(current, rules, props) {
+	if (props.size === 0) return false;
+	let sawCurrent = false;
+	for (const rule of rules) for (const candidate of rule.declarations) {
+		if (candidate === current) {
+			sawCurrent = true;
+			continue;
+		}
+		if (!isDeclarationAfter(current, candidate, sawCurrent)) continue;
+		if (!candidate.property) return true;
+		if (laterDeclarationMayResetStylexProps(candidate.property, props)) return true;
+		for (const out of cssDeclarationToStylexDeclarations(candidate)) if (hasOverlappingStylexProp(props, out.prop)) return true;
+	}
+	return false;
+}
+function isDeclarationAfter(current, candidate, sawCurrent) {
+	if (current.sourceOrder !== void 0 && candidate.sourceOrder !== void 0) return candidate.sourceOrder > current.sourceOrder;
+	return sawCurrent;
+}
+function hasOverlappingStylexProp(props, candidate) {
+	for (const prop of props) if (stylexPropsOverlap(prop, candidate)) return true;
+	return false;
+}
+function laterDeclarationMayResetStylexProps(cssProperty, props) {
+	const property = cssProperty.trim();
+	if (property === "background") return hasStylexPropWithPrefix(props, "background");
+	if (!isBorderShorthandProperty(property)) return false;
+	const side = property.match(/^border-(top|right|bottom|left)$/)?.[1];
+	return hasBorderResetOverlap(props, side);
+}
+function hasStylexPropWithPrefix(props, prefix) {
+	for (const prop of props) if (prop.startsWith(prefix)) return true;
+	return false;
+}
+function hasBorderResetOverlap(props, side) {
+	const sidePrefix = side ? `border${side.charAt(0).toUpperCase()}${side.slice(1)}` : "border";
+	for (const prop of props) {
+		if (!/^border(?:Top|Right|Bottom|Left)?(?:Width|Style|Color)$/.test(prop)) continue;
+		if (!side || prop.startsWith(sidePrefix) || /^border(?:Width|Style|Color)$/.test(prop)) return true;
+	}
+	return false;
+}
 /**
 * If any variant `when` condition references the styled-components theme object,
 * mark the declaration as needing the `useTheme()` hook so the emitted wrapper
@@ -42783,7 +43889,7 @@ function findFirst(collection, predicate) {
 //#endregion
 //#region src/internal/lower-rules/process-rule-declarations.ts
 function processRuleDeclarations(args) {
-	const { ctx, rule, allRules, media, pseudos, pseudoElement, attrTarget, resolvedSelectorMedia, applyResolvedPropValue } = args;
+	const { ctx, rule, allRules, media, pseudos, pseudoElement, attrTarget, resolvedSelectorMedia, hasAncestorAttributeScope, applyResolvedPropValue } = args;
 	const { state } = ctx;
 	for (const d of rule.declarations) {
 		ctx.setCurrentDeclarationSourceOrder(d.sourceOrder);
@@ -42812,6 +43918,7 @@ function processRuleDeclarations(args) {
 				pseudoElement,
 				attrTarget,
 				resolvedSelectorMedia,
+				hasAncestorAttributeScope,
 				applyResolvedPropValue
 			});
 			if (state.bail) break;
@@ -42931,7 +44038,7 @@ function hasOtherBackgroundDeclaration(allRules, current) {
 //#endregion
 //#region src/internal/lower-rules/process-rules.ts
 function processDeclRules(ctx) {
-	const { state, decl, styleObj, perPropPseudo, perPropMedia, nestedSelectors, variantBuckets, styleFnDecls, attrBuckets, localVarValues, cssHelperPropValues, getComposedDefaultValue } = ctx;
+	const { state, decl, styleObj, perPropPseudo, perPropMedia, nestedSelectors, variantBuckets, extraStyleObjects, styleFnDecls, attrBuckets, localVarValues, cssHelperPropValues, getComposedDefaultValue } = ctx;
 	const { j, root, warnings, resolverImports, resolveSelector, parseExpr, cssHelperNames, declByLocalName, relationOverridePseudoBuckets, relationOverrides, ancestorSelectorParents, resolveThemeValue, resolveThemeValueFromFn, resolveImportInScope } = state;
 	const getConditionDefaultValue = (propName) => cssHelperPropValues.has(propName) ? getComposedDefaultValue(propName) : ctx.getWrappedComponentBaseDefaultValue(propName) ?? null;
 	/**
@@ -43605,6 +44712,39 @@ function processDeclRules(ctx) {
 				}
 			}
 		};
+		const clearEarlierThemeBaseValues = (prop, laterBaseValue, sourceCssProperty) => {
+			const hooks = decl.needsUseThemeHook;
+			if (!hooks?.length) return;
+			const propsToClear = sourceCssProperty === "background" ? ["backgroundColor", "backgroundImage"] : [prop];
+			const laterBaseIsImportant = cssValueIsImportant(laterBaseValue);
+			const clearHookStyleKey = (hook, side) => {
+				const styleKey = hook[side];
+				if (!styleKey) return false;
+				const bucket = extraStyleObjects.get(styleKey);
+				if (!bucket) return false;
+				let changed = false;
+				for (const propToClear of propsToClear) {
+					if (!Object.hasOwn(bucket, propToClear)) continue;
+					const bucketValue = bucket[propToClear];
+					if (!laterBaseIsImportant && cssValueIsImportant(bucketValue)) continue;
+					delete bucket[propToClear];
+					changed = true;
+				}
+				if (!changed) return false;
+				if (Object.keys(bucket).length === 0) {
+					extraStyleObjects.delete(styleKey);
+					hook[side] = null;
+				}
+				return true;
+			};
+			for (let i = hooks.length - 1; i >= 0; i--) {
+				const hook = hooks[i];
+				const hadStyleKeys = Boolean(hook.trueStyleKey || hook.falseStyleKey);
+				const clearedTrue = clearHookStyleKey(hook, "trueStyleKey");
+				const clearedFalse = clearHookStyleKey(hook, "falseStyleKey");
+				if ((clearedTrue || clearedFalse) && hadStyleKeys && !hook.trueStyleKey && !hook.falseStyleKey) hooks.splice(i, 1);
+			}
+		};
 		const applyResolvedPropValue = (prop, value, commentSource, sourceCssProperty) => {
 			const noteSourceCssProperty = (target) => {
 				if (sourceCssProperty) {
@@ -43820,6 +44960,7 @@ function processDeclRules(ctx) {
 				return;
 			}
 			clearEarlierVariantBaseValues(prop, value);
+			clearEarlierThemeBaseValues(prop, value, sourceCssProperty);
 			const target = ctx.getBaseStyleTarget();
 			setStyleObjectValue(target, prop, value);
 			noteSourceCssProperty(target);
@@ -43838,6 +44979,7 @@ function processDeclRules(ctx) {
 			pseudoElement: pseudoElement ?? (pseudoElementsList ? pseudoElementsList[0] ?? null : null),
 			attrTarget,
 			resolvedSelectorMedia,
+			hasAncestorAttributeScope: Boolean(ancestorAttrs?.length),
 			applyResolvedPropValue
 		});
 		if (state.bail) break;
@@ -44348,18 +45490,6 @@ function recoverStandaloneInterpolationsInPseudoBlock(rule, decl) {
 		cssProps
 	};
 }
-/**
-* Whether a lowered StyleX value carries `!important`. Values are stored either
-* as plain strings (e.g. `"red !important"`) or as AST string/template literals.
-*/
-function cssValueIsImportant(value) {
-	if (typeof value === "string") return value.includes("!important");
-	if (!value || typeof value !== "object") return false;
-	const node = value;
-	if ((node.type === "StringLiteral" || node.type === "Literal") && typeof node.value === "string") return node.value.includes("!important");
-	if (node.type === "TemplateLiteral" && Array.isArray(node.quasis)) return node.quasis.some((q) => (q?.value?.cooked ?? q?.value?.raw ?? "").includes("!important"));
-	return false;
-}
 /** Negates a `when` condition string (e.g. `$active` → `!$active`, `!$x` → `$x`). */
 function negateWhen(when) {
 	if (when.startsWith("!(") && when.endsWith(")")) return when.slice(2, -1);
@@ -44848,6 +45978,7 @@ function createLowerRulesState(ctx) {
 	const resolveValueDirectional = ctx.resolveValueDirectionalSafe;
 	const resolveCall = ctx.resolveCallSafe;
 	const resolveValueOptional = (rvCtx) => {
+		if (rvCtx.kind === "importedValue" && isStylexFileSource(rvCtx.source)) return resolveValue(rvCtx);
 		const res = ctx.adapter.resolveValue(rvCtx);
 		if (res && isDirectionalResult(res)) return;
 		return res;
@@ -44914,6 +46045,30 @@ function createLowerRulesState(ctx) {
 		}
 	};
 	const staticPropertyValues = /* @__PURE__ */ new Map();
+	const staticIdentifierValues = /* @__PURE__ */ new Map();
+	root.find(j.VariableDeclarator).forEach((p) => {
+		if (!isTopLevelConstDeclarator(p)) return;
+		const node = p.node;
+		if (node.id?.type !== "Identifier" || !node.id.name) return;
+		const staticValue = literalToStaticValue(node.init, { allowStaticArrowFunctions: false });
+		if (staticValue !== null) staticIdentifierValues.set(node.id.name, staticValue);
+	});
+	if (staticIdentifierValues.size > 0) {
+		const shadowingNames = /* @__PURE__ */ new Set();
+		root.find(j.Function).forEach((fnPath) => {
+			collectPatternBindingNames$2(fnPath.node.params, shadowingNames);
+			const fnId = fnPath.node.id;
+			if (fnId?.name) shadowingNames.add(fnId.name);
+		});
+		root.find(j.ClassDeclaration).forEach((classPath) => {
+			const classId = classPath.node.id;
+			if (classId?.name) shadowingNames.add(classId.name);
+		});
+		root.find(j.VariableDeclarator).forEach((declPath) => {
+			if (!isTopLevelConstDeclarator(declPath)) collectPatternBindingNames$2(declPath.node.id, shadowingNames);
+		});
+		for (const name of shadowingNames) staticIdentifierValues.delete(name);
+	}
 	root.find(j.ExpressionStatement, { expression: {
 		type: "AssignmentExpression",
 		operator: "=",
@@ -44927,7 +46082,7 @@ function createLowerRulesState(ctx) {
 		const ownerName = expr.left?.object?.name;
 		const propName = expr.left?.property?.name;
 		if (ownerName && propName) {
-			const staticValue = literalToStaticValue(expr.right);
+			const staticValue = literalToStaticValue(expr.right, { allowStaticArrowFunctions: false });
 			let ownerMap = staticPropertyValues.get(ownerName);
 			if (!ownerMap) {
 				ownerMap = /* @__PURE__ */ new Map();
@@ -45023,6 +46178,7 @@ function createLowerRulesState(ctx) {
 		cssHelperValuesByKey,
 		mixinValuesByKey,
 		staticPropertyValues,
+		staticIdentifierValues,
 		usedCssHelperFunctions: /* @__PURE__ */ new Set(),
 		warnPropInlineStyle,
 		applyCssHelperMixin,
@@ -45109,6 +46265,20 @@ function clonePropUsageByComponent(source) {
 	});
 	return cloned;
 }
+function isTopLevelConstDeclarator(path) {
+	const declarationPath = path.parentPath;
+	if (!declarationPath) return false;
+	const declaration = declarationPath?.node;
+	if (declaration?.type !== "VariableDeclaration" || declaration.kind !== "const") return false;
+	let current = declarationPath.parentPath;
+	while (current?.node) {
+		const type = current.node.type;
+		if (type === "Program") return true;
+		if (type !== "VariableDeclaration" && type !== "ExportNamedDeclaration") return false;
+		current = current.parentPath;
+	}
+	return false;
+}
 function collectOpeningPropUsage(attributes) {
 	const props = {};
 	let hasSpread = false;
@@ -45138,6 +46308,10 @@ function getJsxIdentifierName(node) {
 	const record = node;
 	return record.type === "JSXIdentifier" && typeof record.name === "string" ? record.name : null;
 }
+const STYLEX_FILE_RE = /\.stylex(\.\w+)?$/;
+function isStylexFileSource(source) {
+	return STYLEX_FILE_RE.test(source.value);
+}
 //#endregion
 //#region src/internal/transform-steps/lower-rules.ts
 /**
@@ -47850,6 +49024,43 @@ function upgradePolymorphicAsPropTypesStep(ctx) {
 	return CONTINUE;
 }
 //#endregion
+//#region src/internal/transform-steps/warn-partial-migration-incomplete.ts
+/**
+* Step: warn when partial migration leaves styled-components declarations behind.
+* Core concepts: partial migration diagnostics and converted declaration accounting.
+*/
+function warnPartialMigrationIncompleteStep(ctx) {
+	if (!shouldWarnForPartialMigration(ctx)) return CONTINUE;
+	const skippedDecls = collectSkippedStyledDeclarations(ctx.styledDecls);
+	const convertedDecls = collectConvertedStyleDeclarations(ctx.styledDecls);
+	if (skippedDecls.length === 0 || convertedDecls.length === 0) return CONTINUE;
+	ctx.warnings.push({
+		severity: "warning",
+		type: PARTIAL_MIGRATION_INCOMPLETE_WARNING,
+		loc: skippedDecls[0]?.loc,
+		context: {
+			skippedDeclarationCount: skippedDecls.length,
+			skippedDeclarations: declarationNames(skippedDecls),
+			convertedDeclarationCount: convertedDecls.length,
+			convertedDeclarations: declarationNames(convertedDecls)
+		}
+	});
+	return CONTINUE;
+}
+const MAX_PARTIAL_MIGRATION_WARNING_NAMES = 20;
+function shouldWarnForPartialMigration(ctx) {
+	return ctx.hasChanges && ctx.options.allowPartialMigration === true && ctx.options.transformMode !== "leavesOnly";
+}
+function collectSkippedStyledDeclarations(styledDecls) {
+	return styledDecls?.filter((decl) => decl.skipTransform && !decl.isCssHelper && !decl.isDirectJsxResolution) ?? [];
+}
+function collectConvertedStyleDeclarations(styledDecls) {
+	return styledDecls?.filter((decl) => !decl.skipTransform && !decl.isCssHelper) ?? [];
+}
+function declarationNames(decls) {
+	return decls.slice(0, MAX_PARTIAL_MIGRATION_WARNING_NAMES).map((decl) => decl.localName);
+}
+//#endregion
 //#region src/transform.ts
 /**
 * Transform styled-components to StyleX
@@ -47859,8 +49070,9 @@ function upgradePolymorphicAsPropTypesStep(ctx) {
 */
 function transform(file, api, options) {
 	try {
-		const result = transformWithWarnings(file, api, options);
-		Logger.logWarnings(result.warnings, file.path);
+		const transformOptions = options;
+		const result = transformWithWarnings(file, api, transformOptions);
+		Logger.logWarnings(result.warnings, file.path, { silent: transformOptions.silent === true });
 		if (result.sidecarFiles && result.sidecarFiles.length > 0) {
 			const sidecarFilesMap = options.sidecarFiles;
 			if (sidecarFilesMap) {
@@ -47908,6 +49120,7 @@ function transformWithWarnings(file, api, options) {
 		extractCssHelpersStep,
 		detectStringMappingFnsStep,
 		collectStyledDeclsStep,
+		inlinePropConditionalCssHelpersStep,
 		resolveBaseComponentsStep,
 		applyLeavesOnlyPolicyStep,
 		markPartialImportedRootsStep,
@@ -47930,7 +49143,8 @@ function transformWithWarnings(file, api, options) {
 		reinsertStaticPropsStep,
 		postProcessStep,
 		cleanupCssImportStep,
-		ensureReactImportStep
+		ensureReactImportStep,
+		warnPartialMigrationIncompleteStep
 	];
 	for (const step of pipeline) {
 		const outcome = step(ctx);