styled-components-to-stylex-codemod 0.0.52 → 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 isBackgroundImageValue, c as isSingleBackgroundComponent, d as kebabToCamelCase, f as looksLikeLength, h as sanitizeIdentifier, i as getCommentBody, l as isStyleSectionMarkerComment, m as normalizeWhitespace, n as capitalize$1, o as isJSDocBlockComment, p as lowerFirst, r as escapeRegex, s as isPrettierIgnoreComment, t as camelToKebabCase, u as isValidIdentifierName } from "./string-utils-BYTEHwNg.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";
@@ -351,24 +351,33 @@ const UNSUPPORTED_STYLEX_CSS_PROPS = new Set([
 	"all",
 	"scroll-margin-block",
 	"scroll-margin-block-start",
-	"scroll-margin-block-end",
-	"scroll-margin-inline",
-	"scroll-margin-inline-start",
-	"scroll-margin-inline-end",
-	"scroll-padding-block",
-	"scroll-padding-block-start",
-	"scroll-padding-block-end",
-	"scroll-padding-inline",
-	"scroll-padding-inline-start",
-	"scroll-padding-inline-end"
+	"scroll-margin-block-end"
 ]);
 /**
+* Logical scroll shorthands that expand to Start/End longhands. StyleX's
+* valid-styles rule accepts only the longhand forms.
+*/
+const LOGICAL_SCROLL_AXIS_SHORTHANDS = {
+	"scroll-margin-inline": "scrollMarginInline",
+	"scroll-padding-block": "scrollPaddingBlock",
+	"scroll-padding-inline": "scrollPaddingInline"
+};
+/**
 * Returns true if the CSS property is a shorthand that StyleX cannot express directly
 * and requires expansion (e.g., `padding`, `margin`, `border`, `background`).
 */
 function isCssShorthandProperty(cssProp) {
 	return cssProp in DIRECTIONAL_SHORTHAND_MAP || cssProp === "border" || /^border-(top|right|bottom|left)$/.test(cssProp) || cssProp === "background";
 }
+/**
+* True for the logical scroll axis shorthands (`scroll-margin-inline`,
+* `scroll-padding-block`, `scroll-padding-inline`). StyleX accepts only their
+* Start/End longhands, so a static value is expanded; a dynamic value cannot be
+* split losslessly and must bail.
+*/
+function isLogicalScrollAxisShorthand(cssProp) {
+	return cssProp.trim() in LOGICAL_SCROLL_AXIS_SHORTHANDS;
+}
 function isUnsupportedStylexProperty(cssProp) {
 	return UNSUPPORTED_STYLEX_CSS_PROPS.has(cssProp.trim());
 }
@@ -394,6 +403,111 @@ function resolveBackgroundStylexPropForVariants(values) {
 	if (hasGradient && hasColor) return null;
 	return hasGradient ? "backgroundImage" : "backgroundColor";
 }
+/**
+* Expands a static multi-component `background` shorthand (single layer) into
+* the full set of StyleX background longhands, e.g.
+* `#fff url(a.svg) no-repeat center / cover`. Components omitted from the
+* shorthand are emitted at their CSS initial value (e.g. `backgroundColor:
+* transparent`), reproducing the shorthand's reset semantics so the expansion
+* fully overrides any background longhand inherited from a merged/extended base.
+*
+* Returns null when the value cannot be expanded losslessly: multiple layers
+* (top-level commas), unrecognized tokens, duplicate components, or fewer than
+* two explicit components (single components keep the single-longhand path).
+*/
+function expandBackgroundShorthandComponents(rawValue) {
+	const value = rawValue.trim();
+	if (!value || hasTopLevelMatch(value, /,/)) return null;
+	const tokens = tokenizeBackgroundValue(value);
+	if (!tokens) return null;
+	let color;
+	let image;
+	let attachment;
+	const repeatTokens = [];
+	const positionTokens = [];
+	const sizeTokens = [];
+	const boxTokens = [];
+	let inSizeMode = false;
+	for (const token of tokens) {
+		if (token === "/") {
+			if (inSizeMode || positionTokens.length === 0) return null;
+			inSizeMode = true;
+			continue;
+		}
+		if (inSizeMode) {
+			if (sizeTokens.length >= 2 || !isBackgroundSizeToken(token)) return null;
+			sizeTokens.push(token);
+			continue;
+		}
+		if (token === "none" || isBackgroundImageValue(token)) {
+			if (image !== void 0) return null;
+			image = token;
+			continue;
+		}
+		if (isCssColorToken(token)) {
+			if (color !== void 0) return null;
+			color = token;
+			continue;
+		}
+		if (BACKGROUND_REPEAT_KEYWORDS.has(token)) {
+			if (repeatTokens.length >= 2) return null;
+			repeatTokens.push(token);
+			continue;
+		}
+		if (BACKGROUND_ATTACHMENT_KEYWORDS.has(token)) {
+			if (attachment !== void 0) return null;
+			attachment = token;
+			continue;
+		}
+		if (BACKGROUND_BOX_KEYWORDS.has(token)) {
+			if (boxTokens.length >= 2) return null;
+			boxTokens.push(token);
+			continue;
+		}
+		if (isBackgroundPositionToken(token)) {
+			if (positionTokens.length >= 2) return null;
+			positionTokens.push(token);
+			continue;
+		}
+		return null;
+	}
+	if (inSizeMode && sizeTokens.length === 0) return null;
+	if ((color !== void 0 ? 1 : 0) + (image !== void 0 ? 1 : 0) + (attachment !== void 0 ? 1 : 0) + (repeatTokens.length ? 1 : 0) + (positionTokens.length ? 1 : 0) + (sizeTokens.length ? 1 : 0) + (boxTokens.length ? 1 : 0) < 2) return null;
+	return [
+		{
+			prop: "backgroundColor",
+			value: color ?? "transparent"
+		},
+		{
+			prop: "backgroundImage",
+			value: image ?? "none"
+		},
+		{
+			prop: "backgroundRepeat",
+			value: repeatTokens.length ? repeatTokens.join(" ") : "repeat"
+		},
+		{
+			prop: "backgroundAttachment",
+			value: attachment ?? "scroll"
+		},
+		{
+			prop: "backgroundPosition",
+			value: positionTokens.length ? positionTokens.join(" ") : "0% 0%"
+		},
+		{
+			prop: "backgroundSize",
+			value: sizeTokens.length ? sizeTokens.join(" ") : "auto"
+		},
+		{
+			prop: "backgroundOrigin",
+			value: boxTokens[0] ?? "padding-box"
+		},
+		{
+			prop: "backgroundClip",
+			value: boxTokens[1] ?? boxTokens[0] ?? "border-box"
+		}
+	];
+}
 function parseInterpolatedBorderStaticParts(args) {
 	const { prop, prefix, suffix } = args;
 	const borderMatch = prop.match(/^border(-top|-right|-bottom|-left)?$/);
@@ -464,6 +578,28 @@ function cssDeclarationToStylexDeclarations(decl) {
 			}
 		}));
 	}
+	const logicalScrollAxis = LOGICAL_SCROLL_AXIS_SHORTHANDS[prop];
+	if (logicalScrollAxis && decl.value.kind === "static") {
+		const values = splitCssValueWhitespace(decl.valueRaw.trim());
+		if (values.length >= 1 && values.length <= 2) {
+			const start = values[0];
+			const end = values[1] ?? start;
+			const withImportant = (value) => decl.important ? `${value} !important` : value;
+			return [{
+				prop: `${logicalScrollAxis}Start`,
+				value: {
+					kind: "static",
+					value: withImportant(start)
+				}
+			}, {
+				prop: `${logicalScrollAxis}End`,
+				value: {
+					kind: "static",
+					value: withImportant(end)
+				}
+			}];
+		}
+	}
 	if (prop === "background") {
 		const rawVal = (decl.valueRaw ?? "").trim();
 		if (rawVal === "none") return [{
@@ -482,6 +618,22 @@ function cssDeclarationToStylexDeclarations(decl) {
 		}];
 	}
 	if (prop === "display" && decl.value.kind === "static" && decl.valueRaw.trim() === "wrap") return [];
+	if (prop === "overflow" && decl.value.kind === "static") {
+		const tokens = decl.valueRaw.trim().split(/\s+/);
+		if (tokens.length === 2) return [{
+			prop: "overflowX",
+			value: {
+				kind: "static",
+				value: tokens[0]
+			}
+		}, {
+			prop: "overflowY",
+			value: {
+				kind: "static",
+				value: tokens[1]
+			}
+		}];
+	}
 	if (prop === "animation" && decl.value.kind === "static" && decl.valueRaw.trim() === "none") return [{
 		prop: "animationName",
 		value: decl.value
@@ -729,6 +881,87 @@ function classifyBorderTokens(tokens) {
 		color
 	};
 }
+const BACKGROUND_REPEAT_KEYWORDS = new Set([
+	"repeat",
+	"repeat-x",
+	"repeat-y",
+	"no-repeat",
+	"space",
+	"round"
+]);
+const BACKGROUND_ATTACHMENT_KEYWORDS = new Set([
+	"scroll",
+	"fixed",
+	"local"
+]);
+const BACKGROUND_BOX_KEYWORDS = new Set([
+	"border-box",
+	"padding-box",
+	"content-box"
+]);
+const BACKGROUND_POSITION_KEYWORDS = new Set([
+	"left",
+	"right",
+	"top",
+	"bottom",
+	"center"
+]);
+const CSS_COLOR_FUNCTION_RE = /^(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color)\(/i;
+const CSS_NAMED_COLORS = new Set("aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen transparent currentcolor".split(" "));
+function isCssColorToken(token) {
+	if (token.startsWith("#")) return /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(token);
+	if (CSS_COLOR_FUNCTION_RE.test(token)) return true;
+	return CSS_NAMED_COLORS.has(token.toLowerCase());
+}
+function isBackgroundPositionToken(token) {
+	return BACKGROUND_POSITION_KEYWORDS.has(token.toLowerCase()) || /^-?\d*\.?\d+(?:[a-z%]*)$/i.test(token) || /^calc\(/i.test(token);
+}
+function isBackgroundSizeToken(token) {
+	const lower = token.toLowerCase();
+	return lower === "cover" || lower === "contain" || lower === "auto" || /^-?\d*\.?\d+(?:[a-z%]*)$/i.test(token) || /^calc\(/i.test(token);
+}
+/**
+* Splits a background shorthand value into top-level tokens, keeping function
+* calls intact and emitting `/` (position/size separator) as its own token.
+* Returns null for values containing placeholders or unbalanced parens.
+*/
+function tokenizeBackgroundValue(value) {
+	if (value.includes("__SC_EXPR_")) return null;
+	const tokens = [];
+	let current = "";
+	let depth = 0;
+	const flush = () => {
+		if (current) {
+			tokens.push(current);
+			current = "";
+		}
+	};
+	for (const c of value) {
+		if (c === "(") {
+			depth++;
+			current += c;
+			continue;
+		}
+		if (c === ")") {
+			depth = Math.max(0, depth - 1);
+			current += c;
+			continue;
+		}
+		if (depth === 0 && /\s/.test(c)) {
+			flush();
+			continue;
+		}
+		if (depth === 0 && c === "/") {
+			flush();
+			tokens.push("/");
+			continue;
+		}
+		current += c;
+	}
+	if (depth !== 0) return null;
+	flush();
+	return tokens.length ? tokens : null;
+}
 //#endregion
 //#region src/internal/transform-parse-expr.ts
 function parseExpr(api, exprSource) {
@@ -761,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;
@@ -779,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;
@@ -788,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)
 		};
@@ -802,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) {
@@ -1334,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") {
@@ -1348,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.
 */
@@ -1741,6 +2004,11 @@ function toSuffixFromProp(propName) {
 			return suffixes.join("");
 		}
 	}
+	const defaultTruthyMatch = trimmed.match(/^(.+?) === undefined \|\| (.+)$/);
+	if (defaultTruthyMatch) {
+		const lhs = defaultTruthyMatch[1].replace(/^\$/, "");
+		if (lhs === defaultTruthyMatch[2].replace(/^\$/, "")) return toSuffixFromProp(lhs);
+	}
 	if (trimmed.includes(" || ")) {
 		const parts = trimmed.split(" || ").map((s) => s.trim()).filter(Boolean);
 		if (parts.length) {
@@ -3498,7 +3766,7 @@ function specifierExportedName(spec) {
 * - Disjunction: `"a || b"` → `a || b`
 * - Grouped negation: `"!(a || b)"` → `!(a || b)`
 */
-function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
+function parseVariantWhenToAst(j, when, booleanProps, knownProps, nonPropRoots) {
 	const buildMemberExpr = (raw) => {
 		if (!raw.includes(".")) return null;
 		const parts = raw.split(".").map((part) => part.trim()).filter(Boolean);
@@ -3533,7 +3801,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 			}
 			const memberExpr = buildMemberExpr(trimmedRaw);
 			if (memberExpr) return {
-				propName: root && root !== "theme" && isConditionPropIdentifier(root) ? root : null,
+				propName: root && root !== "theme" && !nonPropRoots?.has(root) && isConditionPropIdentifier(root) ? root : null,
 				expr: memberExpr
 			};
 			return {
@@ -3542,7 +3810,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 			};
 		}
 		return {
-			propName: trimmedRaw === "theme" || !isConditionPropIdentifier(trimmedRaw) ? null : trimmedRaw,
+			propName: trimmedRaw === "theme" || nonPropRoots?.has(trimmedRaw) || !isConditionPropIdentifier(trimmedRaw) ? null : trimmedRaw,
 			expr: j.identifier(trimmedRaw)
 		};
 	};
@@ -3553,7 +3821,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 		isBoolean: true
 	};
 	if (trimmed.startsWith("!(") && trimmed.endsWith(")")) {
-		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(2, -1).trim(), booleanProps, knownProps);
+		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(2, -1).trim(), booleanProps, knownProps, nonPropRoots);
 		return {
 			cond: j.unaryExpression("!", innerParsed.cond),
 			props: innerParsed.props,
@@ -3561,7 +3829,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 		};
 	}
 	if (trimmed.includes("&&")) {
-		const parsed = trimmed.split("&&").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps, knownProps));
+		const parsed = trimmed.split("&&").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps, knownProps, nonPropRoots));
 		const firstParsed = parsed[0];
 		if (!firstParsed) return {
 			cond: j.identifier("true"),
@@ -3575,7 +3843,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 		};
 	}
 	if (trimmed.includes(" || ")) {
-		const parsed = trimmed.split(" || ").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps, knownProps));
+		const parsed = trimmed.split(" || ").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps, knownProps, nonPropRoots));
 		const firstParsedOr = parsed[0];
 		if (!firstParsedOr) return {
 			cond: j.identifier("true"),
@@ -3589,7 +3857,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 		};
 	}
 	if (trimmed.startsWith("!")) {
-		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(1).trim(), booleanProps, knownProps);
+		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(1).trim(), booleanProps, knownProps, nonPropRoots);
 		return {
 			cond: j.unaryExpression("!", innerParsed.cond),
 			props: innerParsed.props,
@@ -3718,8 +3986,8 @@ function isConditionPropIdentifier(name, knownProps) {
 * function's parameter destructuring.
 */
 function collectConditionProps(j, args) {
-	const { when, destructureProps, booleanProps, knownProps } = args;
-	const parsed = parseVariantWhenToAst(j, when, booleanProps, knownProps);
+	const { when, destructureProps, booleanProps, knownProps, nonPropRoots } = args;
+	const parsed = parseVariantWhenToAst(j, when, booleanProps, knownProps, nonPropRoots);
 	if (destructureProps) {
 		for (const p of parsed.props) if (p && !destructureProps.includes(p)) destructureProps.push(p);
 	}
@@ -4052,6 +4320,7 @@ function buildResolvedHandlerResult(result, cssProperty, payload) {
 		type: "resolvedValue",
 		expr: result.expr,
 		imports: result.imports,
+		cssValueText: result.expr,
 		...payload
 	} : {
 		type: "resolvedStyles",
@@ -4627,6 +4896,19 @@ function getPropertyNameFromKey(key) {
 * Core concepts: deep merge semantics, AST node detection, and media query resolution.
 */
 /**
+* Marks an emitted AST value node as proven to be a single CSS token (e.g. a
+* numeric stylex const that had a unit suffix). Shorthand properties holding
+* such values cannot expand to multiple tokens, so the opaque-shorthand
+* warning does not apply to them.
+*/
+function markProvenSingleTokenValue(node) {
+	if (node && typeof node === "object") provenSingleTokenValues.add(node);
+}
+function isProvenSingleTokenValue(node) {
+	return !!node && typeof node === "object" && provenSingleTokenValues.has(node);
+}
+const provenSingleTokenValues = /* @__PURE__ */ new WeakSet();
+/**
 * Tries to resolve a CallExpression via the adapter's `resolveCall`.
 * Shared by both css-helper and process-rules slot resolution.
 *
@@ -5284,6 +5566,10 @@ function staticStringValue(value) {
 function invertWhen(when) {
 	if (when.startsWith("!(") && when.endsWith(")")) return when.slice(2, -1);
 	if (when.startsWith("!")) return when.slice(1);
+	if (when.includes(" || ") || when.includes(" && ")) {
+		if (when.includes(" || ") && when.includes(" && ")) return null;
+		return `!(${when})`;
+	}
 	const match = when.match(/^(.+)\s+(===|!==)\s+(.+)$/);
 	if (match) {
 		const [, propName, op, rhs] = match;
@@ -5336,31 +5622,46 @@ const createPropTestHelpers = (bindings) => {
 		}
 		return null;
 	};
+	const applyDefaultToTruthyWhen = (whenName, propName) => {
+		if (bindings.kind !== "destructured" || !bindings.defaults?.has(propName)) return whenName;
+		if (whenName !== propName) return null;
+		const defaultValue = literalToStaticValue(bindings.defaults.get(propName));
+		if (defaultValue === null) return null;
+		return defaultValue ? `${whenName} === undefined || ${whenName}` : whenName;
+	};
 	const parseTestInfo = (test) => {
 		if (!test || typeof test !== "object") return null;
 		if (test.type === "Identifier" && bindings.kind === "destructured") {
 			const propAccess = readPropAccess(test);
-			return propAccess ? {
-				when: propAccess.whenName,
+			if (!propAccess) return null;
+			const when = applyDefaultToTruthyWhen(propAccess.whenName, propAccess.propName);
+			return when === null ? null : {
+				when,
 				propName: propAccess.propName
-			} : null;
+			};
 		}
 		if (isMemberExpression(test)) {
 			const propAccess = readPropAccess(test);
-			return propAccess ? {
-				when: propAccess.whenName,
+			if (!propAccess) return null;
+			const when = applyDefaultToTruthyWhen(propAccess.whenName, propAccess.propName);
+			return when === null ? null : {
+				when,
 				propName: propAccess.propName
-			} : null;
+			};
 		}
 		if (test.type === "UnaryExpression" && test.operator === "!" && test.argument) {
 			const propAccess = readPropAccess(test.argument);
-			return propAccess ? {
-				when: `!${propAccess.whenName}`,
+			if (!propAccess) return null;
+			const truthyWhen = applyDefaultToTruthyWhen(propAccess.whenName, propAccess.propName);
+			if (truthyWhen === null) return null;
+			return {
+				when: truthyWhen === propAccess.whenName ? `!${truthyWhen}` : `!(${truthyWhen})`,
 				propName: propAccess.propName
-			} : null;
+			};
 		}
 		if (test.type === "BinaryExpression" && (test.operator === "===" || test.operator === "!==")) {
 			const left = test.left;
+			const operator = test.operator;
 			const getRhsValue = () => {
 				const rhsTyped = test.right;
 				if (rhsTyped.type === "Identifier" && rhsTyped.name === "undefined") return "undefined";
@@ -5368,12 +5669,28 @@ const createPropTestHelpers = (bindings) => {
 				if (rhs === null) return getMemberExpressionSource(test.right);
 				return JSON.stringify(rhs);
 			};
+			const buildBinaryWhen = (propAccess, rhsValue) => {
+				const base = `${propAccess.whenName} ${operator} ${rhsValue}`;
+				if (bindings.kind !== "destructured" || !bindings.defaults?.has(propAccess.propName)) return base;
+				if (propAccess.whenName !== propAccess.propName || rhsValue === "undefined") return null;
+				const defaultValue = literalToStaticValue(bindings.defaults.get(propAccess.propName));
+				if (defaultValue === null) return null;
+				let rhsStatic;
+				try {
+					rhsStatic = JSON.parse(rhsValue);
+				} catch {
+					return null;
+				}
+				if (defaultValue !== rhsStatic) return base;
+				return operator === "===" ? `${propAccess.whenName} === undefined || ${base}` : `${propAccess.whenName} !== undefined && ${base}`;
+			};
 			if (bindings.kind === "destructured" && left.type === "Identifier") {
 				const propAccess = readPropAccess(left);
 				const rhsValue = getRhsValue();
 				if (!propAccess || rhsValue === null) return null;
-				return {
-					when: `${propAccess.whenName} ${test.operator} ${rhsValue}`,
+				const when = buildBinaryWhen(propAccess, rhsValue);
+				return when === null ? null : {
+					when,
 					propName: propAccess.propName
 				};
 			}
@@ -5381,8 +5698,9 @@ const createPropTestHelpers = (bindings) => {
 				const propAccess = readPropAccess(left);
 				const rhsValue = getRhsValue();
 				if (!propAccess || rhsValue === null) return null;
-				return {
-					when: `${propAccess.whenName} ${test.operator} ${rhsValue}`,
+				const when = buildBinaryWhen(propAccess, rhsValue);
+				return when === null ? null : {
+					when,
 					propName: propAccess.propName
 				};
 			}
@@ -8513,10 +8831,10 @@ function collectDeclPropNames(root, j, decl, filter) {
 	const addIfMatch = (name) => {
 		if (filter(name)) result.add(name);
 	};
-	for (const when of Object.keys(decl.variantStyleKeys ?? {})) for (const p of parseVariantWhenToAst(j, when).props) addIfMatch(p);
+	for (const when of Object.keys(decl.variantStyleKeys ?? {})) for (const p of parseVariantWhenToAst(j, when, void 0, void 0, decl.nonPropConditionRoots).props) addIfMatch(p);
 	for (const sf of decl.styleFnFromProps ?? []) {
 		addIfMatch(sf.jsxProp);
-		if (sf.conditionWhen) for (const p of parseVariantWhenToAst(j, sf.conditionWhen).props) addIfMatch(p);
+		if (sf.conditionWhen) for (const p of parseVariantWhenToAst(j, sf.conditionWhen, void 0, void 0, decl.nonPropConditionRoots).props) addIfMatch(p);
 	}
 	for (const isp of decl.inlineStyleProps ?? []) addIfMatch(isp.jsxProp ?? isp.prop);
 	for (const cv of decl.compoundVariants ?? []) if (cv.kind === "3branch" || cv.kind === "4branch") {
@@ -12070,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") {
@@ -13034,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;
@@ -14521,10 +14835,13 @@ function tryHandleAnimation(args) {
 		for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {
 			const tokens = segments[segmentIndex];
 			if (!tokens.length) return false;
-			const m = tokens.shift().match(/^__SC_EXPR_(\d+)__$/);
-			if (!m) return false;
+			const nameIdx = tokens.findIndex((t) => {
+				const slotMatch = t.match(/^__SC_EXPR_(\d+)__$/);
+				return slotMatch ? getKeyframeFromSlot(Number(slotMatch[1])) !== null : false;
+			});
+			if (nameIdx === -1) return false;
+			const m = tokens.splice(nameIdx, 1)[0].match(/^__SC_EXPR_(\d+)__$/);
 			const kf = getKeyframeFromSlot(Number(m[1]));
-			if (!kf) return false;
 			animNames.push({
 				kind: "ident",
 				name: kf
@@ -17815,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.
@@ -18140,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)]))]);
@@ -19966,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")));
@@ -19978,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
 */
@@ -20459,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.
@@ -20653,7 +21025,8 @@ function buildVariantStyleExprs(opts) {
 					when: positiveWhen,
 					destructureProps,
 					booleanProps,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				if (onNewDestructureProp && prevLengthRef && destructureProps) for (let i = prevLengthRef.value; i < destructureProps.length; i++) onNewDestructureProp(destructureProps[i]);
 				const isCurrentPositive = areEquivalentWhen(when, positiveWhen);
@@ -20668,7 +21041,8 @@ function buildVariantStyleExprs(opts) {
 				when,
 				destructureProps,
 				booleanProps,
-				...knownProps ? { knownProps } : {}
+				...knownProps ? { knownProps } : {},
+				nonPropRoots: d.nonPropConditionRoots
 			});
 			if (onNewDestructureProp && prevLengthRef && destructureProps) for (let i = prevLengthRef.value; i < destructureProps.length; i++) onNewDestructureProp(destructureProps[i]);
 			const styleExpr = styleRef(j, stylesIdentifier, variantKey);
@@ -20684,7 +21058,8 @@ function buildVariantStyleExprs(opts) {
 			when,
 			destructureProps,
 			booleanProps,
-			...knownProps ? { knownProps } : {}
+			...knownProps ? { knownProps } : {},
+			nonPropRoots: d.nonPropConditionRoots
 		});
 		const styleExpr = styleRef(j, stylesIdentifier, variantKey);
 		pushExpr(emitter.makeConditionalStyleExpr({
@@ -20698,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) {
@@ -20706,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;
 }
@@ -20791,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,
@@ -20834,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) {
@@ -22725,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);
@@ -24437,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,
@@ -24447,6 +24829,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			propDefaults,
 			compoundVariantKeys: collectCompoundVariantKeys(d.compoundVariants),
 			afterVariantStyleArgs,
+			markNeedsUseThemeImport: () => ctx.markNeedsUseThemeImport(),
 			buildCompoundVariantExpressions
 		});
 		const isVoidTag = VOID_TAGS.has(tagName);
@@ -24470,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({
@@ -24484,7 +24868,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 				...allowStyleProp ? [ctx.patternProp("style", styleId)] : [],
 				...allowSxProp ? [ctx.patternProp("sx", sxId)] : []
 			],
-			destructureProps,
+			destructureProps: destructurePropsForPattern,
 			propDefaults,
 			includeRest: true,
 			restId
@@ -24504,7 +24888,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			allowClassNameProp,
 			allowStyleProp,
 			allowSxProp,
-			inlineStyleProps: [],
+			inlineStyleProps: d.inlineStyleProps ?? [],
 			staticStyleExpr: attrsInfoWithoutForwardedAsStatic?.attrsStaticStyleExpr,
 			staticClassNameExpr,
 			isIntrinsicElement: false
@@ -24529,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;
@@ -24569,7 +24954,8 @@ function emitShouldForwardPropWrappers(ctx) {
 		for (const when of Object.keys(d.variantStyleKeys ?? {})) {
 			const { props } = emitter.collectConditionProps({
 				when,
-				...knownConditionProps ? { knownProps: knownConditionProps } : {}
+				...knownConditionProps ? { knownProps: knownConditionProps } : {},
+				nonPropRoots: d.nonPropConditionRoots
 			});
 			for (const p of props) if (p) extraProps.add(p);
 		}
@@ -24691,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,
@@ -24715,7 +25101,8 @@ function emitShouldForwardPropWrappers(ctx) {
 			if (compoundVariantKeys.has(when)) continue;
 			const { props } = emitter.collectConditionProps({
 				when,
-				...knownProps ? { knownProps } : {}
+				...knownProps ? { knownProps } : {},
+				nonPropRoots: d.nonPropConditionRoots
 			});
 			for (const p of props) if (p && !dropProps.includes(p)) dropProps.push(p);
 		}
@@ -24726,7 +25113,8 @@ function emitShouldForwardPropWrappers(ctx) {
 			for (const extra of d.extraStylexPropsArgs) if (extra.when) {
 				const { props } = emitter.collectConditionProps({
 					when: extra.when,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				for (const p of props) if (p && !destructureParts.includes(p)) destructureParts.push(p);
 			}
@@ -24760,7 +25148,8 @@ function emitShouldForwardPropWrappers(ctx) {
 					when: p.conditionWhen,
 					destructureProps: destructureParts,
 					booleanProps,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				expr = emitter.makeConditionalStyleExpr({
 					cond,
@@ -25059,7 +25448,8 @@ function emitSimpleWithConfigWrappers(ctx) {
 			if (d.variantStyleKeys) for (const [when] of Object.entries(d.variantStyleKeys)) {
 				const { props } = emitter.collectConditionProps({
 					when,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				for (const p of props) if (p) variantProps.add(p);
 			}
@@ -25073,7 +25463,8 @@ function emitSimpleWithConfigWrappers(ctx) {
 				if (!extra.when) continue;
 				const { props } = emitter.collectConditionProps({
 					when: extra.when,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				for (const p of props) if (p) extraProps.add(p);
 			}
@@ -25389,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,
@@ -25401,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);
@@ -25668,7 +26059,7 @@ function collectPropsUsedOutsideExtraStyleConditionals(j, d, knownProps) {
 		if (name) used.add(name);
 	};
 	for (const [when] of Object.entries(d.variantStyleKeys ?? {})) {
-		const parsed = parseVariantWhenToAst(j, when, void 0, knownProps);
+		const parsed = parseVariantWhenToAst(j, when, void 0, knownProps, d.nonPropConditionRoots);
 		for (const prop of parsed.props) add(prop);
 	}
 	for (const dim of d.variantDimensions ?? []) {
@@ -26348,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
@@ -26772,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) => {
@@ -26820,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) => {
@@ -26921,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,
@@ -26954,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,
@@ -26971,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,
@@ -26981,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
@@ -26988,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,
@@ -27013,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,
@@ -27031,7 +27895,8 @@ function tryResolveConditionalValue(node, ctx) {
 				if (res) return {
 					usage: expectedUsage,
 					expr: res.expr,
-					imports: res.imports
+					imports: res.imports,
+					cssValueText: res.expr
 				};
 			}
 		}
@@ -27040,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;
@@ -27268,43 +28233,47 @@ function tryResolveConditionalValue(node, ctx) {
 	}
 	if (info?.kind === "themeBinding" && test.type === "Identifier" && typeof test.name === "string" && isDestructuredFromParam(expr, test.name)) {
 		const destructuredProp = test.name;
-		const cons = getBranch(consequent);
-		const alt = getBranch(alternate);
-		if (cons && alt) {
-			if (new Set([cons.usage, alt.usage]).size === 1) {
-				const usage = cons.usage;
-				const variants = [{
-					nameHint: "truthy",
-					when: destructuredProp,
-					expr: cons.expr,
-					imports: cons.imports
-				}, {
-					nameHint: "falsy",
-					when: `!${destructuredProp}`,
-					expr: alt.expr,
-					imports: alt.imports
-				}];
-				return usage === "props" ? {
-					type: "splitVariantsResolvedStyles",
-					variants
-				} : {
-					type: "splitVariantsResolvedValue",
-					variants
-				};
+		const whens = destructuredBooleanWhens(destructuredProp, getArrowFnParamBindings(expr));
+		if (whens) {
+			const cons = getBranch(consequent);
+			const alt = getBranch(alternate);
+			if (cons && alt) {
+				if (new Set([cons.usage, alt.usage]).size === 1) {
+					const usage = cons.usage;
+					const variants = [{
+						nameHint: "truthy",
+						when: whens.truthy,
+						expr: cons.expr,
+						imports: cons.imports
+					}, {
+						nameHint: "falsy",
+						when: whens.falsy,
+						expr: alt.expr,
+						imports: alt.imports
+					}];
+					return usage === "props" ? {
+						type: "splitVariantsResolvedStyles",
+						variants
+					} : {
+						type: "splitVariantsResolvedValue",
+						variants
+					};
+				}
 			}
+			const oneSided = buildOneSidedVariantResult({
+				cons,
+				alt,
+				alternate,
+				truthyWhen: whens.truthy
+			});
+			if (oneSided) return oneSided;
+			if (!cons || !alt) return buildRuntimeCallResult();
 		}
-		const oneSided = buildOneSidedVariantResult({
-			cons,
-			alt,
-			alternate,
-			truthyWhen: destructuredProp
-		});
-		if (oneSided) return oneSided;
-		if (!cons || !alt) return buildRuntimeCallResult();
 	}
 	if (paramBindings?.kind === "destructured" && test.type === "Identifier" && typeof test.name === "string") {
 		const resolvedProp = resolveIdentifierToPropName(test, paramBindings);
-		if (resolvedProp) {
+		const resolvedWhens = resolvedProp ? destructuredBooleanWhens(resolvedProp, paramBindings) : null;
+		if (resolvedProp && resolvedWhens) {
 			const cons = getBranch(consequent);
 			const alt = getBranch(alternate);
 			if (cons && alt) {
@@ -27312,12 +28281,12 @@ function tryResolveConditionalValue(node, ctx) {
 					const usage = cons.usage;
 					const variants = [{
 						nameHint: "truthy",
-						when: resolvedProp,
+						when: resolvedWhens.truthy,
 						expr: cons.expr,
 						imports: cons.imports
 					}, {
 						nameHint: "falsy",
-						when: `!${resolvedProp}`,
+						when: resolvedWhens.falsy,
 						expr: alt.expr,
 						imports: alt.imports
 					}];
@@ -27342,7 +28311,7 @@ function tryResolveConditionalValue(node, ctx) {
 				cons,
 				alt,
 				alternate,
-				truthyWhen: resolvedProp
+				truthyWhen: resolvedWhens.truthy
 			});
 			if (oneSided) return oneSided;
 			if (!cons || !alt) return buildRuntimeCallResult();
@@ -27419,6 +28388,8 @@ function tryResolveConditionalCssBlock(node, ctx) {
 	const { left, right } = body;
 	const testProp = paramName ? getSinglePropFromMemberExpr(left, paramName) : bindings?.kind === "destructured" ? resolveIdentifierToPropName(left, bindings) : null;
 	if (!testProp) return null;
+	const whens = destructuredBooleanWhens(testProp, bindings);
+	if (!whens) return null;
 	const cssText = literalToString(right);
 	if (cssText !== null && cssText !== void 0) {
 		const style = parseCssDeclarationBlock(cssText);
@@ -27427,7 +28398,7 @@ function tryResolveConditionalCssBlock(node, ctx) {
 			type: "splitVariants",
 			variants: [{
 				nameHint: "truthy",
-				when: testProp,
+				when: whens.truthy,
 				style
 			}]
 		};
@@ -27435,7 +28406,7 @@ function tryResolveConditionalCssBlock(node, ctx) {
 	if (!paramName) return null;
 	return resolveThemeTemplateToCssVariant(right, paramName, ctx, {
 		nameHint: "truthy",
-		when: testProp
+		when: whens.truthy
 	});
 }
 function tryResolveConditionalCssBlockTernary(node, ctx) {
@@ -27752,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"}`
@@ -27800,7 +28786,6 @@ function tryBuildThemeBooleanInlineStyleFallback(args) {
 		type: "splitThemeBooleanWithInlineStyleFallback",
 		cssProp,
 		themeProp: themeBoolInfo.themeProp,
-		isNegated: themeBoolInfo.isNegated,
 		resolvedValue: resolvedBranchIsTrue ? trueValue : falseValue,
 		resolvedImports: resolvedBranchIsTrue ? trueImports : falseImports,
 		resolvedBranchIsTrue,
@@ -27887,6 +28872,35 @@ function replaceThemeRefsWithHookVar(expr, paramName, info) {
 	};
 	return replace(cloned);
 }
+/**
+* Builds truthy/falsy `when` condition strings for a destructured boolean-ish prop,
+* accounting for destructuring defaults. A default applies only when the prop is
+* `undefined`, so a statically-truthy default means the truthy branch must also
+* apply when the prop is unset (`prop === undefined || prop`).
+*
+* Returns null when the prop has a default whose truthiness cannot be determined
+* statically — callers should fall back to other handlers instead of emitting a
+* condition that ignores the default.
+*/
+function destructuredBooleanWhens(propName, bindings) {
+	if (bindings?.kind !== "destructured" || !bindings.defaults?.has(propName)) return {
+		truthy: propName,
+		falsy: `!${propName}`
+	};
+	const defaultValue = literalToStaticValue(bindings.defaults.get(propName));
+	if (defaultValue === null) return null;
+	if (defaultValue) {
+		const truthy = `${propName} === undefined || ${propName}`;
+		return {
+			truthy,
+			falsy: `!(${truthy})`
+		};
+	}
+	return {
+		truthy: propName,
+		falsy: `!${propName}`
+	};
+}
 //#endregion
 //#region src/internal/builtin-handlers.ts
 /**
@@ -28154,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:
@@ -29370,6 +30370,13 @@ function tryHandleInterpolatedStringValue(args) {
 		}
 		return true;
 	}
+	if (tryHandleTwoValueShorthandLeadingExpression({
+		decl,
+		d,
+		resolveImportedValueExpr,
+		addImport,
+		setValue
+	})) return true;
 	const tl = buildInterpolatedTemplate({
 		j,
 		decl,
@@ -29386,7 +30393,9 @@ function tryHandleInterpolatedStringValue(args) {
 	const outputs = cssDeclarationToStylexDeclarations(d);
 	for (let i = 0; i < outputs.length; i++) {
 		const out = outputs[i];
-		setValue(out.prop, maybeOmitPxUnitFromStylexValue(j, tl, out.prop, d.important, { numericIdentifiers: args.numericIdentifiers }));
+		const emitted = maybeOmitPxUnitFromStylexValue(j, tl, out.prop, d.important, { numericIdentifiers: args.numericIdentifiers });
+		if (emitted !== tl && hasSingleSlotUnitSuffix(d.value)) markProvenSingleTokenValue(emitted);
+		setValue(out.prop, emitted);
 		if (i === 0 && (d.leadingComment || d.leadingLineComment)) addPropComments(styleObj, out.prop, {
 			leading: d.leadingComment,
 			leadingLine: d.leadingLineComment
@@ -29394,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;
@@ -29403,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;
@@ -29424,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;
@@ -29443,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;
@@ -29451,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);
@@ -29491,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 ?? "" : "";
@@ -33494,7 +34584,12 @@ const createValuePatternHandlers = (ctx) => {
 					callArg,
 					condition: "always"
 				});
-			} else styleFnFromProps.push({
+			} else if (expr.body.operator === "||") styleFnFromProps.push({
+				fnKey,
+				jsxProp,
+				condition: "truthy"
+			});
+			else styleFnFromProps.push({
 				fnKey,
 				jsxProp
 			});
@@ -34201,6 +35296,89 @@ function createDeclProcessingState(state, decl) {
 	};
 }
 //#endregion
+//#region src/internal/lower-rules/validate-decl-conflicts.ts
+/**
+* Returns the name of an imported runtime-condition root (recorded in
+* `nonPropConditionRoots`) that also appears as a genuine component prop. Such a
+* collision is unrepresentable: the decl-wide non-prop marking suppresses
+* destructuring of the prop, so a prop-based variant would silently read the
+* imported binding instead. Covers both typed props and props inferred from
+* `props.<name>` usage in styling.
+*
+* `variantWhens` must be sourced from the in-progress finalize state, since
+* `decl.variantStyleKeys` is not assigned until later in finalize.
+*/
+function findImportedRootPropCollision(decl, variantWhens) {
+	const roots = decl.nonPropConditionRoots;
+	if (!roots || roots.size === 0) return null;
+	const directProps = collectDirectPropReferences(decl);
+	for (const root of roots) {
+		if (directProps.has(root)) return root;
+		const bareRef = new RegExp(`(?:^|[^\\w.])${escapeRegex(root)}(?:$|[^\\w.])`);
+		if (variantWhens.some((when) => bareRef.test(when))) return root;
+	}
+	return null;
+}
+/**
+* Returns true when the component declares both a logical scroll longhand
+* (e.g. `scroll-padding-inline-start`) and a physical scroll side
+* (e.g. `scroll-padding-left`) in the same scroll family. StyleX's
+* logical/physical conflict normalization resolves these to physical sides
+* assuming horizontal-tb LTR, but the logical-to-physical mapping depends on
+* `writing-mode`/`direction` (e.g. `inline-start` is the right side in RTL),
+* so any such mix may silently preserve or override the wrong side — bail.
+*/
+function hasConflictingLogicalPhysicalScrollProps(decl) {
+	for (const family of SCROLL_FAMILIES) {
+		let hasLogical = false;
+		let hasPhysical = false;
+		for (const rule of decl.rules) for (const declaration of rule.declarations) {
+			const prop = declaration.property?.trim();
+			if (!prop) continue;
+			const camel = kebabToCamel(prop);
+			if (!camel.startsWith(family)) continue;
+			const side = camel.slice(family.length);
+			if (/^(?:Inline|Block)/.test(side)) hasLogical = true;
+			else if (side === "" || /^(?:Top|Right|Bottom|Left)$/.test(side)) hasPhysical = true;
+		}
+		if (hasLogical && hasPhysical) return true;
+	}
+	return false;
+}
+const SCROLL_FAMILIES = ["scrollMargin", "scrollPadding"];
+function collectDirectPropReferences(decl) {
+	const props = /* @__PURE__ */ new Set();
+	const add = (name) => {
+		if (name && !name.startsWith("__")) props.add(name);
+	};
+	for (const name of decl.typeScriptExplicitPropNames ?? []) add(name);
+	for (const entry of decl.styleFnFromProps ?? []) {
+		add(entry.jsxProp);
+		for (const extra of entry.extraCallArgs ?? []) add(extra.jsxProp);
+	}
+	for (const entry of decl.inlineStyleProps ?? []) add(entry.jsxProp);
+	for (const dim of decl.variantDimensions ?? []) {
+		add(dim.propName);
+		add(dim.namespaceBooleanProp);
+	}
+	for (const cv of decl.compoundVariants ?? []) {
+		add(cv.outerProp);
+		add(cv.innerProp);
+	}
+	const attrs = decl.attrsInfo;
+	if (attrs) {
+		for (const entry of attrs.defaultAttrs ?? []) add(entry.jsxProp);
+		for (const entry of attrs.dynamicAttrs ?? []) add(entry.jsxProp);
+		for (const entry of attrs.conditionalAttrs ?? []) add(entry.jsxProp);
+		for (const entry of attrs.invertedBoolAttrs ?? []) add(entry.jsxProp);
+		for (const entry of attrs.attrsDynamicStyles ?? []) add(entry.jsxProp);
+	}
+	return props;
+}
+function kebabToCamel(prop) {
+	return prop.replace(/-([a-z])/g, (_, ch) => ch.toUpperCase());
+}
+//#endregion
 //#region src/internal/lower-rules/finalize-decl.ts
 /**
 * Finalizes per-declaration style objects after rule processing.
@@ -34209,6 +35387,14 @@ function createDeclProcessingState(state, decl) {
 function finalizeDeclProcessing(ctx) {
 	const { state, decl, styleObj, perPropPseudo, perPropMedia, perPropComputedMedia, nestedSelectors, variantBuckets, variantStyleKeys, variantSourceOrder, extraStyleObjects, styleFnFromProps, styleFnDecls, attrBuckets, observedVariantFallbackFns, inlineStyleProps, localVarValues, cssHelperPropValues } = ctx;
 	const { rewriteCssVarsInStyleObject, rewriteCssVarsInAstNode, relationOverridePseudoBuckets, relationOverrides, ancestorSelectorParents, resolvedStyleObjects, warnings } = state;
+	if (findImportedRootPropCollision(decl, Object.keys(variantStyleKeys ?? {}))) {
+		state.bailUnsupported(decl, "Imported runtime condition root collides with a component prop of the same name");
+		return;
+	}
+	if (hasConflictingLogicalPhysicalScrollProps(decl)) {
+		state.bailUnsupported(decl, "Mixed logical and physical scroll properties cannot be normalized without a known writing-mode");
+		return;
+	}
 	mergeConditionBucket(styleObj, perPropPseudo);
 	mergeConditionBucket(styleObj, perPropMedia);
 	for (const [prop, entry] of perPropComputedMedia) {
@@ -36309,7 +37495,7 @@ const OPAQUE_SHORTHAND_PROPS = new Set([
 function warnOpaqueShorthands(styleObj, decl, warnings) {
 	for (const prop of OPAQUE_SHORTHAND_PROPS) {
 		const val = styleObj[prop];
-		if (val !== void 0 && isAstNode$1(val)) warnings.push({
+		if (val !== void 0 && isAstNode$1(val) && !isProvenSingleTokenValue(val)) warnings.push({
 			severity: "warning",
 			type: "Shorthand property has an opaque value that StyleX will expand to longhands — use `directional` in resolveValue to return separate longhand tokens",
 			loc: decl.loc,
@@ -36907,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) {
@@ -36938,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);
@@ -36985,6 +38172,11 @@ function tryHandleInterpolatedBorder(ctx, args) {
 	if (width) applyResolvedPropValue(widthProp, width);
 	if (style) applyResolvedPropValue(styleProp, style);
 	if (color) applyResolvedPropValue(colorProp, color);
+	const stripConsumedStaticParts = () => {
+		const value = d.value;
+		if (!staticRaw || value?.kind !== "interpolated" || !Array.isArray(value.parts)) return;
+		for (const part of value.parts) if (part?.kind === "static") part.value = "";
+	};
 	const hasStaticWidthOrStyle = Boolean(width || style);
 	const targetProp = interpolationTarget === "color" ? colorProp : interpolationTarget === "width" ? widthProp : styleProp;
 	const targetCssProperty = interpolationTarget === "width" ? directionLower ? `border-${directionLower}-width` : "border-width" : interpolationTarget === "style" ? directionLower ? `border-${directionLower}-style` : "border-style" : directionLower ? `border-${directionLower}-color` : "border-color";
@@ -37046,6 +38238,7 @@ function tryHandleInterpolatedBorder(ctx, args) {
 		const alt = expr.body.alternate;
 		if (isMemberExpression(cons) || isMemberExpression(alt)) {
 			d.property = targetCssProperty;
+			stripConsumedStaticParts();
 			return false;
 		}
 	}
@@ -37242,6 +38435,7 @@ function tryHandleInterpolatedBorder(ctx, args) {
 	if (expr?.type === "ArrowFunctionExpression") {
 		if (expr.body?.type === "MemberExpression") {
 			d.property = targetCssProperty;
+			stripConsumedStaticParts();
 			return false;
 		}
 	}
@@ -37298,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))));
@@ -37318,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;
@@ -37435,7 +38694,8 @@ function handleSplitVariantsResolvedValue(ctx) {
 			target[prop] = map;
 			return map;
 		};
-		const applyWithContext = (prop, valueAst) => {
+		const applyWithContext = (prop, valueAstRaw) => {
+			const valueAst = appendImportantToStyleValue(j, valueAstRaw, d.important);
 			if (media) {
 				const map = getOrCreateConditionMap(prop);
 				map[media] = valueAst;
@@ -38025,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) => {
@@ -38037,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;
@@ -38385,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({
@@ -38429,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",
@@ -38439,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);
@@ -38586,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;
@@ -38623,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",
@@ -38635,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)
@@ -38648,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),
@@ -38758,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",
@@ -38786,9 +40098,10 @@ function handleInterpolatedDeclaration(args) {
 			};
 			const resolveValueResult = resolveValue(resolveValueContext);
 			if (!resolveValueResult) {
+				const isPlainOwnedConstant = info.path.length === 0 && imp.source.kind === "absolutePath" && !isStylexImportSource(imp.source.value);
 				warnings.push({
 					severity: "error",
-					type: "Adapter resolveValue returned undefined for imported value",
+					type: isPlainOwnedConstant ? "Imported constant cannot be referenced inside stylex.create() — move it into a `.stylex` defineConsts/defineVars group (or map it via adapter.resolveValue)" : "Adapter resolveValue returned undefined for imported value",
 					loc: getNodeLocStart(expr) ?? decl.loc,
 					context: {
 						localName: decl.localName,
@@ -38888,7 +40201,8 @@ function handleInterpolatedDeclaration(args) {
 			attrTarget,
 			resolvedSelectorMedia
 		})) continue;
-		if (isImportedShorthandUnitValue(d, decl, importMap)) {
+		const numericIdentifiers = getNumericImportedStylexIdentifiers(j, filePath, importMap, resolverImports);
+		if (isImportedShorthandUnitValue(d, decl, importMap, numericIdentifiers)) {
 			bailUnsupportedLocal(decl, "Unsupported interpolation: call expression");
 			continue;
 		}
@@ -38901,7 +40215,7 @@ function handleInterpolatedDeclaration(args) {
 			addImport,
 			resolveImportedValueExpr,
 			resolveThemeValue,
-			numericIdentifiers: getNumericImportedStylexIdentifiers(j, filePath, importMap, resolverImports),
+			numericIdentifiers,
 			setStyleValue: (prop, value) => applyResolvedPropValue(prop, value, null)
 		})) continue;
 		if (bail) break;
@@ -38910,9 +40224,31 @@ function handleInterpolatedDeclaration(args) {
 			if (slot) {
 				const expr = decl.templateExpressions[slot.slotId];
 				if (tryEmitObservedCssBlockVariantBuckets(expr)) continue;
+				const bailOnPropDependentCssHelper = (helperDecl) => {
+					for (const helperExpr of helperDecl.templateExpressions ?? []) {
+						if (!helperExpr || helperExpr.type !== "ArrowFunctionExpression" && helperExpr.type !== "FunctionExpression") continue;
+						const propsUsed = new Set([...collectPropsFromArrowFn(helperExpr), ...collectPropsFromArrowFnDestructured(helperExpr)]);
+						propsUsed.delete("theme");
+						if (propsUsed.size > 0) {
+							warnings.push({
+								severity: "warning",
+								type: "css helper with prop-based interpolation cannot be reused as a mixin",
+								loc: decl.loc,
+								context: {
+									localName: decl.localName,
+									mixin: helperDecl.localName
+								}
+							});
+							bail = true;
+							return true;
+						}
+					}
+					return false;
+				};
 				if (expr?.type === "Identifier" && cssHelperNames.has(expr.name)) {
 					const helperDecl = declByLocalName.get(expr.name);
 					if (helperDecl) {
+						if (bailOnPropDependentCssHelper(helperDecl)) break;
 						applyCssHelperMixin(decl, helperDecl, cssHelperPropValues, inlineStyleProps);
 						continue;
 					}
@@ -38921,6 +40257,7 @@ function handleInterpolatedDeclaration(args) {
 					const calleeName = expr.callee.name;
 					const helperDecl = declByLocalName.get(calleeName);
 					if (helperDecl?.isCssHelper) {
+						if (bailOnPropDependentCssHelper(helperDecl)) break;
 						applyCssHelperMixin(decl, helperDecl, cssHelperPropValues, inlineStyleProps);
 						continue;
 					}
@@ -39066,7 +40403,24 @@ function handleInterpolatedDeclaration(args) {
 		})) continue;
 		if (d.property && d.value.kind === "interpolated" && tryHandleMultiSlotTernary(ctx, d)) continue;
 		if (tryHandleMultiSlotRuntimeValue(resolveImportedValueExpr)) continue;
-		const slotPart = d.value.parts.find((p) => p.kind === "slot");
+		const remainingSlotParts = d.value.parts.filter((p) => p.kind === "slot");
+		if (remainingSlotParts.filter((p) => {
+			const slotExpr = decl.templateExpressions[p.slotId];
+			return slotExpr?.type === "ArrowFunctionExpression" || slotExpr?.type === "FunctionExpression";
+		}).length > 1) {
+			warnings.push({
+				severity: "error",
+				type: "Unsupported interpolation: multiple dynamic slots in one declaration",
+				loc: decl.loc,
+				context: {
+					localName: decl.localName,
+					property: d.property
+				}
+			});
+			bail = true;
+			break;
+		}
+		const slotPart = remainingSlotParts[0];
 		const slotId = slotPart && slotPart.kind === "slot" ? slotPart.slotId : 0;
 		const expr = decl.templateExpressions[slotId];
 		const loc = getNodeLocStart(expr);
@@ -39110,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) {
@@ -39195,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,
@@ -39217,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 ? {
@@ -39225,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;
 		}
@@ -39238,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;
 			}
@@ -39282,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
@@ -39292,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({
@@ -39592,11 +41004,11 @@ function handleInterpolatedDeclaration(args) {
 			const scalarDynamic = shouldUseScalarDynamicArgs(d.property, d.valueRaw) && dynamicProps.length > 0 ? scalarizePropsObjectDynamicValue({
 				j,
 				valueExpr: dynamicValueExpr,
-				paramName: "props",
+				paramName,
 				propNames: dynamicProps
 			}) : null;
 			const dynamicStyleValueExpr = scalarDynamic?.valueExpr ?? dynamicValueExpr;
-			const dynamicStyleParams = scalarDynamic ? scalarDynamic.paramNames.map((propName) => j.identifier(propName)) : [j.identifier("props")];
+			const dynamicStyleParams = scalarDynamic ? scalarDynamic.paramNames.map((propName) => j.identifier(propName)) : [j.identifier(paramName)];
 			if (scalarDynamic) annotateScalarParams(dynamicStyleParams, scalarDynamic.paramNames);
 			const callArg = j.objectExpression(dynamicProps.map((name) => {
 				const prop = j.property("init", j.identifier(name), j.identifier(name));
@@ -39884,17 +41296,22 @@ function handleInterpolatedDeclaration(args) {
 				const callArg = resolvedCallArg ?? scalarCallArg;
 				const hasExplicitType = !!decl.propsType;
 				const isOptional = ctx.isJsxPropOptional(jsxProp);
+				const foldsStaticBaseIntoPseudoDefault = !media && !!pseudos?.length && staticBaseValueWouldFold(styleObj[out.prop]);
 				styleFnFromProps.push({
 					fnKey,
 					jsxProp,
 					...callArg ? { callArg } : {},
-					...hasExplicitType && !isOptional ? { condition: "always" } : {}
+					...hasExplicitType && !isOptional || foldsStaticBaseIntoPseudoDefault ? { condition: "always" } : {}
 				});
 				if (!styleFnDecls.has(fnKey)) {
 					const param = j.identifier(outParamName);
 					const valueId = j.identifier(outParamName);
 					if (jsxProp !== "__props") annotateParamFromJsxProp(param, jsxProp);
 					if (resolvedCallArg && /\.(ts|tsx)$/.test(filePath)) param.typeAnnotation = j.tsTypeAnnotation(j.tsStringKeyword());
+					if (foldsStaticBaseIntoPseudoDefault && isOptional && jsxProp !== "__props" && /\.(ts|tsx)$/.test(filePath)) {
+						const baseTypeNode = param.typeAnnotation?.typeAnnotation ?? j.tsStringKeyword();
+						param.typeAnnotation = j.tsTypeAnnotation(j.tsUnionType([baseTypeNode, j.tsUndefinedKeyword()]));
+					}
 					if (jsxProp?.startsWith?.("$")) ensureShouldForwardPropDrop(decl, jsxProp);
 					const buildValueExpr = () => {
 						const transformed = (() => {
@@ -39959,7 +41376,28 @@ function handleInterpolatedDeclaration(args) {
 					};
 					const valueExpr = buildValueExpr();
 					const getPropValue = () => {
+						if (!media && !pseudos?.length) return valueExpr;
+						if (!media && pseudos?.length) {
+							const existingStatic = styleObj[out.prop];
+							let defaultValue = j.literal(null);
+							if (existingStatic !== void 0 && existingStatic !== null) if (typeof existingStatic === "object") {
+								if ("type" in existingStatic) {
+									defaultValue = cloneAstNode(existingStatic);
+									delete styleObj[out.prop];
+								}
+							} else {
+								defaultValue = staticValueToLiteral(j, existingStatic);
+								delete styleObj[out.prop];
+							}
+							return j.objectExpression([j.property("init", j.identifier("default"), defaultValue), ...pseudos.map((ps) => j.property("init", j.literal(ps), valueExpr))]);
+						}
 						if (!media) return valueExpr;
+						if (pseudos?.length) return buildPseudoMediaPropValue({
+							j,
+							valueExpr,
+							pseudos,
+							media
+						});
 						const existingFn = styleFnDecls.get(fnKey);
 						let existingValue = null;
 						if (existingFn?.type === "ArrowFunctionExpression") {
@@ -40105,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",
@@ -40166,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.
@@ -40215,6 +41675,17 @@ function resolveDerivedLocalVariable(j, fnBody, fnParamName, localName, jsxProp)
 function isPseudoElementSelector(pseudoElement) {
 	return pseudoElement === "::before" || pseudoElement === "::after" || pseudoElement === "::placeholder";
 }
+/**
+* Whether a base style value for a property would be folded into a pseudo-gated
+* dynamic style function's `default` (mirrors the fold logic in getPropValue):
+* plain primitives and AST-node values fold; existing pseudo/media condition
+* buckets (plain objects without a `type` discriminator) do not.
+*/
+function staticBaseValueWouldFold(existingStatic) {
+	if (existingStatic === void 0 || existingStatic === null) return false;
+	if (typeof existingStatic === "object") return "type" in existingStatic;
+	return true;
+}
 function tryHandleLocalCustomPropertyDefinition(args) {
 	const { j, d, decl, expr, getOrCreateLocalStylexVar, inlineStyleProps } = args;
 	if (!expr || typeof expr !== "object") return false;
@@ -40269,16 +41740,45 @@ function tryHandleRuntimeConditionalStaticBranches(ctx, args) {
 		state.bailUnsupported(decl, "Unsupported interpolation: call expression");
 		return true;
 	}
-	if (hasLaterDeclarationOverlap(rule, allRules, d, new Set(Object.keys(consequentStyle)))) {
+	if (!subtractLaterStaticOverrides({
+		rule,
+		allRules,
+		currentDecl: d,
+		branchStyles: [consequentStyle, alternateStyle]
+	})) {
 		state.bailUnsupported(decl, "Unsupported interpolation: call expression");
 		return true;
 	}
+	if (!Object.keys(consequentStyle).length && !Object.keys(alternateStyle).length) return true;
 	const target = getBaseStyleTarget();
 	for (const [prop, value] of Object.entries(alternateStyle)) target[prop] = value;
 	applyVariant({ when }, consequentStyle);
 	decl.needsWrapperComponent = true;
+	recordNonPropConditionRoots(decl, expr.test);
 	return true;
 }
+/**
+* Records the root identifiers of an imported runtime condition on the decl so
+* wrapper emission treats them as module-scope bindings rather than component
+* props (which matters for lowercase roots like `browser.isTouchDevice`).
+*/
+function recordNonPropConditionRoots(decl, test) {
+	const roots = decl.nonPropConditionRoots ??= /* @__PURE__ */ new Set();
+	const visit = (expr) => {
+		if (expr.type === "LogicalExpression") {
+			visit(expr.left);
+			visit(expr.right);
+			return;
+		}
+		if (expr.type === "UnaryExpression") {
+			visit(expr.argument);
+			return;
+		}
+		const info = extractRootAndPath(expr);
+		if (info && info.path.length > 0) roots.add(info.rootName);
+	};
+	visit(test);
+}
 function buildStaticBranchStyle(d, rawValue) {
 	if (d.property === "background" && isUnsupportedBackgroundShorthandValue(rawValue)) return null;
 	const staticDecl = {
@@ -40303,24 +41803,140 @@ function sameStyleProps(left, right) {
 	const rightKeys = new Set(Object.keys(right));
 	return leftKeys.length === rightKeys.size && leftKeys.every((key) => rightKeys.has(key));
 }
-function hasLaterDeclarationOverlap(rule, allRules, currentDecl, stylexProps) {
+/**
+* Removes branch properties that are unconditionally overridden by later static
+* declarations in the same selector context, so the runtime variant cannot
+* invert the original CSS cascade. Partially overridden directional props are
+* narrowed to the longhands that survive the override (e.g. `marginBlock`
+* overridden by a later `margin-top` becomes `marginBlockEnd`).
+*
+* Returns false when a later overlapping declaration cannot be subtracted
+* safely (conditional at-rule context, dynamic value, property-less helper, or
+* a multi-token branch value that cannot be split per longhand) — the caller
+* must bail in that case.
+*/
+function subtractLaterStaticOverrides(args) {
+	const { rule, allRules, currentDecl, branchStyles, ignoreUnsafeOverlaps = false } = args;
 	const currentIndex = rule.declarations.indexOf(currentDecl);
-	if (currentIndex === -1) return false;
-	if (declarationsOverlap(rule.declarations.slice(currentIndex + 1), stylexProps)) return true;
+	if (currentIndex === -1) return true;
+	const laterContexts = [{
+		declarations: rule.declarations.slice(currentIndex + 1),
+		unconditional: true
+	}];
 	const currentRuleIndex = allRules.indexOf(rule);
-	if (currentRuleIndex === -1) return false;
-	for (const laterRule of allRules.slice(currentRuleIndex + 1)) {
-		if (rule.selector !== laterRule.selector) continue;
-		if (declarationsOverlap(laterRule.declarations, stylexProps)) return true;
+	if (currentRuleIndex !== -1) for (const laterRule of allRules.slice(currentRuleIndex + 1)) {
+		if (laterRule.selector !== rule.selector) continue;
+		laterContexts.push({
+			declarations: laterRule.declarations,
+			unconditional: sameAtRuleStack(laterRule.atRuleStack, rule.atRuleStack)
+		});
 	}
-	return false;
+	const branchProps = () => [...new Set(branchStyles.flatMap((style) => Object.keys(style)))];
+	for (const context of laterContexts) for (const laterDecl of context.declarations) {
+		if (!laterDecl.property) {
+			if (branchProps().length) return false;
+			continue;
+		}
+		if (isBorderShorthandProperty(laterDecl.property)) {
+			const borderProps = new Set(cssDeclarationToStylexDeclarations(laterDecl).map((out) => out.prop));
+			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) {
+				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;
+		}
+	}
+	return true;
 }
-function declarationsOverlap(declarations, stylexProps) {
-	for (const laterDecl of declarations) {
-		if (!laterDecl.property) return true;
-		for (const out of cssDeclarationToStylexDeclarations(laterDecl)) if ([...stylexProps].some((prop) => stylexPropsOverlap(prop, out.prop))) return true;
+function sameAtRuleStack(left, right) {
+	return left.length === right.length && left.every((entry, i) => entry === right[i]);
+}
+/** True for the `border` / `border-<side>` shorthands (not the longhands). */
+function isBorderShorthandProperty(property) {
+	return /^border(?:-(?:top|right|bottom|left))?$/.test(property.trim());
+}
+function subtractOverrideFromBranch(branch, overlappedProps, overrideProp) {
+	const overridePhysical = new Set(physicalLonghandExpansion(overrideProp));
+	const overrideIsLogical = isLogicalDirectionalProp(overrideProp);
+	for (const branchProp of overlappedProps) {
+		if (!(branchProp in branch)) continue;
+		const branchPhysical = physicalLonghandExpansion(branchProp);
+		const remainder = branchPhysical.filter((prop) => !overridePhysical.has(prop));
+		if (remainder.length === branchPhysical.length) continue;
+		if (isLogicalDirectionalProp(branchProp) !== overrideIsLogical) return false;
+		const value = branch[branchProp];
+		delete branch[branchProp];
+		if (!remainder.length) continue;
+		if (!isSingleCssToken(value)) return false;
+		for (const physical of remainder) {
+			const name = overrideIsLogical && LOGICAL_TO_PHYSICAL[branchProp] ? logicalFormForPhysical(branchProp, physical) : physical;
+			if (!name) return false;
+			branch[name] = value;
+		}
 	}
-	return false;
+	return true;
+}
+/**
+* True for a logical directional longhand whose physical side(s) depend on the
+* writing mode — `marginInline`, `paddingBlockEnd`, `scrollMarginInlineStart`,
+* etc. The physical-neutral full shorthands (`margin`, `padding`) and physical
+* sides (`marginTop`) are not logical.
+*/
+function isLogicalDirectionalProp(prop) {
+	return LOGICAL_TO_PHYSICAL[prop] !== void 0;
+}
+/** Physical longhands covered by a StyleX directional/border property. */
+function physicalLonghandExpansion(prop) {
+	const group = SHORTHAND_LONGHANDS[prop];
+	if (group) return [...group.physical];
+	const logical = LOGICAL_TO_PHYSICAL[prop];
+	if (logical) return [...logical];
+	const borderMatch = prop.match(/^border(Top|Right|Bottom|Left)?(Width|Style|Color)$/);
+	if (borderMatch) {
+		const side = borderMatch[1];
+		const kind = borderMatch[2];
+		return side ? [prop] : [
+			"Top",
+			"Right",
+			"Bottom",
+			"Left"
+		].map((s) => `border${s}${kind}`);
+	}
+	return [prop];
+}
+/** Maps a physical longhand back to the Start/End form of a logical branch prop. */
+function logicalFormForPhysical(logicalProp, physical) {
+	for (const [name, physicalProps] of Object.entries(LOGICAL_TO_PHYSICAL)) if (physicalProps.length === 1 && physicalProps[0] === physical && name.startsWith(logicalProp)) return name;
+	return null;
+}
+function isSingleCssToken(value) {
+	if (typeof value === "number") return true;
+	return typeof value === "string" && value.trim() !== "" && !/\s/.test(value.trim());
 }
 function stylexPropsOverlap(left, right) {
 	const leftRelated = relatedDirectionalProps(left);
@@ -40356,21 +41972,20 @@ function addRelatedBorderLonghands(prop, related) {
 }
 function isImportedRuntimeCondition(expr, importMap) {
 	const info = extractRootAndPath(expr);
-	if (info && info.path.length > 0 && importMap.has(info.rootName) && isRuntimeConditionImportRoot(info.rootName)) return true;
+	if (info && info.path.length > 0 && importMap.has(info.rootName)) return true;
 	if (expr.type === "LogicalExpression" && expr.operator === "&&") return isImportedRuntimeCondition(expr.left, importMap) && isImportedRuntimeCondition(expr.right, importMap);
 	if (expr.type === "UnaryExpression" && expr.operator === "!") return isImportedRuntimeCondition(expr.argument, importMap);
 	return false;
 }
-function isRuntimeConditionImportRoot(rootName) {
-	return /^[A-Z]/.test(rootName);
-}
-function isImportedShorthandUnitValue(d, decl, importMap) {
+function isImportedShorthandUnitValue(d, decl, importMap, numericIdentifiers) {
 	if (!d.property || !isCssShorthandProperty(d.property)) return false;
 	const staticParts = getSingleSlotStaticParts(d, decl);
 	if (!staticParts || !/^[a-zA-Z%]/.test(staticParts.suffix)) return false;
 	const slotPart = d.value.kind === "interpolated" ? d.value.parts.find((part) => part.kind === "slot") : null;
 	const info = extractRootAndPath(slotPart && slotPart.kind === "slot" ? decl.templateExpressions[slotPart.slotId] : void 0);
-	return !!info && importMap.has(info.rootName);
+	if (!info || !importMap.has(info.rootName)) return false;
+	if ((d.property === "margin" || d.property === "padding") && staticParts.prefix.trim() === "" && /^[a-zA-Z%]+$/.test(staticParts.suffix.trim()) && numericIdentifiers.has(info.rootName)) return false;
+	return true;
 }
 function expressionToSource(j, expr) {
 	try {
@@ -40684,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);
@@ -40708,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) {
@@ -40873,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;
@@ -40883,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;
@@ -41538,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
@@ -42109,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);
@@ -42122,6 +43902,12 @@ function processRuleDeclarations(args) {
 			d.property = resolvedProperty;
 		}
 		if (d.value.kind === "interpolated") {
+			if (d.property && isLogicalScrollAxisShorthand(d.property)) {
+				state.bailUnsupported(ctx.decl, "Dynamic logical scroll shorthand cannot be expanded — bind a specific longhand (e.g. scroll-padding-inline-start) instead");
+				if (state.currentDecl === ctx.decl) continue;
+				state.bail = true;
+				break;
+			}
 			handleInterpolatedDeclaration({
 				ctx,
 				rule,
@@ -42132,6 +43918,7 @@ function processRuleDeclarations(args) {
 				pseudoElement,
 				attrTarget,
 				resolvedSelectorMedia,
+				hasAncestorAttributeScope,
 				applyResolvedPropValue
 			});
 			if (state.bail) break;
@@ -42167,6 +43954,20 @@ function processRuleDeclarations(args) {
 			}
 		}
 		if (d.property === "background" && isUnsupportedBackgroundShorthandValue(d.valueRaw)) {
+			const expanded = d.value.kind === "static" && !d.important && !hasOtherBackgroundDeclaration(allRules, d) ? expandBackgroundShorthandComponents(d.valueRaw) : null;
+			if (expanded) {
+				const commentSource = {
+					leading: d.leadingComment,
+					leadingLine: d.leadingLineComment,
+					trailingLine: d.trailingLineComment
+				};
+				let isFirst = true;
+				for (const { prop, value } of expanded) {
+					applyResolvedPropValue(prop, value, isFirst ? commentSource : null, d.property);
+					isFirst = false;
+				}
+				continue;
+			}
 			state.bailUnsupported(ctx.decl, "Unsupported background shorthand: multiple components cannot be mapped to a single StyleX longhand");
 			if (state.currentDecl === ctx.decl) break;
 			state.bail = true;
@@ -42221,10 +44022,23 @@ function resolveInterpolatedPropertyName(property, ctx) {
 	if (!resolved.startsWith("--")) return null;
 	return resolved;
 }
+/**
+* True when any declaration other than `current` (across all of the component's
+* rules) targets a `background`/`background-*` property. A multi-component
+* background expansion only reproduces reset semantics in isolation, so the
+* presence of a sibling background declaration makes the expansion unsafe.
+*/
+function hasOtherBackgroundDeclaration(allRules, current) {
+	for (const rule of allRules) for (const declaration of rule.declarations) {
+		if (declaration === current) continue;
+		if (declaration.property && /^background(-|$)/.test(declaration.property)) return true;
+	}
+	return false;
+}
 //#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;
 	/**
@@ -42864,6 +44678,73 @@ function processDeclRules(ctx) {
 			for (const bucket of variantBuckets.values()) if (Object.hasOwn(bucket, prop)) wrapStyleConditionValue(bucket, prop, conditionKey, conditionValue);
 			patchStyleFnConditionValue(prop, conditionKey, conditionValue);
 		};
+		/**
+		* A base-scope declaration later in the CSS overrides any earlier conditional
+		* assignment of the same property — within one styled template the generated
+		* class contains both declarations, and the last one wins regardless of the
+		* runtime condition. Drop the dead base-scope value from earlier variant
+		* buckets so the emitted variant (applied after the base style in
+		* stylex.props) cannot incorrectly win. Condition-scoped values (pseudo/media
+		* maps) only lose their `default` layer.
+		*
+		* Exception: an earlier `!important` conditional value still wins over a later
+		* non-important base declaration in the CSS cascade, so it must be preserved.
+		* (When the later base is itself `!important`, source order decides and the
+		* later one wins, so clearing is correct.)
+		*/
+		const clearEarlierVariantBaseValues = (prop, laterBaseValue) => {
+			const laterBaseIsImportant = cssValueIsImportant(laterBaseValue);
+			for (const [when, bucket] of variantBuckets) {
+				if (!Object.hasOwn(bucket, prop)) continue;
+				const bucketValue = bucket[prop];
+				if (bucketValue !== null && typeof bucketValue === "object" && !isAstNode$1(bucketValue) && "default" in bucketValue) {
+					const conditionDefault = bucketValue.default;
+					if (!laterBaseIsImportant && cssValueIsImportant(conditionDefault)) continue;
+					bucketValue.default = null;
+					continue;
+				}
+				if (!laterBaseIsImportant && cssValueIsImportant(bucketValue)) continue;
+				delete bucket[prop];
+				if (Object.keys(bucket).length === 0) {
+					variantBuckets.delete(when);
+					delete ctx.variantStyleKeys[when];
+					delete ctx.variantSourceOrder[when];
+				}
+			}
+		};
+		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) {
@@ -43078,6 +44959,8 @@ function processDeclRules(ctx) {
 				}
 				return;
 			}
+			clearEarlierVariantBaseValues(prop, value);
+			clearEarlierThemeBaseValues(prop, value, sourceCssProperty);
 			const target = ctx.getBaseStyleTarget();
 			setStyleObjectValue(target, prop, value);
 			noteSourceCssProperty(target);
@@ -43096,6 +44979,7 @@ function processDeclRules(ctx) {
 			pseudoElement: pseudoElement ?? (pseudoElementsList ? pseudoElementsList[0] ?? null : null),
 			attrTarget,
 			resolvedSelectorMedia,
+			hasAncestorAttributeScope: Boolean(ancestorAttrs?.length),
 			applyResolvedPropValue
 		});
 		if (state.bail) break;
@@ -43608,7 +45492,9 @@ function recoverStandaloneInterpolationsInPseudoBlock(rule, decl) {
 }
 /** Negates a `when` condition string (e.g. `$active` → `!$active`, `!$x` → `$x`). */
 function negateWhen(when) {
+	if (when.startsWith("!(") && when.endsWith(")")) return when.slice(2, -1);
 	if (when.startsWith("!")) return when.slice(1);
+	if (when.includes(" || ") || when.includes(" && ")) return `!(${when})`;
 	if (when.includes(" === ")) return when.replace(" === ", " !== ");
 	if (when.includes(" !== ")) return when.replace(" !== ", " === ");
 	return `!${when}`;
@@ -44092,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;
@@ -44158,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: "=",
@@ -44171,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();
@@ -44267,6 +46178,7 @@ function createLowerRulesState(ctx) {
 		cssHelperValuesByKey,
 		mixinValuesByKey,
 		staticPropertyValues,
+		staticIdentifierValues,
 		usedCssHelperFunctions: /* @__PURE__ */ new Set(),
 		warnPropInlineStyle,
 		applyCssHelperMixin,
@@ -44353,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;
@@ -44382,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
 /**
@@ -46095,6 +48025,10 @@ function wrappedComponentAcceptsSxProp(ctx, componentLocalName, visiting = /* @_
 		visiting.delete(componentLocalName);
 		return true;
 	}
+	if (localStyledDecl?.needsWrapperComponent && !localStyledDecl.skipTransform && localStyledDecl.supportsExternalStyles) {
+		visiting.delete(componentLocalName);
+		return true;
+	}
 	const componentInterface = wrappedComponentInterfaceFor(ctx, componentLocalName);
 	if (componentInterface !== void 0) {
 		visiting.delete(componentLocalName);
@@ -46342,8 +48276,9 @@ function rewriteJsxStep(ctx) {
 			const mergeArgs = matchedCombinedStyleKey ? void 0 : opening.__promotedMergeArgs;
 			const baseMember = j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(baseStyleKey));
 			const baseExpr = mergeArgs ? j.callExpression(baseMember, mergeArgs) : baseMember;
+			const rendersLocalWrapperBase = decl.base.kind === "component" && decl.base.ident === finalTag && (ctx.styledDecls?.some((d) => d.localName === finalTag && d.needsWrapperComponent && !d.skipTransform) ?? false);
 			const styleArgs = [
-				...decl.extendsStyleKey ? [j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(decl.extendsStyleKey))] : [],
+				...decl.extendsStyleKey && !rendersLocalWrapperBase ? [j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(decl.extendsStyleKey))] : [],
 				...extraMixinArgs,
 				...decl.skipBaseStyleRef ? [] : [baseExpr],
 				...extraAfterBaseArgs
@@ -47089,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
@@ -47098,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) {
@@ -47147,6 +49120,7 @@ function transformWithWarnings(file, api, options) {
 		extractCssHelpersStep,
 		detectStringMappingFnsStep,
 		collectStyledDeclsStep,
+		inlinePropConditionalCssHelpersStep,
 		resolveBaseComponentsStep,
 		applyLeavesOnlyPolicyStep,
 		markPartialImportedRootsStep,
@@ -47169,7 +49143,8 @@ function transformWithWarnings(file, api, options) {
 		reinsertStaticPropsStep,
 		postProcessStep,
 		cleanupCssImportStep,
-		ensureReactImportStep
+		ensureReactImportStep,
+		warnPartialMigrationIncompleteStep
 	];
 	for (const step of pipeline) {
 		const outcome = step(ctx);