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

package/dist/transform.mjs

@@ -2,7 +2,7 @@ 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 { 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 { createRequire } from "node:module";
@@ -12,6 +12,89 @@ import { existsSync, readFileSync, realpathSync } from "node:fs";
 import valueParser from "postcss-value-parser";
 import { compile } from "stylis";
 import selectorParser from "postcss-selector-parser";
+//#region src/internal/css-value-split.ts
+function splitCssValueWhitespace(raw) {
+	return valueParser(raw).nodes.filter((node) => node.type !== "space").map((node) => valueParser.stringify(node)).filter((value) => value !== "");
+}
+//#endregion
+//#region src/internal/css-border-radius.ts
+function expandBorderRadiusInStyleObject(styleObj, expanded, options) {
+	const entries = Object.entries(styleObj);
+	const shorthandIndex = entries.findIndex(([key]) => key === "borderRadius");
+	if (shorthandIndex < 0) return styleObj;
+	const replacements = borderRadiusReplacementEntries(entries, shorthandIndex, expanded).filter(([prop]) => !options?.omitCorners?.has(prop));
+	const next = {};
+	for (const [key, value] of entries) {
+		if (key === "borderRadius") {
+			for (const [prop, replacement] of replacements) next[prop] = replacement;
+			continue;
+		}
+		if (isBorderRadiusLonghandProp(key)) continue;
+		next[key] = value;
+	}
+	return next;
+}
+function expandBorderRadiusShorthandValue(value, options) {
+	if (value.includes("/")) return null;
+	const parts = splitCssValueWhitespace(value.trim());
+	const minParts = options?.includeSingleValue === true ? 1 : 2;
+	if (parts.length < minParts || parts.length > 4) return null;
+	const topLeft = parts[0];
+	if (topLeft === void 0) return null;
+	const topRight = parts[1] ?? topLeft;
+	return {
+		topLeft,
+		topRight,
+		bottomRight: parts[2] ?? topLeft,
+		bottomLeft: parts[3] ?? topRight
+	};
+}
+const BORDER_RADIUS_LONGHAND_ENTRIES = [
+	["borderTopLeftRadius", "topLeft"],
+	["borderTopRightRadius", "topRight"],
+	["borderBottomRightRadius", "bottomRight"],
+	["borderBottomLeftRadius", "bottomLeft"]
+];
+function borderRadiusReplacementEntries(entries, shorthandIndex, expanded) {
+	return BORDER_RADIUS_LONGHAND_ENTRIES.map(([prop, corner]) => [prop, latestBorderRadiusCornerValue(entries, shorthandIndex, prop, expanded[corner])]);
+}
+function latestBorderRadiusCornerValue(entries, shorthandIndex, prop, shorthandValue) {
+	let latest = {
+		index: shorthandIndex,
+		value: shorthandValue
+	};
+	for (let index = shorthandIndex + 1; index < entries.length; index++) {
+		const entry = entries[index];
+		if (!entry) continue;
+		const [key, value] = entry;
+		if (key === prop) latest = {
+			index,
+			value: mergeConditionMapDefault(value, latest.value)
+		};
+	}
+	return latest.value;
+}
+function isBorderRadiusLonghandProp(prop) {
+	return BORDER_RADIUS_LONGHAND_ENTRIES.some(([longhand]) => prop === longhand);
+}
+function mergeConditionMapDefault(value, defaultValue) {
+	if (!isConditionMap(value)) return value;
+	const merged = isConditionMap(defaultValue) ? {
+		...defaultValue,
+		...value
+	} : { ...value };
+	if (merged.default === null || merged.default === void 0) merged.default = conditionMapDefault(defaultValue);
+	return merged;
+}
+function conditionMapDefault(value) {
+	return isConditionMap(value) ? value.default : value;
+}
+function isConditionMap(value) {
+	if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+	const keys = Object.keys(value);
+	return keys.includes("default") || keys.some((key) => key.startsWith(":") || key.startsWith("@"));
+}
+//#endregion
 //#region src/internal/stylex-shorthands.ts
 /**
 * Utilities for expanding CSS shorthands to StyleX longhands.
@@ -268,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());
 }
@@ -311,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)?$/);
@@ -381,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 [{
@@ -399,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
@@ -408,6 +643,16 @@ function cssDeclarationToStylexDeclarations(decl) {
 		if (decl.value.kind === "interpolated") return expandInterpolatedBorder(prop, "", decl.value);
 		return borderShorthandToStylex(raw, "");
 	}
+	if (prop === "border-radius" && decl.value.kind === "static") {
+		const expanded = borderRadiusShorthandToStylex(decl.valueRaw.trim());
+		if (expanded.length > 0) return expanded.map(({ prop, value }) => ({
+			prop,
+			value: {
+				kind: "static",
+				value
+			}
+		}));
+	}
 	const borderDirectionMatch = prop.match(/^border-(top|right|bottom|left)$/);
 	if (borderDirectionMatch) {
 		const direction = borderDirectionMatch[1];
@@ -444,6 +689,28 @@ function normalizeGridLineSlashSpacing(stylexProp, value) {
 		value: normalizeUnescapedSlashSpacing(value.value)
 	};
 }
+function borderRadiusShorthandToStylex(raw) {
+	const expanded = expandBorderRadiusShorthandValue(raw);
+	if (!expanded) return [];
+	return [
+		{
+			prop: "borderTopLeftRadius",
+			value: expanded.topLeft
+		},
+		{
+			prop: "borderTopRightRadius",
+			value: expanded.topRight
+		},
+		{
+			prop: "borderBottomRightRadius",
+			value: expanded.bottomRight
+		},
+		{
+			prop: "borderBottomLeftRadius",
+			value: expanded.bottomLeft
+		}
+	];
+}
 function normalizeUnescapedSlashSpacing(value) {
 	let output = "";
 	for (let index = 0; index < value.length; index++) {
@@ -614,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) {
@@ -1626,6 +1974,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) {
@@ -3383,7 +3736,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);
@@ -3418,7 +3771,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 {
@@ -3427,7 +3780,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)
 		};
 	};
@@ -3438,7 +3791,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,
@@ -3446,7 +3799,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"),
@@ -3460,7 +3813,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"),
@@ -3474,7 +3827,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,
@@ -3603,8 +3956,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);
 	}
@@ -4512,6 +4865,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.
 *
@@ -5137,6 +5503,335 @@ function buildChildStyleObjectList(childKeys, resolvedStyleObjects) {
 	return childStyleObjects;
 }
 //#endregion
+//#region src/internal/lower-rules/style-object-normalization.ts
+function expandStyleObjectShorthands(styleObj) {
+	const borderRadius = staticStringValue(styleObj.borderRadius);
+	if (borderRadius === null) return styleObj;
+	const expanded = expandBorderRadiusShorthandValue(borderRadius);
+	if (!expanded) return styleObj;
+	return expandBorderRadiusInStyleObject(styleObj, expanded);
+}
+/**
+* Resolves a style value to a static string when possible: plain strings,
+* string-literal AST nodes, and expression-free template literals.
+*/
+function staticStringValue(value) {
+	if (typeof value === "string") return value;
+	if (!value || typeof value !== "object") return null;
+	const node = value;
+	if ((node.type === "Literal" || node.type === "StringLiteral") && typeof node.value === "string") return node.value;
+	if (node.type === "TemplateLiteral" && node.expressions?.length === 0) {
+		const quasi = node.quasis?.[0];
+		return quasi?.value?.cooked ?? quasi?.value?.raw ?? null;
+	}
+	return null;
+}
+//#endregion
+//#region src/internal/lower-rules/variant-utils.ts
+/**
+* Inverts a "when" condition string for the opposite variant branch.
+* E.g., "!$active" -> "$active", "$x === true" -> "$x !== true"
+*/
+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;
+		return `${propName} ${op === "===" ? "!==" : "==="} ${rhs}`;
+	}
+	if (!when.includes(" ")) return `!${when}`;
+	return null;
+}
+function buildPseudoMediaPropValue(args) {
+	const { j, valueExpr, pseudos, media } = args;
+	const pseudoList = pseudos ?? [];
+	const hasPseudos = pseudoList.length > 0;
+	if (!media && !hasPseudos) return valueExpr;
+	if (media && hasPseudos) {
+		const pseudoProps = pseudoList.map((ps) => j.property("init", j.literal(ps), j.objectExpression([j.property("init", j.identifier("default"), j.literal(null)), j.property("init", j.literal(media), valueExpr)])));
+		return j.objectExpression([j.property("init", j.identifier("default"), j.literal(null)), ...pseudoProps]);
+	}
+	if (media) return j.objectExpression([j.property("init", j.identifier("default"), j.literal(null)), j.property("init", j.literal(media), valueExpr)]);
+	const pseudoProps = pseudoList.map((ps) => j.property("init", j.literal(ps), valueExpr));
+	return j.objectExpression([j.property("init", j.identifier("default"), j.literal(null)), ...pseudoProps]);
+}
+const createPropTestHelpers = (bindings) => {
+	const paramName = bindings.kind === "simple" ? bindings.paramName : null;
+	const getMemberExpressionSource = (node) => {
+		const info = extractRootAndPath(node);
+		if (!info) return null;
+		if (info.path.length === 0) return info.rootName;
+		return `${info.rootName}.${info.path.join(".")}`;
+	};
+	const readPropAccess = (node) => {
+		const info = extractRootAndPath(node);
+		if (!info) return null;
+		if (paramName && info.rootName === paramName) {
+			if (info.path.length === 0) return null;
+			const [propRoot, ...rest] = info.path;
+			if (!propRoot) return null;
+			if (propRoot === "theme") return null;
+			return {
+				propName: propRoot,
+				whenName: [propRoot, ...rest].join(".")
+			};
+		}
+		if (bindings.kind === "destructured") {
+			const propName = resolveIdentifierToPropName(info.rootNode, bindings);
+			if (!propName) return null;
+			return {
+				propName,
+				whenName: info.path.length > 0 ? `${propName}.${info.path.join(".")}` : propName
+			};
+		}
+		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);
+			if (!propAccess) return null;
+			const when = applyDefaultToTruthyWhen(propAccess.whenName, propAccess.propName);
+			return when === null ? null : {
+				when,
+				propName: propAccess.propName
+			};
+		}
+		if (isMemberExpression(test)) {
+			const propAccess = readPropAccess(test);
+			if (!propAccess) return null;
+			const when = applyDefaultToTruthyWhen(propAccess.whenName, propAccess.propName);
+			return when === null ? null : {
+				when,
+				propName: propAccess.propName
+			};
+		}
+		if (test.type === "UnaryExpression" && test.operator === "!" && test.argument) {
+			const propAccess = readPropAccess(test.argument);
+			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
+			};
+		}
+		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";
+				const rhs = literalToStaticValue(test.right);
+				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;
+				const when = buildBinaryWhen(propAccess, rhsValue);
+				return when === null ? null : {
+					when,
+					propName: propAccess.propName
+				};
+			}
+			if (isMemberExpression(left)) {
+				const propAccess = readPropAccess(left);
+				const rhsValue = getRhsValue();
+				if (!propAccess || rhsValue === null) return null;
+				const when = buildBinaryWhen(propAccess, rhsValue);
+				return when === null ? null : {
+					when,
+					propName: propAccess.propName
+				};
+			}
+		}
+		return null;
+	};
+	/**
+	* Parse chained && / || conditions, returning a combined TestInfo.
+	*
+	* Supported patterns:
+	*   props.a && props.b           → { when: 'a && b' }
+	*   props.$a || props.$b         → { when: '$a || $b' }
+	*   props.$a && (props.$b || $c) → { when: '$a && $b || $c' }
+	*   !(props.$a || props.$b)      → { when: '!($a || $b)' }
+	*
+	* Bails (returns null) on || wrapping && children to avoid ambiguous
+	* serialization: "a && b || c" would be reparsed as "a && (b || c)"
+	* by parseVariantWhenToAst, which splits on && first.
+	*/
+	const parseChainedTestInfo = (test) => {
+		const simple = parseTestInfo(test);
+		if (simple) return simple;
+		if (!test || typeof test !== "object") return null;
+		if (test.type === "UnaryExpression" && test.operator === "!" && test.argument) {
+			const innerInfo = parseChainedTestInfo(test.argument);
+			if (innerInfo) {
+				const allProps = innerInfo.allPropNames ?? (innerInfo.propName ? [innerInfo.propName] : []);
+				return {
+					when: `!(${innerInfo.when})`,
+					propName: innerInfo.propName,
+					allPropNames: allProps
+				};
+			}
+		}
+		if (test.type === "LogicalExpression" && (test.operator === "&&" || test.operator === "||")) {
+			const leftInfo = parseChainedTestInfo(test.left);
+			const rightInfo = parseChainedTestInfo(test.right);
+			if (leftInfo && rightInfo) {
+				if (test.operator === "||" && (leftInfo.when.includes(" && ") || rightInfo.when.includes(" && "))) return null;
+				if (hasOperatorInsideParens(leftInfo.when, test.operator) || hasOperatorInsideParens(rightInfo.when, test.operator)) return null;
+				const combinedWhen = `${leftInfo.when} ${test.operator} ${rightInfo.when}`;
+				const leftProps = leftInfo.allPropNames ?? (leftInfo.propName ? [leftInfo.propName] : []);
+				const rightProps = rightInfo.allPropNames ?? (rightInfo.propName ? [rightInfo.propName] : []);
+				const allPropNames = [...new Set([...leftProps, ...rightProps])];
+				return {
+					when: combinedWhen,
+					propName: rightInfo.propName,
+					allPropNames
+				};
+			}
+		}
+		return null;
+	};
+	return {
+		parseTestInfo,
+		parseChainedTestInfo
+	};
+};
+/**
+* Per-decl snapshot of the base style object's entries at the moment each
+* variant (`when`) first received styles. Captures the source position of
+* conditional blocks relative to base declarations: keys missing from a
+* variant's snapshot — or whose value changed since — were (re)declared after
+* that variant in the original CSS.
+*/
+const variantBaseKeySnapshots = /* @__PURE__ */ new WeakMap();
+const variantSourceOrders = /* @__PURE__ */ new WeakMap();
+function getVariantBaseKeySnapshot(decl, when) {
+	return variantBaseKeySnapshots.get(decl)?.get(when);
+}
+function getVariantSourceOrder(decl, when) {
+	return variantSourceOrders.get(decl)?.get(when);
+}
+function renameVariantSourceOrderConditions(decl, renameWhen) {
+	const sourceOrders = variantSourceOrders.get(decl);
+	if (!sourceOrders) return;
+	const renamed = /* @__PURE__ */ new Map();
+	for (const [when, sourceOrder] of sourceOrders) {
+		const renamedWhen = renameWhen(when);
+		if (!renamed.has(renamedWhen)) renamed.set(renamedWhen, sourceOrder);
+	}
+	variantSourceOrders.set(decl, renamed);
+}
+const createVariantApplier = (args) => {
+	const { decl, variantBuckets, variantStyleKeys, baseStyleObj, conditionStyleObjs, getCurrentSourceOrder } = args;
+	const dropAllTestInfoProps = (testInfo) => {
+		const propsToCheck = testInfo.allPropNames ?? (testInfo.propName ? [testInfo.propName] : []);
+		for (const prop of propsToCheck) if (prop && !prop.startsWith("$")) ensureShouldForwardPropDrop(decl, prop);
+	};
+	return (testInfo, consStyle) => {
+		const when = testInfo.when;
+		if (baseStyleObj) {
+			const snapshots = variantBaseKeySnapshots.get(decl) ?? /* @__PURE__ */ new Map();
+			if (!snapshots.has(when)) {
+				snapshots.set(when, createBaseKeySnapshot(baseStyleObj, conditionStyleObjs));
+				variantBaseKeySnapshots.set(decl, snapshots);
+				const sourceOrder = getCurrentSourceOrder?.();
+				if (sourceOrder !== void 0) {
+					const sourceOrders = variantSourceOrders.get(decl) ?? /* @__PURE__ */ new Map();
+					sourceOrders.set(when, sourceOrder);
+					variantSourceOrders.set(decl, sourceOrders);
+				}
+			}
+		}
+		const existingBucket = variantBuckets.get(when);
+		const nextBucket = existingBucket ? { ...existingBucket } : {};
+		mergeStyleObjects(nextBucket, expandStyleObjectShorthands(consStyle));
+		variantBuckets.set(when, nextBucket);
+		variantStyleKeys[when] ??= styleKeyWithSuffix(decl.styleKey, when);
+		dropAllTestInfoProps(testInfo);
+	};
+};
+function createBaseKeySnapshot(baseStyleObj, conditionStyleObjs) {
+	const snapshot = new Map(Object.entries(baseStyleObj).map(([key, value]) => [key, cloneSnapshotValue(value)]));
+	for (const conditionStyleObj of conditionStyleObjs ?? []) for (const [key, value] of Object.entries(conditionStyleObj)) mergeSnapshotConditionMap(snapshot, key, value);
+	return snapshot;
+}
+function mergeSnapshotConditionMap(snapshot, key, value) {
+	const existing = snapshot.get(key);
+	const next = cloneSnapshotValue(value);
+	if (!isSnapshotPlainMap(next)) {
+		snapshot.set(key, next);
+		return;
+	}
+	if (isSnapshotPlainMap(existing)) {
+		mergeStyleObjects(existing, next);
+		return;
+	}
+	if (existing !== void 0 && (next.default === null || next.default === void 0)) next.default = cloneSnapshotValue(existing);
+	snapshot.set(key, next);
+}
+/**
+* Clones plain condition-map values for snapshots so later in-place merges
+* into the base style object cannot retroactively alter what the snapshot
+* recorded. AST nodes are kept by reference — redeclarations replace them.
+*/
+function cloneSnapshotValue(value) {
+	if (!isSnapshotPlainMap(value)) return value;
+	const cloned = {};
+	for (const [key, entryValue] of Object.entries(value)) cloned[key] = cloneSnapshotValue(entryValue);
+	return cloned;
+}
+function isSnapshotPlainMap(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value) && typeof value.type !== "string";
+}
+/**
+* Returns true if the string contains the given operator (`&&` or `||`)
+* inside parenthesized groups. Used to detect when strings like
+* `"!($b && $c)"` or `"!($b || $c)"` that would be broken by the naive
+* split in `parseVariantWhenToAst`.
+*/
+function hasOperatorInsideParens(when, operator) {
+	let depth = 0;
+	for (let i = 0; i < when.length; i++) {
+		const ch = when[i];
+		if (ch === "(") depth++;
+		else if (ch === ")") depth--;
+		else if (depth > 0 && when[i] === operator[0] && when.startsWith(operator, i)) return true;
+	}
+	return false;
+}
+//#endregion
 //#region src/internal/utilities/style-composition-plan.ts
 function buildStyleKeySequence(ctx, decl, options) {
 	const entries = [];
@@ -5280,7 +5975,8 @@ function buildVariantAndStyleFnEntries(decl) {
 			styleKey,
 			patchable: true,
 			contributes: false,
-			source: "variant"
+			source: "variant",
+			sourceOrder: getVariantSourceOrder(decl, when)
 		}
 	}));
 	const styleFnEntries = (decl.styleFnFromProps ?? []).map((styleFn) => ({
@@ -5332,12 +6028,14 @@ function buildVariantDimensionEntries(decl) {
 			styleObj,
 			patchable: true,
 			contributes: false,
-			source: "variant"
+			source: "variant",
+			sourceOrder: dimension.sourceOrder
 		}));
 		if (dimension.fallbackFnKey) entries.push({
 			styleKey: dimension.fallbackFnKey,
 			patchable: true,
-			source: "styleFn"
+			source: "styleFn",
+			sourceOrder: dimension.sourceOrder
 		});
 		if (dimension.sourceOrder === void 0) {
 			immediate.push(...entries);
@@ -5462,6 +6160,29 @@ function buildEnumVariantEntries(decl) {
 	}))];
 }
 //#endregion
+//#region src/internal/lower-rules/condition-source-order.ts
+/**
+* Source-order metadata for pseudo/media condition maps.
+* Core concepts: non-emitted metadata and CSS cascade comparisons.
+*/
+const conditionSourceOrders = /* @__PURE__ */ new WeakMap();
+function setConditionSourceOrder(map, condition, sourceOrder) {
+	if (sourceOrder === void 0) return;
+	const orders = conditionSourceOrders.get(map) ?? /* @__PURE__ */ new Map();
+	orders.set(condition, sourceOrder);
+	conditionSourceOrders.set(map, orders);
+}
+function getConditionSourceOrder(map, condition) {
+	return conditionSourceOrders.get(map)?.get(condition);
+}
+function copyConditionSourceOrders(target, source) {
+	const sourceOrders = conditionSourceOrders.get(source);
+	if (!sourceOrders) return;
+	const targetOrders = conditionSourceOrders.get(target) ?? /* @__PURE__ */ new Map();
+	for (const [condition, sourceOrder] of sourceOrders) targetOrders.set(condition, sourceOrder);
+	conditionSourceOrders.set(target, targetOrders);
+}
+//#endregion
 //#region src/internal/utilities/conditional-style-defaults.ts
 const FLAT_ERASES_CONDITIONAL_WARNING = "Flat StyleX value would erase earlier conditional property states";
 function flatStylexValueErasureExample(prop) {
@@ -5486,11 +6207,11 @@ function defaultInferenceFromPropertyShape(shape) {
 	if (shape.kind === "conditionalMap") return shape.defaultValue;
 	return shape;
 }
-function patchFlatValueAgainstPriorPropertyShape(styleObj, prop, earlier, laterSource = "mixin") {
+function patchFlatValueAgainstPriorPropertyShape(styleObj, prop, earlier, laterSource = "mixin", laterSourceOrder) {
 	if (earlier.kind !== "conditionalMap") return "safe";
 	const current = inferPropertyShapeFromValue(styleObj[prop]);
 	if (current.kind !== "flat") return "safe";
-	const preservedConditions = staticConditionsPreservedByLaterFlat(earlier, laterSource);
+	const preservedConditions = staticConditionsPreservedByLaterFlat(earlier, laterSource, laterSourceOrder);
 	if (!preservedConditions) return "bail";
 	if (Object.keys(preservedConditions).length === 0) return "safe";
 	styleObj[prop] = {
@@ -5558,7 +6279,7 @@ function patchConditionalDefaultsForSequence(args) {
 				const earlier = shapes.get(prop) ?? { kind: "absent" };
 				const patchTarget = clonedPatchSources.get(entry.styleKey)?.source ?? (needsSharedFlatEntryClone(entry, source, prop, earlier) && ctx.resolvedStyleObjects ? cloneSharedStyleEntryForPatch(ctx.resolvedStyleObjects, decl, entry.styleKey, source, clonedPatchSources, styleKeyUseCounts) : source);
 				contributionSource = patchTarget;
-				if (patchFlatValueAgainstPriorPropertyShape(patchTarget, prop, earlier, entry.source) !== "bail") continue;
+				if (patchFlatValueAgainstPriorPropertyShape(patchTarget, prop, earlier, entry.source, entry.sourceOrder) !== "bail") continue;
 				ctx.warnings.push({
 					severity: "warning",
 					type: FLAT_ERASES_CONDITIONAL_WARNING,
@@ -5784,6 +6505,7 @@ function inferPropertyShapeFromValue(value) {
 		const defaultValue = value.default;
 		const conditionKeys = Object.keys(value).filter(isStyleConditionKey$1);
 		const staticConditions = readStaticConditionValues(value, conditionKeys);
+		const conditionSourceOrders = readConditionSourceOrders(value, conditionKeys);
 		return {
 			kind: "conditionalMap",
 			defaultValue: isStaticStyleValue(defaultValue) ? defaultValue === null ? { kind: "absent" } : {
@@ -5791,7 +6513,8 @@ function inferPropertyShapeFromValue(value) {
 				value: defaultValue
 			} : { kind: "dynamic" },
 			conditionKeys,
-			...staticConditions ? { staticConditions } : {}
+			...staticConditions ? { staticConditions } : {},
+			...conditionSourceOrders ? { conditionSourceOrders } : {}
 		};
 	}
 	return { kind: "dynamic" };
@@ -5806,9 +6529,21 @@ function readStaticConditionValues(value, conditionKeys) {
 	}
 	return conditions;
 }
-function staticConditionsPreservedByLaterFlat(earlier, laterSource) {
+function readConditionSourceOrders(value, conditionKeys) {
+	const orders = {};
+	for (const key of conditionKeys) {
+		const sourceOrder = getConditionSourceOrder(value, key);
+		if (sourceOrder !== void 0) orders[key] = sourceOrder;
+	}
+	return Object.keys(orders).length ? orders : void 0;
+}
+function staticConditionsPreservedByLaterFlat(earlier, laterSource, laterSourceOrder) {
 	const minSpecificity = conditionSpecificityNeededToOutrankFlatSource(laterSource);
-	const preservedKeys = earlier.conditionKeys.filter((key) => conditionSpecificity(key) > minSpecificity);
+	const preservedKeys = earlier.conditionKeys.filter((key) => {
+		const conditionSourceOrder = earlier.conditionSourceOrders?.[key];
+		if (laterSourceOrder !== void 0 && conditionSourceOrder !== void 0 && conditionSourceOrder <= laterSourceOrder) return false;
+		return conditionSpecificity(key) > minSpecificity;
+	});
 	if (preservedKeys.length === 0) return {};
 	if (!earlier.staticConditions) return;
 	const preserved = {};
@@ -8065,10 +8800,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") {
@@ -8191,6 +8926,7 @@ function applyTransientPropRenames(decl, renames) {
 		for (const [when, order] of Object.entries(decl.variantSourceOrder)) updated[renamePropsInWhenString(when, renames)] = order;
 		decl.variantSourceOrder = updated;
 	}
+	renameVariantSourceOrderConditions(decl, (when) => renamePropsInWhenString(when, renames));
 	if (decl.styleFnFromProps) for (const sf of decl.styleFnFromProps) {
 		sf.jsxProp = renames.get(sf.jsxProp) ?? sf.jsxProp;
 		if (sf.propsObjectKey) sf.propsObjectKey = renames.get(sf.propsObjectKey) ?? sf.propsObjectKey;
@@ -9553,6 +10289,12 @@ function validateSxRestrictedWrappedComponentStyles(ctx, styledDecls) {
 			if (!rejectedProperty) {
 				const disallowedProperty = allowed ? findSxDisallowedStyleProperty(style, allowed) : null;
 				if (!disallowedProperty) continue;
+				/**
+				* Keep this as a warning instead of bailing. Some component wrappers expose
+				* narrow style APIs (for example icon `color` props instead of raw `fill`
+				* styles), but the generated output is still localized and manually fixable
+				* by the migration author.
+				*/
 				ctx.warnings.push({
 					severity: "warning",
 					type: "Wrapped component sx prop does not accept generated StyleX property",
@@ -9974,6 +10716,26 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 		rules.push(created);
 		return created;
 	};
+	const recoveredSelectorAliases = (selector) => {
+		const normalized = normalizeRecoveredSelector(selector);
+		const aliases = [normalized];
+		const withoutLeadingAmpersands = splitTopLevelSelectorList(normalized).map((part) => part.startsWith("&") && part.length > 1 ? part.slice(1) : part).join(",");
+		if (withoutLeadingAmpersands && withoutLeadingAmpersands !== normalized) aliases.push(withoutLeadingAmpersands);
+		return aliases;
+	};
+	const findRecoveredRule = (selector, stack) => {
+		const aliases = recoveredSelectorAliases(selector);
+		for (const alias of aliases) {
+			const rule = findRule(alias, stack);
+			if (rule) return rule;
+		}
+		for (const rule of rules) {
+			if (!sameArray(rule.atRuleStack, stack)) continue;
+			const normalizedRuleSelector = rule.selector.replace(/^(?:__SC_EXPR_\d+__\s*)+/, "").trim();
+			if (aliases.includes(normalizedRuleSelector)) return rule;
+		}
+	};
+	const ensureRecoveredRule = (selector, stack) => findRecoveredRule(selector, stack) ?? ensureRule(normalizeRecoveredSelector(selector), stack);
 	const visit = (node) => {
 		if (!node) return;
 		if (Array.isArray(node)) {
@@ -10069,12 +10831,19 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 		const selectorStack = [];
 		const recoveryAtRuleStack = [];
 		const rawDeclarationCountByRule = /* @__PURE__ */ new WeakMap();
+		let rawSourceOrder = 0;
 		const recordRawDeclarations = (trimmed, selector, recoveryAtRules) => {
 			const decls = parseDeclarations(trimmed, slotByPlaceholder);
 			if (!decls.length) return;
-			const targetRule = findRule(normalizeRecoveredSelector(selector), recoveryAtRules);
+			const targetRule = findRecoveredRule(selector, recoveryAtRules);
 			if (!targetRule) return;
-			rawDeclarationCountByRule.set(targetRule, (rawDeclarationCountByRule.get(targetRule) ?? 0) + decls.length);
+			const rawDeclarationCount = rawDeclarationCountByRule.get(targetRule) ?? 0;
+			for (let i = 0; i < decls.length; i++) {
+				const targetDecl = targetRule.declarations[rawDeclarationCount + i];
+				if (targetDecl) targetDecl.sourceOrder ??= rawSourceOrder;
+				rawSourceOrder++;
+			}
+			rawDeclarationCountByRule.set(targetRule, rawDeclarationCount + decls.length);
 		};
 		const recoverPlaceholder = (trimmed, selector, recoveryAtRules) => {
 			const m = trimmed.match(placeholderLineRe);
@@ -10084,11 +10853,18 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 			const mapped = slotByPlaceholder.get(placeholder);
 			if (mapped === void 0) return false;
 			const shouldPreserveRawDeclarationPosition = isIdentifierSlot(slotExpressionById.get(slotId));
-			if (rules.some((r) => r.declarations.some((decl) => {
-				if (decl.value.kind !== "interpolated") return false;
-				return decl.value.parts.some((p) => p.kind === "slot" && p.slotId === mapped);
-			}))) return false;
-			const targetRule = ensureRule(normalizeRecoveredSelector(selector), recoveryAtRules);
+			const existingSlotDecl = (() => {
+				for (const r of rules) for (const decl of r.declarations) {
+					if (decl.value.kind !== "interpolated") continue;
+					if (decl.value.parts.some((p) => p.kind === "slot" && p.slotId === mapped)) return decl;
+				}
+				return null;
+			})();
+			if (existingSlotDecl) {
+				existingSlotDecl.sourceOrder ??= rawSourceOrder++;
+				return false;
+			}
+			const targetRule = ensureRecoveredRule(selector, recoveryAtRules);
 			const decl = {
 				property: "",
 				value: {
@@ -10099,7 +10875,8 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 					}]
 				},
 				important: false,
-				valueRaw: placeholder
+				valueRaw: placeholder,
+				sourceOrder: rawSourceOrder++
 			};
 			if (shouldPreserveRawDeclarationPosition) {
 				const rawDeclarationCount = rawDeclarationCountByRule.get(targetRule) ?? 0;
@@ -13266,6 +14043,10 @@ function isNumericStylexExpression(value, options = {}) {
 	if (!value) return false;
 	if (value.type === "NumericLiteral" || value.type === "Literal" && typeof value.value === "number") return true;
 	if (value.type === "Identifier") return options.numericIdentifiers?.has(value.name) ?? false;
+	if (value.type === "MemberExpression") {
+		const rootName = memberExpressionRootIdentifier(value);
+		return rootName ? options.numericIdentifiers?.has(rootName) ?? false : false;
+	}
 	if (value.type === "UnaryExpression") return (value.operator === "-" || value.operator === "+") && isNumericStylexExpression(value.argument, options);
 	if (value.type === "BinaryExpression") return [
 		"+",
@@ -13283,17 +14064,170 @@ function isNumericStylexExpression(value, options = {}) {
 function isExpressionNode(value) {
 	return Boolean(value && typeof value === "object" && typeof value.type === "string");
 }
+function memberExpressionRootIdentifier(value) {
+	if (value.type === "Identifier") return value.name;
+	if (value.type !== "MemberExpression") return null;
+	return memberExpressionRootIdentifier(value.object);
+}
+//#endregion
+//#region src/internal/utilities/stylex-import-source.ts
+/**
+* Matches StyleX sidecar/token module sources like "./tokens.stylex" or
+* "../vars.stylex.ts". By StyleX convention these modules only export
+* `defineVars`/`defineConsts` values and plain constants — never components —
+* so they can be ignored when tracing styled-component dependencies.
+*/
+function isStylexImportSource(source) {
+	return /\.stylex(?:\.[cm]?[jt]sx?)?$/u.test(source);
+}
+//#endregion
+//#region src/internal/utilities/stylex-numeric-imports.ts
+/**
+* Resolves local `.stylex` imports whose exported values are proven numeric.
+*/
+function collectNumericStylexImportBindings(args) {
+	const identifiers = /* @__PURE__ */ new Set();
+	const exportCache = /* @__PURE__ */ new Map();
+	for (const binding of args.bindings) {
+		if (!isStylexImportSource(binding.source.value)) continue;
+		const cacheKey = `${binding.source.kind}\0${binding.source.value}`;
+		let numericExports = exportCache.get(cacheKey);
+		if (!numericExports) {
+			numericExports = collectNumericStylexExportNames(args.j, args.filePath, binding.source);
+			exportCache.set(cacheKey, numericExports);
+		}
+		if (numericExports.has(binding.importedName)) identifiers.add(binding.localName);
+	}
+	return identifiers;
+}
+function resolveStylexImportFile(filePath, source) {
+	const sourceValue = source.value;
+	if (!isStylexImportSource(sourceValue)) return null;
+	if (source.kind === "specifier" && !sourceValue.startsWith(".")) return null;
+	const basePath = source.kind === "absolutePath" || isAbsolute(sourceValue) ? sourceValue : join(dirname(filePath), sourceValue);
+	return (/\.[cm]?[jt]sx?$/.test(basePath) ? [basePath] : [
+		`${basePath}.ts`,
+		`${basePath}.tsx`,
+		`${basePath}.js`,
+		`${basePath}.jsx`
+	]).find((candidate) => existsSync(candidate)) ?? null;
+}
+function collectNumericStylexExportNames(j, filePath, source) {
+	const resolvedPath = resolveStylexImportFile(filePath, source);
+	if (!resolvedPath) return /* @__PURE__ */ new Set();
+	let root;
+	try {
+		root = j(readFileSync(resolvedPath, "utf8"));
+	} catch {
+		return /* @__PURE__ */ new Set();
+	}
+	const localNumericBindings = /* @__PURE__ */ new Map();
+	const exportedNumericNames = /* @__PURE__ */ new Set();
+	root.find(j.VariableDeclarator).forEach((path) => {
+		if (!isImmutableTopLevelVariableDeclaratorPath$1(path)) return;
+		const id = path.node.id;
+		if (id?.type !== "Identifier" || !id.name) return;
+		localNumericBindings.set(id.name, isNumericStylexExportValue(path.node.init));
+	});
+	root.find(j.ExportNamedDeclaration).forEach((path) => {
+		const declaration = path.node.declaration;
+		if (declaration?.type === "VariableDeclaration") {
+			const variableDeclaration = declaration;
+			for (const decl of variableDeclaration.declarations ?? []) {
+				const id = decl.id;
+				if (id?.type === "Identifier" && id.name && isNumericStylexExportValue(decl.init)) exportedNumericNames.add(id.name);
+			}
+		}
+		for (const specifier of path.node.specifiers ?? []) {
+			const localName = exportSpecifierLocalName(specifier);
+			const exportedName = exportSpecifierExportedName(specifier);
+			if (localName && exportedName && localNumericBindings.get(localName) === true) exportedNumericNames.add(exportedName);
+		}
+	});
+	root.find(j.ExportDefaultDeclaration).forEach((path) => {
+		if (isNumericStylexExportValue(path.node.declaration)) exportedNumericNames.add("default");
+	});
+	return exportedNumericNames;
+}
+function exportSpecifierLocalName(specifier) {
+	return specifier.local?.name ?? specifier.local?.value ?? null;
+}
+function exportSpecifierExportedName(specifier) {
+	return specifier.exported?.name ?? specifier.exported?.value ?? null;
+}
+function isNumericStylexExportValue(value) {
+	if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+	const node = value;
+	if (node.type === "NumericLiteral" || node.type === "Literal" && typeof node.value === "number") return true;
+	if (node.type === "UnaryExpression") return (node.operator === "-" || node.operator === "+") && isNumericStylexExportValue(node.argument);
+	if (node.type === "TSAsExpression" || node.type === "TSSatisfiesExpression" || node.type === "TSNonNullExpression" || node.type === "ParenthesizedExpression") return isNumericStylexExportValue(node.expression);
+	if (node.type === "CallExpression" && isStylexDefineConstsCall(node.callee)) return isNumericStylexExportValue(node.arguments?.[0]);
+	if (node.type !== "ObjectExpression" || !Array.isArray(node.properties)) return false;
+	return node.properties.every((property) => {
+		if (!property || typeof property !== "object" || Array.isArray(property)) return false;
+		const prop = property;
+		return (prop.type === "Property" || prop.type === "ObjectProperty") && isNumericStylexExportValue(prop.value);
+	});
+}
+function isStylexDefineConstsCall(callee) {
+	if (!callee || typeof callee !== "object" || Array.isArray(callee)) return false;
+	const node = callee;
+	if (node.type === "Identifier") return node.name === "defineConsts";
+	return node.type === "MemberExpression" && node.computed !== true && node.property?.type === "Identifier" && node.property.name === "defineConsts";
+}
+function isImmutableTopLevelVariableDeclaratorPath$1(path) {
+	const declaration = path.parentPath?.node;
+	if (declaration?.type !== "VariableDeclaration" || declaration.kind !== "const") return false;
+	let current = path.parentPath;
+	while (current && typeof current === "object") {
+		const node = current.node;
+		if (node?.type === "Program") return true;
+		if (node?.type === "FunctionDeclaration" || node?.type === "FunctionExpression" || node?.type === "ArrowFunctionExpression" || node?.type === "ClassDeclaration" || node?.type === "ClassExpression") return false;
+		current = current.parentPath;
+	}
+	return false;
+}
 //#endregion
 //#region src/internal/lower-rules/inline-styles.ts
 function getImportedStylexIdentifiers(importMap, resolverImports) {
 	const identifiers = /* @__PURE__ */ new Set();
-	for (const [localName, importEntry] of importMap) if (importEntry?.source?.value?.includes(".stylex")) identifiers.add(localName);
+	for (const [localName, importEntry] of importMap) {
+		const sourceValue = importEntry?.source?.value;
+		if (typeof sourceValue === "string" && isStylexImportSource(sourceValue)) identifiers.add(localName);
+	}
 	for (const importSpec of resolverImports.values()) {
-		if (!importSpec.from.value.includes(".stylex")) continue;
+		if (!isStylexImportSource(importSpec.from.value)) continue;
 		for (const name of importSpec.names) identifiers.add(name.local ?? name.imported);
 	}
 	return identifiers;
 }
+function getNumericImportedStylexIdentifiers(j, filePath, importMap, resolverImports) {
+	const bindings = [];
+	for (const [localName, importEntry] of importMap) {
+		const source = importEntry?.source;
+		const sourceValue = source?.value;
+		const importedName = importEntry?.importedName;
+		if (!source || typeof sourceValue !== "string" || !importedName) continue;
+		bindings.push({
+			localName,
+			importedName,
+			source: "kind" in source ? source : {
+				kind: "specifier",
+				value: sourceValue
+			}
+		});
+	}
+	for (const importSpec of resolverImports.values()) for (const name of importSpec.names) bindings.push({
+		localName: name.local ?? name.imported,
+		importedName: name.imported,
+		source: importSpec.from
+	});
+	return collectNumericStylexImportBindings({
+		j,
+		filePath,
+		bindings
+	});
+}
 function buildTemplateWithStaticParts(j, expr, prefix, suffix, multilineContext) {
 	if (!prefix && !suffix) return expr;
 	const staticValue = literalToStaticValue(expr);
@@ -13874,10 +14808,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
@@ -15045,6 +15982,7 @@ function exportedBindingDependsOnLocalNames(args) {
 	const targets = collectExportTargets(parsed, args.exportedName, args.includeDefault);
 	if (targets.localNames.size === 0 && targets.nodes.length === 0) return true;
 	const dependencyNames = expandLocalDependencyNames(parsed, args.localNames);
+	if (args.memberPath !== void 0 && args.memberPath.length > 0) return staticMemberDependsOnLocalNames(parsed, targets, args.memberPath, dependencyNames);
 	for (const localName of targets.localNames) {
 		if (dependencyNames.has(localName)) return true;
 		const node = findLocalBindingNode(parsed, localName);
@@ -15053,6 +15991,94 @@ function exportedBindingDependsOnLocalNames(args) {
 	for (const node of targets.nodes) if (nodeReferencesLocalNames(exportedNodeBody(node), dependencyNames)) return true;
 	return false;
 }
+/**
+* Dependency check for `Exported.Member` consumers: locate static member
+* assignments (`Root.Member = Value`, or `Member:` properties in the root's
+* object-literal / `Object.assign` initializer) and test the assigned values.
+* Returns true (dependent) when the member cannot be proven independent.
+*/
+function staticMemberDependsOnLocalNames(program, targets, memberPath, dependencyNames) {
+	const memberName = memberPath[0];
+	if (memberPath.length !== 1 || memberName === void 0 || targets.nodes.length > 0) return true;
+	const memberValues = collectStaticMemberValues(program, expandAliasNamesBothWays(program, targets.localNames), memberName);
+	if (memberValues.hasUnknownSource || memberValues.values.length === 0) return true;
+	return memberValues.values.some((value) => nodeReferencesLocalNames(value, dependencyNames));
+}
+/**
+* Expand a name set across identity aliases in both directions, so member
+* assignments written on any alias of the export (e.g. `CustomSelect.Option = X`
+* behind `export const Public = CustomSelect`) are found.
+*/
+function expandAliasNamesBothWays(program, initialNames) {
+	const aliases = collectIdentityAliases(program);
+	const expanded = new Set(initialNames);
+	let changed = true;
+	while (changed) {
+		changed = false;
+		for (const [aliasName, targetName] of aliases) if (expanded.has(aliasName) !== expanded.has(targetName)) {
+			expanded.add(aliasName);
+			expanded.add(targetName);
+			changed = true;
+		}
+	}
+	return expanded;
+}
+function collectStaticMemberValues(program, rootNames, memberName) {
+	const result = {
+		values: [],
+		hasUnknownSource: false
+	};
+	for (const stmt of programBody(program)) {
+		if (stmt.type !== "ExpressionStatement") continue;
+		const assignedValue = staticMemberAssignmentValue(stmt.expression, rootNames, memberName);
+		if (assignedValue) result.values.push(assignedValue);
+	}
+	for (const binding of localBindings(program)) if (rootNames.has(binding.name)) {
+		const bindingValues = objectLiteralMemberValues(unwrapTransparentExpression(binding.node), memberName);
+		result.values.push(...bindingValues.values);
+		result.hasUnknownSource ||= bindingValues.hasUnknownSource;
+	}
+	return result;
+}
+/** Value assigned by a `Root.Member = Value` statement, if `expression` is one. */
+function staticMemberAssignmentValue(expression, rootNames, memberName) {
+	if (expression?.type !== "AssignmentExpression" || expression.operator !== "=") return;
+	const left = expression.left;
+	if (left?.type !== "MemberExpression" || left.computed === true) return;
+	const objectName = nodeName(left.object);
+	const propertyName = nodeName(left.property);
+	if (!objectName || !rootNames.has(objectName) || propertyName !== memberName) return;
+	return expression.right;
+}
+/** `Member:` property values in an object-literal or `Object.assign(...)` initializer. */
+function objectLiteralMemberValues(init, memberName) {
+	const result = {
+		values: [],
+		hasUnknownSource: false
+	};
+	if (init.type === "ObjectExpression") collectObjectExpressionMemberValues(init, memberName, result);
+	else if (init.type === "CallExpression" && isObjectAssignCallee(init.callee)) for (const arg of astArray(init.arguments)) if (arg.type === "ObjectExpression") collectObjectExpressionMemberValues(arg, memberName, result);
+	else {
+		result.hasUnknownSource = true;
+		result.values = [];
+	}
+	return result;
+}
+function collectObjectExpressionMemberValues(objectNode, memberName, result) {
+	for (const property of astArray(objectNode.properties)) if ((property.type === "ObjectProperty" || property.type === "Property") && property.computed !== true && nodeName(property.key) === memberName) {
+		const value = property.value;
+		if (value) {
+			result.values = [value];
+			result.hasUnknownSource = false;
+		}
+	} else if (property.type === "SpreadElement" || property.type === "SpreadProperty") {
+		result.hasUnknownSource = true;
+		result.values = [];
+	}
+}
+function isObjectAssignCallee(callee) {
+	return callee?.type === "MemberExpression" && callee.computed !== true && nodeName(callee.object) === "Object" && nodeName(callee.property) === "assign";
+}
 function parseProgram$1(source) {
 	for (const parserName of ["tsx", "babel"]) try {
 		const ast = createPrepassParser(parserName).parse(source);
@@ -15300,8 +16326,10 @@ function detectCascadeConflictStep(ctx) {
 		if (decl.skipTransform) continue;
 		if (decl.base.kind !== "component") continue;
 		const baseIdent = decl.base.ident;
-		if (localStyledNames.has(baseIdent)) continue;
-		const importEntry = importMap.get(baseIdent);
+		const baseImportLocalName = rootLocalName(baseIdent);
+		const baseMemberPath = baseIdent.split(".").slice(1);
+		if (localStyledNames.has(baseIdent) || localStyledNames.has(baseImportLocalName)) continue;
+		const importEntry = importMap.get(baseImportLocalName);
 		if (!importEntry || importEntry.source.kind !== "absolutePath") continue;
 		if (skipImportedRoots) continue;
 		const importedPath = importEntry.source.value;
@@ -15309,17 +16337,36 @@ function detectCascadeConflictStep(ctx) {
 			path: importedPath,
 			importedName: importEntry.importedName
 		};
-		if (transformedComponents && transformedComponentExists(transformedComponents, definition.path, definition.importedName, definition.importedName === "default")) continue;
-		if (ctx.options.transformMode === "leavesOnly" && ctx.options.globalLeafKeys?.size) {
+		if (baseMemberPath.length === 0 && ctx.options.transformMode === "leavesOnly" && ctx.options.globalLeafKeys?.size) {
 			if (globalLeafKeyExists(ctx.options.globalLeafKeys, definition.path, definition.importedName, definition.importedName === "default")) continue;
 		}
 		const styledDefinitions = styledDefFiles && resolveStyledDefFile(definition.path, styledDefFiles) || scanFileForStyledDefs(definition.path, definition.importedName, ctx.options.resolveModule);
-		if (!styledDefinitions) continue;
-		if (transformedComponents && transformedComponentsHasPath(transformedComponents, styledDefinitions.path) && !bindingDependsOnStyledDefinitions({
-			...styledDefinitions,
-			names: unconvertedStyledDefinitionNames(styledDefinitions, transformedComponents)
-		}, definition.importedName)) continue;
-		if (canSkipCascadeForStylexExport(ctx, styledDefinitions, definition.importedName)) continue;
+		if (transformedComponents && transformedComponentExists(transformedComponents, definition.path, definition.importedName, definition.importedName === "default") && bindingIsIndependentOfRemainingStyledDefinitions(ctx, {
+			sourcePath: definition.path,
+			bindingName: definition.importedName,
+			memberPath: baseMemberPath,
+			styledDefinitions: styledDefinitions ? {
+				...styledDefinitions,
+				names: unconvertedStyledDefinitionNames(styledDefinitions, transformedComponents)
+			} : void 0
+		})) continue;
+		if (!styledDefinitions) {
+			if (bindingIsIndependentOfRemainingStyledDefinitions(ctx, {
+				sourcePath: definition.path,
+				bindingName: definition.importedName,
+				memberPath: baseMemberPath,
+				styledDefinitions: void 0
+			})) continue;
+		} else if (transformedComponents && transformedComponentsHasPath(transformedComponents, styledDefinitions.path) && bindingIsIndependentOfRemainingStyledDefinitions(ctx, {
+			sourcePath: styledDefinitions.path,
+			bindingName: definition.importedName,
+			memberPath: baseMemberPath,
+			styledDefinitions: {
+				...styledDefinitions,
+				names: unconvertedStyledDefinitionNames(styledDefinitions, transformedComponents)
+			}
+		})) continue;
+		if (styledDefinitions && canSkipCascadeForStylexExport(ctx, styledDefinitions, definition.importedName, baseMemberPath)) continue;
 		ctx.warnings.push({
 			severity: "warning",
 			type: CASCADE_CONFLICT_WARNING,
@@ -15328,7 +16375,7 @@ function detectCascadeConflictStep(ctx) {
 				component: decl.localName,
 				base: baseIdent,
 				importedPath,
-				definitionPath: styledDefinitions.path
+				definitionPath: styledDefinitions?.path ?? definition.path
 			}
 		});
 		foundCascadeConflict = true;
@@ -15348,6 +16395,19 @@ function resolveImportedDefinition(ctx, importedPath, importedName) {
 		importedName: resolved.exportedName
 	} : null;
 }
+/**
+* Import sources the codemod itself emits into transformed files (the adapter's
+* style-merger helper). These never carry styled-component exports.
+*/
+function generatedImportSources(ctx) {
+	const sources = /* @__PURE__ */ new Set();
+	const mergerSource = ctx.adapter.styleMerger?.importSource?.value;
+	if (typeof mergerSource === "string" && mergerSource.length > 0) sources.add(mergerSource);
+	return sources;
+}
+function rootLocalName(componentName) {
+	return componentName.split(".")[0] ?? componentName;
+}
 /** Common TypeScript/JavaScript file extensions to try when matching import paths to styledDefFiles keys. */
 const EXTENSIONS = [
 	".tsx",
@@ -15432,17 +16492,19 @@ function componentExportExistsByDirectScan(importedPath, bindingName) {
 	}
 	return false;
 }
-function canSkipCascadeForStylexExport(ctx, styledDefinitions, bindingName) {
-	return componentExportExists(ctx.options.crossFileInfo?.stylexComponentFiles, styledDefinitions.path, bindingName) && bindingIsIndependentOfStyledDefinitions(ctx, styledDefinitions, bindingName);
+function canSkipCascadeForStylexExport(ctx, styledDefinitions, bindingName, memberPath) {
+	return componentExportExists(ctx.options.crossFileInfo?.stylexComponentFiles, styledDefinitions.path, bindingName) && bindingIsIndependentOfStyledDefinitions(ctx, styledDefinitions, bindingName, memberPath);
 }
-function bindingIsIndependentOfStyledDefinitions(ctx, styledDefinitions, bindingName) {
-	if (bindingDependsOnStyledDefinitions(styledDefinitions, bindingName)) return false;
+function bindingIsIndependentOfStyledDefinitions(ctx, styledDefinitions, bindingName, memberPath) {
+	if (bindingDependsOnStyledDefinitions(styledDefinitions, bindingName, memberPath)) return false;
 	return !bindingDependsOnImportedStyledDefinitions({
 		bindingName,
+		memberPath,
 		sourcePath: styledDefinitions.path,
 		styledDefFiles: ctx.options.crossFileInfo?.styledDefFiles,
 		stylexComponentFiles: ctx.options.crossFileInfo?.stylexComponentFiles,
-		resolveModule: ctx.options.resolveModule
+		resolveModule: ctx.options.resolveModule,
+		ignoredImportSources: generatedImportSources(ctx)
 	});
 }
 function transformedComponentExists(transformedComponents, importedPath, bindingName, allowDefaultFallback) {
@@ -15466,15 +16528,31 @@ function transformedNamesForPath(transformedComponents, filePath) {
 		if (transformedNames) return transformedNames;
 	}
 }
-function bindingDependsOnStyledDefinitions(styledDefinitions, bindingName) {
+function bindingDependsOnStyledDefinitions(styledDefinitions, bindingName, memberPath = []) {
+	if (styledDefinitions.names.size === 0) return false;
 	const source = tryReadFile(styledDefinitions.path);
 	return source ? exportedBindingDependsOnLocalNames({
 		source,
 		exportedName: bindingName,
 		includeDefault: bindingName === "default",
-		localNames: styledDefinitions.names
+		localNames: styledDefinitions.names,
+		memberPath
 	}) : true;
 }
+function bindingIsIndependentOfRemainingStyledDefinitions(ctx, args) {
+	if (args.styledDefinitions && bindingDependsOnStyledDefinitions(args.styledDefinitions, args.bindingName, args.memberPath)) return false;
+	if (!args.styledDefinitions && args.memberPath.length === 0) return true;
+	if (!args.styledDefinitions && !tryReadFile(args.sourcePath)) return true;
+	return !bindingDependsOnImportedStyledDefinitions({
+		bindingName: args.bindingName,
+		memberPath: args.memberPath,
+		sourcePath: args.sourcePath,
+		styledDefFiles: ctx.options.crossFileInfo?.styledDefFiles,
+		stylexComponentFiles: ctx.options.crossFileInfo?.stylexComponentFiles,
+		resolveModule: ctx.options.resolveModule,
+		ignoredImportSources: generatedImportSources(ctx)
+	});
+}
 function bindingDependsOnImportedStyledDefinitions(args) {
 	const visitKey = `${args.sourcePath}:${args.bindingName}`;
 	if (args.visited?.has(visitKey)) return true;
@@ -15491,18 +16569,20 @@ function bindingDependsOnImportedStyledDefinitions(args) {
 		source,
 		exportedName: args.bindingName,
 		includeDefault: args.bindingName === "default",
-		localNames: importedStyledNames
+		localNames: importedStyledNames,
+		memberPath: args.memberPath ?? []
 	});
 }
 function collectImportedStyledLocalNames(args) {
 	const source = tryReadFile(args.sourcePath);
 	const program = source ? parseProgram(source) : null;
-	if (!program) return null;
+	if (!source || !program) return null;
 	const importNodes = [];
 	walkForImportsAndTemplates(program, importNodes, []);
 	const importMap = buildImportMapFromNodes(importNodes);
 	const importedStyledNames = /* @__PURE__ */ new Set();
 	for (const [localName, importEntry] of importMap) {
+		if (args.ignoredImportSources?.has(importEntry.source) || isStylexImportSource(importEntry.source)) continue;
 		if (!args.resolveModule) {
 			if (isRelativeSpecifier(importEntry.source)) importedStyledNames.add(localName);
 			continue;
@@ -15513,37 +16593,59 @@ function collectImportedStyledLocalNames(args) {
 			continue;
 		}
 		const styledDefinitions = args.styledDefFiles && resolveStyledDefFile(resolvedPath, args.styledDefFiles) || scanFileForStyledDefs(resolvedPath, importEntry.importedName, args.resolveModule);
+		const memberPath = exportedMemberReferencesImportedRoot({
+			source,
+			bindingName: args.bindingName,
+			memberPath: args.memberPath ?? [],
+			localName
+		}) ? args.memberPath : void 0;
 		recordImportedStyledNameIfNeeded(importedStyledNames, localName, {
 			bindingName: importEntry.importedName,
+			memberPath,
 			styledDefinitions,
 			styledDefFiles: args.styledDefFiles,
 			stylexComponentFiles: args.stylexComponentFiles,
 			resolveModule: args.resolveModule,
+			ignoredImportSources: args.ignoredImportSources,
 			visited: args.visited
 		});
 	}
 	return importedStyledNames;
 }
+function exportedMemberReferencesImportedRoot(args) {
+	if (args.memberPath.length === 0) return false;
+	return exportedBindingDependsOnLocalNames({
+		source: args.source,
+		exportedName: args.bindingName,
+		includeDefault: args.bindingName === "default",
+		localNames: new Set([args.localName]),
+		memberPath: args.memberPath
+	});
+}
 function recordImportedStyledNameIfNeeded(importedStyledNames, localName, args) {
 	if (importedBindingShouldCountAsStyled(args)) importedStyledNames.add(localName);
 }
 function importedBindingShouldCountAsStyled(args) {
 	return !!args.styledDefinitions && !importedBindingIsIndependentStylex({
 		bindingName: args.bindingName,
+		memberPath: args.memberPath,
 		styledDefinitions: args.styledDefinitions,
 		styledDefFiles: args.styledDefFiles,
 		stylexComponentFiles: args.stylexComponentFiles,
 		resolveModule: args.resolveModule,
+		ignoredImportSources: args.ignoredImportSources,
 		visited: args.visited
 	});
 }
 function importedBindingIsIndependentStylex(args) {
-	return componentExportExists(args.stylexComponentFiles, args.styledDefinitions.path, args.bindingName) && !bindingDependsOnStyledDefinitions(args.styledDefinitions, args.bindingName) && !bindingDependsOnImportedStyledDefinitions({
+	return componentExportExists(args.stylexComponentFiles, args.styledDefinitions.path, args.bindingName) && !bindingDependsOnStyledDefinitions(args.styledDefinitions, args.bindingName, args.memberPath ?? []) && !bindingDependsOnImportedStyledDefinitions({
 		bindingName: args.bindingName,
+		memberPath: args.memberPath,
 		sourcePath: args.styledDefinitions.path,
 		styledDefFiles: args.styledDefFiles,
 		stylexComponentFiles: args.stylexComponentFiles,
 		resolveModule: args.resolveModule,
+		ignoredImportSources: args.ignoredImportSources,
 		visited: args.visited
 	});
 }
@@ -17297,7 +18399,7 @@ function emitStylesAndImports(ctx) {
 	}
 	const nonEmptyStyleEntries = [...resolvedStyleObjects.entries()].filter(([k]) => !emptyStyleKeys.has(k) && !preservedCssHelperStyleKeys.has(k));
 	const buildStyleEntryProperty = ([k, v]) => {
-		const prop = j.property("init", j.identifier(k), v && typeof v === "object" && !isAstNode$1(v) ? objectToAst(j, v) : literalToAst(j, v));
+		const prop = j.property("init", j.identifier(k), v && typeof v === "object" && !isAstNode$1(v) ? objectToAst(j, normalizeStyleObjectForEmission(v)) : literalToAst(j, v));
 		const comments = styleKeyToComments.get(k);
 		if (comments && comments.length > 0) prop.comments = comments.map((c) => ({
 			...c,
@@ -17396,10 +18498,13 @@ function emitStylesAndImports(ctx) {
 function emitVariantDimensionDecl(j, dimension) {
 	const properties = Object.entries(dimension.variants).map(([variantValue, styles]) => {
 		const key = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(variantValue) ? j.identifier(variantValue) : isFiniteNumericString(variantValue) ? j.literal(Number(variantValue)) : j.literal(variantValue);
-		return j.property("init", key, styles && typeof styles === "object" && !isAstNode$1(styles) ? objectToAst(j, styles) : literalToAst(j, styles));
+		return j.property("init", key, styles && typeof styles === "object" && !isAstNode$1(styles) ? objectToAst(j, normalizeStyleObjectForEmission(styles)) : literalToAst(j, styles));
 	});
 	return j.variableDeclaration("const", [j.variableDeclarator(j.identifier(dimension.variantObjectName), j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("create")), [j.objectExpression(properties)]))]);
 }
+function normalizeStyleObjectForEmission(styleObj) {
+	return expandStyleObjectShorthands(styleObj);
+}
 /**
 * Returns true when `s` is a canonical numeric string (round-trips through Number).
 * Rejects non-canonical forms like "08", "0x10", "1e2" where `String(Number(s)) !== s`,
@@ -17954,7 +19059,28 @@ function normalizeResolvedNumericPxValues(ctx) {
 	for (const [key, value] of ctx.resolvedStyleObjects) ctx.resolvedStyleObjects.set(key, normalizeStylexNumericPxValue(ctx, value, void 0, rootNumericIdentifiers));
 }
 function collectRootNumericConstantNames(ctx) {
-	const names = /* @__PURE__ */ new Set();
+	const importBindings = [];
+	ctx.root.find(ctx.j.ImportDeclaration).forEach((path) => {
+		const sourceValue = path.node.source.value;
+		if (typeof sourceValue !== "string" || !isStylexImportSource(sourceValue)) return;
+		for (const specifier of path.node.specifiers ?? []) {
+			const localName = specifier.local?.name;
+			const importedName = importSpecifierExportName(specifier);
+			if (localName && importedName) importBindings.push({
+				localName,
+				importedName,
+				source: {
+					kind: "specifier",
+					value: sourceValue
+				}
+			});
+		}
+	});
+	const names = collectNumericStylexImportBindings({
+		j: ctx.j,
+		filePath: ctx.file.path,
+		bindings: importBindings
+	});
 	ctx.root.find(ctx.j.VariableDeclarator).forEach((path) => {
 		if (!isImmutableTopLevelVariableDeclaratorPath(path)) return;
 		const node = path.node;
@@ -17964,6 +19090,12 @@ function collectRootNumericConstantNames(ctx) {
 	});
 	return names;
 }
+function importSpecifierExportName(specifier) {
+	const node = specifier;
+	if (node.type === "ImportDefaultSpecifier") return "default";
+	if (node.type !== "ImportSpecifier") return null;
+	return node.imported?.name ?? node.imported?.value ?? null;
+}
 function isImmutableTopLevelVariableDeclaratorPath(path) {
 	const declaration = path.parentPath?.node;
 	if (declaration?.type !== "VariableDeclaration" || declaration.kind !== "const") return false;
@@ -17998,6 +19130,10 @@ function isNumericExpressionNode(value, numericIdentifiers) {
 	const node = value;
 	if (node.type === "NumericLiteral" || node.type === "Literal" && typeof node.value === "number") return true;
 	if (node.type === "Identifier") return Boolean(node.name && numericIdentifiers.has(node.name));
+	if (node.type === "MemberExpression") {
+		const rootName = memberExpressionRootName(node);
+		return Boolean(rootName && numericIdentifiers.has(rootName));
+	}
 	if (node.type === "UnaryExpression") return (node.operator === "-" || node.operator === "+") && isNumericExpressionNode(node.argument, numericIdentifiers);
 	if (node.type === "BinaryExpression") return [
 		"+",
@@ -18010,6 +19146,11 @@ function isNumericExpressionNode(value, numericIdentifiers) {
 	if (node.type === "ParenthesizedExpression" || node.type === "TSAsExpression") return isNumericExpressionNode(node.expression, numericIdentifiers);
 	return false;
 }
+function memberExpressionRootName(node) {
+	if (node.type === "Identifier") return node.name ?? null;
+	if (node.type !== "MemberExpression" || !node.object || typeof node.object !== "object") return null;
+	return memberExpressionRootName(node.object);
+}
 function normalizeStylexNumericPxValue(ctx, value, currentProp, numericIdentifiers) {
 	if (!value || typeof value !== "object") return value;
 	if (Array.isArray(value)) return value.map((entry) => normalizeStylexNumericPxValue(ctx, entry, currentProp, numericIdentifiers));
@@ -18763,7 +19904,7 @@ function groupVariantBucketsIntoDimensions(variantBuckets, variantStyleKeys, bas
 		}
 		const { conditionWhen } = conditionGroup;
 		for (const v of variants) {
-			variantMap[v.value] = v.styles;
+			variantMap[v.value] = expandStyleObjectShorthands(v.styles);
 			for (const cssProp of Object.keys(v.styles)) allOverriddenProps.add(cssProp);
 		}
 		const defaultStyles = {};
@@ -18775,10 +19916,10 @@ function groupVariantBucketsIntoDimensions(variantBuckets, variantStyleKeys, bas
 			const remainingValues = unionValues.map(String).filter((v) => !explicitValues.has(v));
 			if (remainingValues.length === 1 && remainingValues[0]) {
 				defaultValue = remainingValues[0];
-				variantMap[defaultValue] = defaultStyles;
+				variantMap[defaultValue] = expandStyleObjectShorthands(defaultStyles);
 			} else {
 				defaultValue = "default";
-				variantMap["default"] = defaultStyles;
+				variantMap["default"] = expandStyleObjectShorthands(defaultStyles);
 			}
 		}
 		const firstVariantForProps = variants[0];
@@ -18816,7 +19957,7 @@ function groupVariantBucketsIntoDimensions(variantBuckets, variantStyleKeys, bas
 					else merged[cssProp] = boolValue;
 				}
 				for (const [cssProp, boolValue] of Object.entries(overlappingBoolStyles)) if (!(cssProp in merged)) merged[cssProp] = boolValue;
-				disabledVariantMap[variantValue] = merged;
+				disabledVariantMap[variantValue] = expandStyleObjectShorthands(merged);
 			}
 			dimensions.push({
 				propName,
@@ -19802,7 +20943,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);
@@ -19817,7 +20959,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);
@@ -19833,7 +20976,8 @@ function buildVariantStyleExprs(opts) {
 			when,
 			destructureProps,
 			booleanProps,
-			...knownProps ? { knownProps } : {}
+			...knownProps ? { knownProps } : {},
+			nonPropRoots: d.nonPropConditionRoots
 		});
 		const styleExpr = styleRef(j, stylesIdentifier, variantKey);
 		pushExpr(emitter.makeConditionalStyleExpr({
@@ -23718,7 +24862,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);
 		}
@@ -23864,7 +25009,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);
 		}
@@ -23875,7 +25021,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);
 			}
@@ -23909,7 +25056,8 @@ function emitShouldForwardPropWrappers(ctx) {
 					when: p.conditionWhen,
 					destructureProps: destructureParts,
 					booleanProps,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				expr = emitter.makeConditionalStyleExpr({
 					cond,
@@ -24208,7 +25356,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);
 			}
@@ -24222,7 +25371,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);
 			}
@@ -24817,7 +25967,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 ?? []) {
@@ -25497,204 +26647,6 @@ function getTransformedComponentNames(ctx) {
 	return names && names.length > 0 ? names : void 0;
 }
 //#endregion
-//#region src/internal/lower-rules/variant-utils.ts
-/**
-* Inverts a "when" condition string for the opposite variant branch.
-* E.g., "!$active" -> "$active", "$x === true" -> "$x !== true"
-*/
-function invertWhen(when) {
-	if (when.startsWith("!(") && when.endsWith(")")) return when.slice(2, -1);
-	if (when.startsWith("!")) return when.slice(1);
-	const match = when.match(/^(.+)\s+(===|!==)\s+(.+)$/);
-	if (match) {
-		const [, propName, op, rhs] = match;
-		return `${propName} ${op === "===" ? "!==" : "==="} ${rhs}`;
-	}
-	if (!when.includes(" ")) return `!${when}`;
-	return null;
-}
-function buildPseudoMediaPropValue(args) {
-	const { j, valueExpr, pseudos, media } = args;
-	const pseudoList = pseudos ?? [];
-	const hasPseudos = pseudoList.length > 0;
-	if (!media && !hasPseudos) return valueExpr;
-	if (media && hasPseudos) {
-		const pseudoProps = pseudoList.map((ps) => j.property("init", j.literal(ps), j.objectExpression([j.property("init", j.identifier("default"), j.literal(null)), j.property("init", j.literal(media), valueExpr)])));
-		return j.objectExpression([j.property("init", j.identifier("default"), j.literal(null)), ...pseudoProps]);
-	}
-	if (media) return j.objectExpression([j.property("init", j.identifier("default"), j.literal(null)), j.property("init", j.literal(media), valueExpr)]);
-	const pseudoProps = pseudoList.map((ps) => j.property("init", j.literal(ps), valueExpr));
-	return j.objectExpression([j.property("init", j.identifier("default"), j.literal(null)), ...pseudoProps]);
-}
-const createPropTestHelpers = (bindings) => {
-	const paramName = bindings.kind === "simple" ? bindings.paramName : null;
-	const getMemberExpressionSource = (node) => {
-		const info = extractRootAndPath(node);
-		if (!info) return null;
-		if (info.path.length === 0) return info.rootName;
-		return `${info.rootName}.${info.path.join(".")}`;
-	};
-	const readPropAccess = (node) => {
-		const info = extractRootAndPath(node);
-		if (!info) return null;
-		if (paramName && info.rootName === paramName) {
-			if (info.path.length === 0) return null;
-			const [propRoot, ...rest] = info.path;
-			if (!propRoot) return null;
-			if (propRoot === "theme") return null;
-			return {
-				propName: propRoot,
-				whenName: [propRoot, ...rest].join(".")
-			};
-		}
-		if (bindings.kind === "destructured") {
-			const propName = resolveIdentifierToPropName(info.rootNode, bindings);
-			if (!propName) return null;
-			return {
-				propName,
-				whenName: info.path.length > 0 ? `${propName}.${info.path.join(".")}` : propName
-			};
-		}
-		return null;
-	};
-	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,
-				propName: propAccess.propName
-			} : null;
-		}
-		if (isMemberExpression(test)) {
-			const propAccess = readPropAccess(test);
-			return propAccess ? {
-				when: propAccess.whenName,
-				propName: propAccess.propName
-			} : null;
-		}
-		if (test.type === "UnaryExpression" && test.operator === "!" && test.argument) {
-			const propAccess = readPropAccess(test.argument);
-			return propAccess ? {
-				when: `!${propAccess.whenName}`,
-				propName: propAccess.propName
-			} : null;
-		}
-		if (test.type === "BinaryExpression" && (test.operator === "===" || test.operator === "!==")) {
-			const left = test.left;
-			const getRhsValue = () => {
-				const rhsTyped = test.right;
-				if (rhsTyped.type === "Identifier" && rhsTyped.name === "undefined") return "undefined";
-				const rhs = literalToStaticValue(test.right);
-				if (rhs === null) return getMemberExpressionSource(test.right);
-				return JSON.stringify(rhs);
-			};
-			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}`,
-					propName: propAccess.propName
-				};
-			}
-			if (isMemberExpression(left)) {
-				const propAccess = readPropAccess(left);
-				const rhsValue = getRhsValue();
-				if (!propAccess || rhsValue === null) return null;
-				return {
-					when: `${propAccess.whenName} ${test.operator} ${rhsValue}`,
-					propName: propAccess.propName
-				};
-			}
-		}
-		return null;
-	};
-	/**
-	* Parse chained && / || conditions, returning a combined TestInfo.
-	*
-	* Supported patterns:
-	*   props.a && props.b           → { when: 'a && b' }
-	*   props.$a || props.$b         → { when: '$a || $b' }
-	*   props.$a && (props.$b || $c) → { when: '$a && $b || $c' }
-	*   !(props.$a || props.$b)      → { when: '!($a || $b)' }
-	*
-	* Bails (returns null) on || wrapping && children to avoid ambiguous
-	* serialization: "a && b || c" would be reparsed as "a && (b || c)"
-	* by parseVariantWhenToAst, which splits on && first.
-	*/
-	const parseChainedTestInfo = (test) => {
-		const simple = parseTestInfo(test);
-		if (simple) return simple;
-		if (!test || typeof test !== "object") return null;
-		if (test.type === "UnaryExpression" && test.operator === "!" && test.argument) {
-			const innerInfo = parseChainedTestInfo(test.argument);
-			if (innerInfo) {
-				const allProps = innerInfo.allPropNames ?? (innerInfo.propName ? [innerInfo.propName] : []);
-				return {
-					when: `!(${innerInfo.when})`,
-					propName: innerInfo.propName,
-					allPropNames: allProps
-				};
-			}
-		}
-		if (test.type === "LogicalExpression" && (test.operator === "&&" || test.operator === "||")) {
-			const leftInfo = parseChainedTestInfo(test.left);
-			const rightInfo = parseChainedTestInfo(test.right);
-			if (leftInfo && rightInfo) {
-				if (test.operator === "||" && (leftInfo.when.includes(" && ") || rightInfo.when.includes(" && "))) return null;
-				if (hasOperatorInsideParens(leftInfo.when, test.operator) || hasOperatorInsideParens(rightInfo.when, test.operator)) return null;
-				const combinedWhen = `${leftInfo.when} ${test.operator} ${rightInfo.when}`;
-				const leftProps = leftInfo.allPropNames ?? (leftInfo.propName ? [leftInfo.propName] : []);
-				const rightProps = rightInfo.allPropNames ?? (rightInfo.propName ? [rightInfo.propName] : []);
-				const allPropNames = [...new Set([...leftProps, ...rightProps])];
-				return {
-					when: combinedWhen,
-					propName: rightInfo.propName,
-					allPropNames
-				};
-			}
-		}
-		return null;
-	};
-	return {
-		parseTestInfo,
-		parseChainedTestInfo
-	};
-};
-const createVariantApplier = (args) => {
-	const { decl, variantBuckets, variantStyleKeys } = args;
-	const dropAllTestInfoProps = (testInfo) => {
-		const propsToCheck = testInfo.allPropNames ?? (testInfo.propName ? [testInfo.propName] : []);
-		for (const prop of propsToCheck) if (prop && !prop.startsWith("$")) ensureShouldForwardPropDrop(decl, prop);
-	};
-	return (testInfo, consStyle) => {
-		const when = testInfo.when;
-		const existingBucket = variantBuckets.get(when);
-		const nextBucket = existingBucket ? { ...existingBucket } : {};
-		mergeStyleObjects(nextBucket, consStyle);
-		variantBuckets.set(when, nextBucket);
-		variantStyleKeys[when] ??= styleKeyWithSuffix(decl.styleKey, when);
-		dropAllTestInfoProps(testInfo);
-	};
-};
-/**
-* Returns true if the string contains the given operator (`&&` or `||`)
-* inside parenthesized groups. Used to detect when strings like
-* `"!($b && $c)"` or `"!($b || $c)"` that would be broken by the naive
-* split in `parseVariantWhenToAst`.
-*/
-function hasOperatorInsideParens(when, operator) {
-	let depth = 0;
-	for (let i = 0; i < when.length; i++) {
-		const ch = when[i];
-		if (ch === "(") depth++;
-		else if (ch === ")") depth--;
-		else if (depth > 0 && when[i] === operator[0] && when.startsWith(operator, i)) return true;
-	}
-	return false;
-}
-//#endregion
 //#region src/internal/lower-rules/slot-utils.ts
 /**
 * Locate the slot interpolation in a `${...}` value and return its
@@ -26615,43 +27567,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) {
@@ -26659,12 +27615,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
 					}];
@@ -26689,7 +27645,7 @@ function tryResolveConditionalValue(node, ctx) {
 				cons,
 				alt,
 				alternate,
-				truthyWhen: resolvedProp
+				truthyWhen: resolvedWhens.truthy
 			});
 			if (oneSided) return oneSided;
 			if (!cons || !alt) return buildRuntimeCallResult();
@@ -26766,6 +27722,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);
@@ -26774,7 +27732,7 @@ function tryResolveConditionalCssBlock(node, ctx) {
 			type: "splitVariants",
 			variants: [{
 				nameHint: "truthy",
-				when: testProp,
+				when: whens.truthy,
 				style
 			}]
 		};
@@ -26782,7 +27740,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) {
@@ -27234,6 +28192,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
 /**
@@ -28666,7 +29653,7 @@ function tryHandleInterpolatedStringValue(args) {
 			if (!entries.length) return false;
 			for (const entry of entries) {
 				const usesExpr = entry.value.includes(`__SC_EXPR_${slotId}__`);
-				setValue(entry.prop, usesExpr ? maybeOmitPxUnitFromStylexValue(j, tl, entry.prop, d.important) : 0);
+				setValue(entry.prop, usesExpr ? maybeOmitPxUnitFromStylexValue(j, tl, entry.prop, d.important, { numericIdentifiers: args.numericIdentifiers }) : 0);
 			}
 			return true;
 		}
@@ -28733,7 +29720,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));
+		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
@@ -32841,7 +33830,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
 			});
@@ -33270,6 +34264,7 @@ function createDeclProcessingState(state, decl) {
 	const styleFnDecls = /* @__PURE__ */ new Map();
 	const attrBuckets = /* @__PURE__ */ new Map();
 	const observedVariantFallbackFns = /* @__PURE__ */ new Map();
+	let currentDeclarationSourceOrder;
 	const inlineStyleProps = [];
 	const localVarValues = /* @__PURE__ */ new Map();
 	const cssHelperPropValues = /* @__PURE__ */ new Map();
@@ -33333,7 +34328,10 @@ function createDeclProcessingState(state, decl) {
 	const applyVariant = createVariantApplier({
 		decl,
 		variantBuckets,
-		variantStyleKeys
+		variantStyleKeys,
+		baseStyleObj: styleObj,
+		conditionStyleObjs: [perPropPseudo, perPropMedia],
+		getCurrentSourceOrder: () => currentDeclarationSourceOrder
 	});
 	const dropAllTestInfoProps = (testInfo) => {
 		const propsToCheck = testInfo.allPropNames ?? (testInfo.propName ? [testInfo.propName] : []);
@@ -33484,6 +34482,10 @@ function createDeclProcessingState(state, decl) {
 		styleFnDecls,
 		attrBuckets,
 		observedVariantFallbackFns,
+		getCurrentDeclarationSourceOrder: () => currentDeclarationSourceOrder,
+		setCurrentDeclarationSourceOrder: (sourceOrder) => {
+			currentDeclarationSourceOrder = sourceOrder;
+		},
 		inlineStyleProps,
 		localVarValues,
 		cssHelperPropValues,
@@ -33540,6 +34542,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.
@@ -33548,6 +34633,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) {
@@ -33572,8 +34665,29 @@ function finalizeDeclProcessing(ctx) {
 		}
 	}
 	for (const [sel, obj] of Object.entries(nestedSelectors)) styleObj[sel] = obj;
+	const baseRawEntries = Object.entries(styleObj);
+	resolveBoxShorthandConflicts(styleObj);
 	resolveDirectionalConflicts(styleObj);
+	expandMultiValueBorderRadius(styleObj);
 	warnOpaqueShorthands(styleObj, decl, warnings);
+	for (const bucket of variantBuckets.values()) {
+		resolveBoxShorthandConflicts(bucket);
+		resolveDirectionalConflicts(bucket, { skipNullishShorthandDefault: true });
+		expandMultiValueBorderRadius(bucket);
+		warnOpaqueShorthands(bucket, decl, warnings);
+	}
+	const variantBucketObjects = [...variantBuckets.values()];
+	harmonizeShorthandExpansion([
+		styleObj,
+		...variantBucketObjects,
+		...extraStyleObjects.values()
+	], {
+		baseStyleObj: styleObj,
+		inheritBaseLateSides: new Set(variantBucketObjects),
+		baseRawEntries,
+		bucketBaseKeySnapshot: bucketSnapshotLookup(decl, variantBuckets),
+		bucketSourceOrder: bucketSourceOrderLookup(decl, variantBuckets)
+	});
 	registerLocalStylexVarFallbacks(state, decl, styleObj);
 	const varsToDrop = /* @__PURE__ */ new Set();
 	const staticInlineStyleProps = decl.staticInlineStyleProps ?? [];
@@ -33755,13 +34869,21 @@ function finalizeDeclProcessing(ctx) {
 		const oldKey = decl.styleKey;
 		decl.styleKey = baseKey;
 		resolvedStyleObjects.delete(oldKey);
+		expandMultiValueBorderRadius(styleObj);
 		resolvedStyleObjects.set(baseKey, styleObj);
-		for (const [k, v] of extraStyleObjects.entries()) resolvedStyleObjects.set(k, v);
+		for (const [k, v] of extraStyleObjects.entries()) {
+			expandMultiValueBorderRadius(v);
+			resolvedStyleObjects.set(k, v);
+		}
 		for (const c of cases) resolvedStyleObjects.set(c.styleKey, { backgroundColor: c.value });
 		decl.needsWrapperComponent = true;
 	} else {
+		expandMultiValueBorderRadius(styleObj);
 		resolvedStyleObjects.set(decl.styleKey, styleObj);
-		for (const [k, v] of extraStyleObjects.entries()) resolvedStyleObjects.set(k, v);
+		for (const [k, v] of extraStyleObjects.entries()) {
+			expandMultiValueBorderRadius(v);
+			resolvedStyleObjects.set(k, v);
+		}
 	}
 	{
 		const isPseudoOrMediaMap = (v) => {
@@ -33847,8 +34969,22 @@ function finalizeDeclProcessing(ctx) {
 		extraStyleObjects,
 		attrBuckets
 	});
+	const remainingBucketObjects = [...remainingBuckets.values()];
+	harmonizeShorthandExpansion([
+		styleObj,
+		...remainingBucketObjects,
+		...extraStyleObjects.values(),
+		...attrBuckets.values()
+	], {
+		baseStyleObj: styleObj,
+		inheritBaseLateSides: new Set(remainingBucketObjects),
+		baseRawEntries,
+		bucketBaseKeySnapshot: bucketSnapshotLookup(decl, remainingBuckets),
+		bucketSourceOrder: bucketSourceOrderLookup(decl, remainingBuckets)
+	});
 	for (const [when, obj] of remainingBuckets.entries()) {
 		const key = remainingStyleKeys[when];
+		expandMultiValueBorderRadius(obj);
 		resolvedStyleObjects.set(key, obj);
 	}
 	for (const [k, v] of attrBuckets.entries()) resolvedStyleObjects.set(k, v);
@@ -34768,8 +35904,10 @@ function replaceIdentifierInAst(j, node, oldName) {
 function mergeConditionBucket(styleObj, bucket) {
 	for (const [prop, map] of Object.entries(bucket)) {
 		const existing = styleObj[prop];
-		if (existing && typeof existing === "object" && !isAstNode$1(existing) && !Array.isArray(existing)) mergeStyleObjects(existing, map);
-		else {
+		if (existing && typeof existing === "object" && !isAstNode$1(existing) && !Array.isArray(existing)) {
+			mergeStyleObjects(existing, map);
+			copyConditionSourceOrders(existing, map);
+		} else {
 			if (existing !== void 0 && (map.default === null || map.default === void 0)) map.default = existing;
 			styleObj[prop] = map;
 		}
@@ -34855,6 +35993,23 @@ const AXIS_PAIRS = [
 		end: "marginRight"
 	}
 ];
+const BOX_SHORTHAND_CONFLICTS = [{
+	shorthand: "padding",
+	top: "paddingTop",
+	right: "paddingRight",
+	bottom: "paddingBottom",
+	left: "paddingLeft",
+	block: "paddingBlock",
+	inline: "paddingInline"
+}, {
+	shorthand: "margin",
+	top: "marginTop",
+	right: "marginRight",
+	bottom: "marginBottom",
+	left: "marginLeft",
+	block: "marginBlock",
+	inline: "marginInline"
+}];
 const LOGICAL_SIDE_PAIRS = [
 	{
 		logical: "paddingBlockStart",
@@ -34897,6 +36052,94 @@ function isMediaOrPseudoMap(v) {
 	const keys = Object.keys(v);
 	return keys.includes("default") || keys.some((k) => k.startsWith(":") || k.startsWith("@"));
 }
+function resolveBoxShorthandConflicts(styleObj) {
+	for (const config of BOX_SHORTHAND_CONFLICTS) {
+		const shorthandVal = styleObj[config.shorthand];
+		if (shorthandVal === void 0) continue;
+		const sideProps = [
+			config.top,
+			config.right,
+			config.bottom,
+			config.left,
+			config.block,
+			config.inline
+		];
+		if (!sideProps.some((prop) => prop in styleObj)) continue;
+		const entries = Object.entries(styleObj);
+		const shorthandIndex = entries.findIndex(([key]) => key === config.shorthand);
+		recordLateSideOverrides(styleObj, config, entries, shorthandIndex);
+		const replacements = {
+			[config.top]: resolveBoxSideConflictValue({
+				shorthandVal,
+				shorthandIndex,
+				longhandVal: styleObj[config.top],
+				longhandIndex: entries.findIndex(([key]) => key === config.top),
+				axisVal: styleObj[config.block],
+				axisIndex: entries.findIndex(([key]) => key === config.block)
+			}),
+			[config.right]: resolveBoxSideConflictValue({
+				shorthandVal,
+				shorthandIndex,
+				longhandVal: styleObj[config.right],
+				longhandIndex: entries.findIndex(([key]) => key === config.right),
+				axisVal: styleObj[config.inline],
+				axisIndex: entries.findIndex(([key]) => key === config.inline)
+			}),
+			[config.bottom]: resolveBoxSideConflictValue({
+				shorthandVal,
+				shorthandIndex,
+				longhandVal: styleObj[config.bottom],
+				longhandIndex: entries.findIndex(([key]) => key === config.bottom),
+				axisVal: styleObj[config.block],
+				axisIndex: entries.findIndex(([key]) => key === config.block)
+			}),
+			[config.left]: resolveBoxSideConflictValue({
+				shorthandVal,
+				shorthandIndex,
+				longhandVal: styleObj[config.left],
+				longhandIndex: entries.findIndex(([key]) => key === config.left),
+				axisVal: styleObj[config.inline],
+				axisIndex: entries.findIndex(([key]) => key === config.inline)
+			})
+		};
+		for (const key of Object.keys(styleObj)) delete styleObj[key];
+		for (const [key, val] of entries) if (key === config.shorthand) {
+			styleObj[config.top] = replacements[config.top];
+			styleObj[config.right] = replacements[config.right];
+			styleObj[config.bottom] = replacements[config.bottom];
+			styleObj[config.left] = replacements[config.left];
+		} else if (sideProps.includes(key)) continue;
+		else styleObj[key] = val;
+	}
+}
+function resolveBoxSideConflictValue(args) {
+	const { shorthandVal, shorthandIndex, longhandVal, longhandIndex, axisVal, axisIndex } = args;
+	const base = latestIndexedValue([{
+		value: axisVal,
+		index: axisIndex
+	}, {
+		value: longhandVal,
+		index: longhandIndex
+	}]);
+	if (!isMediaOrPseudoMap(shorthandVal)) {
+		if (!base || shorthandIndex > base.index) return shorthandVal;
+		if (isMediaOrPseudoMap(base.value)) return mergeScalarDefaultIntoLonghand(base.value, shorthandVal);
+		return base.value;
+	}
+	const defaultValue = shorthandVal.default != null && (!base || shorthandIndex > base.index) ? shorthandVal.default : base?.value ?? shorthandVal.default ?? null;
+	if (base && base.index > shorthandIndex && isMediaOrPseudoMap(base.value)) return computeMergedLonghand(base.value, shorthandVal);
+	const result = { default: defaultValue };
+	for (const [condition, conditionValue] of Object.entries(shorthandVal)) if (condition !== "default" && conditionValue != null) result[condition] = conditionValue;
+	return result;
+}
+function latestIndexedValue(candidates) {
+	let latest = null;
+	for (const candidate of candidates) {
+		if (candidate.index < 0 || candidate.value === void 0) continue;
+		if (!latest || candidate.index > latest.index) latest = candidate;
+	}
+	return latest;
+}
 /**
 * Resolves conflicts between directional shorthand properties (e.g., `paddingBlock`)
 * and their individual longhand overrides (e.g., `paddingBottom`).
@@ -34913,10 +36156,11 @@ function isMediaOrPseudoMap(v) {
 * Property ordering is preserved: the split longhands replace the shorthand's
 * position in the object to maintain a natural CSS property order.
 */
-function resolveDirectionalConflicts(styleObj) {
+function resolveDirectionalConflicts(styleObj, options) {
 	for (const { shorthand, start, end } of AXIS_PAIRS) {
 		const shorthandVal = styleObj[shorthand];
 		if (shorthandVal === void 0) continue;
+		if (options?.skipNullishShorthandDefault === true && hasNullishDefault(shorthandVal)) continue;
 		const hasStart = start in styleObj;
 		const hasEnd = end in styleObj;
 		if (!hasStart && !hasEnd) continue;
@@ -34966,6 +36210,464 @@ function resolveLogicalSideConflicts(styleObj) {
 		else styleObj[key] = val;
 	}
 }
+const BORDER_RADIUS_CORNER_PROPS = [
+	"borderTopLeftRadius",
+	"borderTopRightRadius",
+	"borderBottomRightRadius",
+	"borderBottomLeftRadius"
+];
+function harmonizeShorthandExpansion(styleObjs, options) {
+	harmonizeBoxShorthandExpansion(styleObjs, options);
+	harmonizeBorderRadiusExpansion(styleObjs, options);
+}
+/** Resolve a bucket object back to its `when` snapshot recorded during decl processing. */
+function bucketSnapshotLookup(decl, buckets) {
+	const whenByObject = /* @__PURE__ */ new Map();
+	for (const [when, obj] of buckets.entries()) whenByObject.set(obj, when);
+	return (styleObj) => {
+		const when = whenByObject.get(styleObj);
+		return when === void 0 ? void 0 : getVariantBaseKeySnapshot(decl, when);
+	};
+}
+function bucketSourceOrderLookup(decl, buckets) {
+	const whenByObject = /* @__PURE__ */ new Map();
+	for (const [when, obj] of buckets.entries()) whenByObject.set(obj, when);
+	return (styleObj) => {
+		const when = whenByObject.get(styleObj);
+		return when === void 0 ? void 0 : getVariantSourceOrder(decl, when);
+	};
+}
+/**
+* StyleX priorities put side longhands (`paddingTop`) above axis shorthands
+* (`paddingBlock`) above box shorthands (`padding`) regardless of application
+* order. When the declaration family mixes these levels across style objects
+* (e.g. the base expanded `padding: 4px; padding-top: 2px` into side longhands
+* while a variant kept `padding: 8px`), a later-applied lower-level value can
+* never override an earlier higher-level one. Expand statically expandable
+* shorthand/axis values to side longhands in every object so overrides resolve
+* through plain per-property merging.
+*/
+/**
+* Side props whose longhand was declared after the box shorthand (per style
+* object). A variant carrying the same shorthand must not override these sides
+* when it gets expanded to longhands — the later longhand wins over the
+* variant's shorthand in the original CSS cascade too.
+*/
+const lateSideOverrides = /* @__PURE__ */ new WeakMap();
+function recordLateSideOverrides(styleObj, config, entries, shorthandIndex) {
+	const lateSides = /* @__PURE__ */ new Set();
+	const markIfLate = (prop, ...sides) => {
+		const index = entries.findIndex(([key]) => key === prop);
+		if (index <= shorthandIndex) return;
+		const value = entries[index]?.[1];
+		if (isMediaOrPseudoMap(value) && hasNullishDefault(value)) return;
+		for (const side of sides) lateSides.add(side);
+	};
+	markIfLate(config.top, config.top);
+	markIfLate(config.right, config.right);
+	markIfLate(config.bottom, config.bottom);
+	markIfLate(config.left, config.left);
+	markIfLate(config.block, config.top, config.bottom);
+	markIfLate(config.inline, config.left, config.right);
+	if (lateSides.size === 0) return;
+	const byShorthand = lateSideOverrides.get(styleObj) ?? /* @__PURE__ */ new Map();
+	byShorthand.set(config.shorthand, lateSides);
+	lateSideOverrides.set(styleObj, byShorthand);
+}
+/**
+* Sides of `config` whose base longhand/axis declaration is absent from the
+* variant's base-key snapshot — i.e. it was declared after the variant block
+* in source order and must keep winning over the variant's shorthand.
+* Conditional-only values (nullish default) never suppress: their default
+* still falls back to the variant's shorthand.
+*/
+function baseSidesDeclaredAfterSnapshot(baseRawEntries, snapshot, config) {
+	const lateSides = /* @__PURE__ */ new Set();
+	const sidesByKey = boxSidesByKey(config);
+	for (const [key, value] of baseRawEntries) {
+		const sides = sidesByKey.get(key);
+		if (!sides || !declaredAfterSnapshot(snapshot, key, value)) continue;
+		if (isMediaOrPseudoMap(value) && hasNullishDefault(value)) continue;
+		for (const side of sides) lateSides.add(side);
+	}
+	return lateSides;
+}
+function boxSidesByKey(config) {
+	return new Map([
+		[config.top, [config.top]],
+		[config.right, [config.right]],
+		[config.bottom, [config.bottom]],
+		[config.left, [config.left]],
+		[config.block, [config.top, config.bottom]],
+		[config.inline, [config.left, config.right]]
+	]);
+}
+/**
+* Base side/axis condition entries that were added after the variant snapshot.
+* Later pseudo/media condition classes target the same property, and a flat
+* variant value would replace the base map entirely in `stylex.props()`.
+*/
+function conditionalBaseSidesAfterSnapshot(baseRawEntries, snapshot, variantSourceOrder, config) {
+	const conditionMaps = /* @__PURE__ */ new Map();
+	const sidesByKey = boxSidesByKey(config);
+	for (const [key, value] of baseRawEntries) {
+		const sides = sidesByKey.get(key);
+		const changedConditions = changedConditionEntriesAfterSnapshot(snapshot, variantSourceOrder, key, value);
+		if (!sides || !changedConditions) continue;
+		for (const side of sides) mergeConditionMapForSide(conditionMaps, side, changedConditions);
+	}
+	return conditionMaps;
+}
+function mergeConditionMapForSide(conditionMaps, side, changedConditions) {
+	const existing = conditionMaps.get(side);
+	if (existing) {
+		mergeStyleObjects(existing, changedConditions);
+		return;
+	}
+	conditionMaps.set(side, { ...changedConditions });
+}
+function changedConditionEntriesAfterSnapshot(snapshot, variantSourceOrder, key, value) {
+	if (!isMediaOrPseudoMap(value) || !hasNullishDefault(value)) return null;
+	const snapshotHasKey = snapshot?.has(key) ?? false;
+	const snapshotValue = snapshotHasKey ? snapshot?.get(key) : void 0;
+	const snapshotMap = isMediaOrPseudoMap(snapshotValue) ? snapshotValue : null;
+	const changed = {};
+	for (const [condition, conditionValue] of Object.entries(value)) {
+		if (condition === "default" || conditionValue == null) continue;
+		const conditionSourceOrder = getConditionSourceOrder(value, condition);
+		if (variantSourceOrder !== void 0 && conditionSourceOrder !== void 0) {
+			if (conditionSourceOrder <= variantSourceOrder) continue;
+			changed[condition] = conditionValue;
+			continue;
+		}
+		if (snapshotHasKey && snapshotMap && condition in snapshotMap && styleValuesEquivalent(snapshotMap[condition], conditionValue)) continue;
+		changed[condition] = conditionValue;
+	}
+	return Object.keys(changed).length ? changed : null;
+}
+/**
+* Merges base condition entries into a variant's expanded side value, keeping
+* the variant in control of the default. Follows the same convention as
+* computeMergedLonghand: condition entries win over the flat value.
+*/
+function mergeBaseConditionsIntoSideValue(variantValue, baseConditionMap) {
+	if (!baseConditionMap) return variantValue;
+	const merged = isMediaOrPseudoMap(variantValue) ? { ...variantValue } : { default: variantValue };
+	for (const [condition, conditionValue] of Object.entries(baseConditionMap)) {
+		if (condition === "default" || conditionValue == null || condition in merged) continue;
+		merged[condition] = conditionValue;
+	}
+	return merged;
+}
+/**
+* A base entry was (re)declared after the variant's snapshot when its key was
+* absent at snapshot time, or its value changed since — a redeclaration after
+* the variant block replaces the value in the base style object.
+*/
+function declaredAfterSnapshot(snapshot, key, value) {
+	return !snapshot.has(key) || !styleValuesEquivalent(snapshot.get(key), value);
+}
+/**
+* Structural equality for snapshot comparison: condition maps are compared by
+* entries (snapshots clone them, and base merges may replace or mutate the map
+* object), everything else by identity.
+*/
+function styleValuesEquivalent(a, b) {
+	if (Object.is(a, b)) return true;
+	if (!isPlainStyleValueMap(a) || !isPlainStyleValueMap(b)) return false;
+	const aEntries = Object.entries(a);
+	if (aEntries.length !== Object.keys(b).length) return false;
+	return aEntries.every(([key, value]) => key in b && styleValuesEquivalent(value, b[key]));
+}
+function isPlainStyleValueMap(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value) && typeof value.type !== "string";
+}
+function harmonizeBoxShorthandExpansion(styleObjs, options) {
+	for (const config of BOX_SHORTHAND_CONFLICTS) {
+		const levels = /* @__PURE__ */ new Set();
+		for (const obj of styleObjs) {
+			if (config.shorthand in obj) levels.add("shorthand");
+			if (config.block in obj || config.inline in obj) levels.add("axis");
+			if (boxSideProps(config).some((prop) => prop in obj)) levels.add("side");
+		}
+		if (levels.size < 2) continue;
+		const baseLateSides = options?.baseStyleObj ? lateSideOverrides.get(options.baseStyleObj)?.get(config.shorthand) : void 0;
+		const conditionalSidesFor = (styleObj) => {
+			if (!options?.inheritBaseLateSides?.has(styleObj) || !options.baseRawEntries) return;
+			return conditionalBaseSidesAfterSnapshot(options.baseRawEntries, options.bucketBaseKeySnapshot?.(styleObj), options.bucketSourceOrder?.(styleObj), config);
+		};
+		const lateSidesFor = (styleObj) => {
+			const localLateSides = lateSideOverrides.get(styleObj)?.get(config.shorthand);
+			if (!options?.inheritBaseLateSides?.has(styleObj)) return localLateSides ?? /* @__PURE__ */ new Set();
+			const snapshot = options.bucketBaseKeySnapshot?.(styleObj);
+			const inheritedLateSides = snapshot && options.baseRawEntries ? baseSidesDeclaredAfterSnapshot(options.baseRawEntries, snapshot, config) : baseLateSides ?? /* @__PURE__ */ new Set();
+			if (!inheritedLateSides.size) return localLateSides ?? /* @__PURE__ */ new Set();
+			if (!localLateSides?.size) return inheritedLateSides;
+			return new Set([...inheritedLateSides, ...localLateSides]);
+		};
+		const targetLevel = levels.has("side") ? "side" : "axis";
+		for (const obj of styleObjs) if (targetLevel === "side") expandBoxLevelsToSides(obj, config, lateSidesFor(obj), conditionalSidesFor(obj));
+		else expandBoxShorthandToAxis(obj, config, lateSidesFor(obj));
+	}
+}
+function boxSideProps(config) {
+	return [
+		config.top,
+		config.right,
+		config.bottom,
+		config.left
+	];
+}
+/**
+* Expands a pure shorthand-level or axis-level style object to side longhands
+* in place. Mixed-level objects were already reconciled per-object by
+* resolveBoxShorthandConflicts / resolveDirectionalConflicts and are left
+* untouched, as are values that cannot be expanded statically.
+*/
+function expandBoxLevelsToSides(styleObj, config, lateSides, conditionalSides) {
+	const hasSide = boxSideProps(config).some((prop) => prop in styleObj);
+	const shorthandVal = styleObj[config.shorthand];
+	const withoutLateSides = (replacements) => replacements.filter(([sideProp]) => !lateSides.has(sideProp)).map(([sideProp, value]) => [sideProp, mergeBaseConditionsIntoSideValue(value, conditionalSides?.get(sideProp))]);
+	if (shorthandVal !== void 0) {
+		if (hasSide || config.block in styleObj || config.inline in styleObj) return;
+		const expanded = expandBoxShorthandValueToSides(shorthandVal);
+		if (!expanded) return;
+		replaceStyleKeyInPlace(styleObj, config.shorthand, withoutLateSides([
+			[config.top, expanded.top],
+			[config.right, expanded.right],
+			[config.bottom, expanded.bottom],
+			[config.left, expanded.left]
+		]));
+		return;
+	}
+	if (hasSide) return;
+	if (getUseLogicalProperties()) return;
+	if (config.block in styleObj) {
+		const blockVal = styleObj[config.block];
+		replaceStyleKeyInPlace(styleObj, config.block, withoutLateSides([[config.top, blockVal], [config.bottom, cloneBoxValue(blockVal)]]));
+	}
+	if (config.inline in styleObj) {
+		const inlineVal = styleObj[config.inline];
+		replaceStyleKeyInPlace(styleObj, config.inline, withoutLateSides([[config.left, inlineVal], [config.right, cloneBoxValue(inlineVal)]]));
+	}
+}
+/**
+* Expands a box shorthand to the axis pair (`paddingBlock`/`paddingInline`)
+* when the family's highest conflicting level is the axis level. Values with
+* 3-4 parts cannot be represented per-axis and are left untouched.
+*/
+function expandBoxShorthandToAxis(styleObj, config, lateSides) {
+	const shorthandVal = styleObj[config.shorthand];
+	if (shorthandVal === void 0 || config.block in styleObj || config.inline in styleObj || boxSideProps(config).some((prop) => prop in styleObj)) return;
+	const expanded = expandBoxShorthandValueToAxis(shorthandVal);
+	if (!expanded) return;
+	const replacements = [];
+	if (!lateSides.has(config.top) && !lateSides.has(config.bottom)) replacements.push([config.block, expanded.block]);
+	if (!lateSides.has(config.left) && !lateSides.has(config.right)) replacements.push([config.inline, expanded.inline]);
+	replaceStyleKeyInPlace(styleObj, config.shorthand, replacements);
+}
+function expandBoxShorthandValueToAxis(value) {
+	if (typeof value === "number") return {
+		block: value,
+		inline: value
+	};
+	const staticString = typeof value === "string" ? value : staticStringValue(value);
+	if (staticString !== null) {
+		const parts = splitCssValueWhitespace(staticString.trim());
+		const block = parts[0];
+		if (block === void 0 || parts.length > 2) return null;
+		return {
+			block,
+			inline: parts[1] ?? block
+		};
+	}
+	if (!isMediaOrPseudoMap(value)) return null;
+	const block = {};
+	const inline = {};
+	for (const [condition, conditionValue] of Object.entries(value)) {
+		if (conditionValue == null) {
+			block[condition] = conditionValue;
+			inline[condition] = conditionValue;
+			continue;
+		}
+		if (isMediaOrPseudoMap(conditionValue)) return null;
+		const expanded = expandBoxShorthandValueToAxis(conditionValue);
+		if (!expanded) return null;
+		block[condition] = expanded.block;
+		inline[condition] = expanded.inline;
+	}
+	return {
+		block,
+		inline
+	};
+}
+function expandBoxShorthandValueToSides(value) {
+	if (typeof value === "number") return {
+		top: value,
+		right: value,
+		bottom: value,
+		left: value
+	};
+	const staticString = typeof value === "string" ? value : staticStringValue(value);
+	if (staticString !== null) return expandBoxShorthandStringToSides(staticString);
+	if (!isMediaOrPseudoMap(value)) return null;
+	const top = {};
+	const right = {};
+	const bottom = {};
+	const left = {};
+	for (const [condition, conditionValue] of Object.entries(value)) {
+		if (conditionValue == null) {
+			top[condition] = conditionValue;
+			right[condition] = conditionValue;
+			bottom[condition] = conditionValue;
+			left[condition] = conditionValue;
+			continue;
+		}
+		if (isMediaOrPseudoMap(conditionValue)) return null;
+		const expanded = expandBoxShorthandValueToSides(conditionValue);
+		if (!expanded) return null;
+		top[condition] = expanded.top;
+		right[condition] = expanded.right;
+		bottom[condition] = expanded.bottom;
+		left[condition] = expanded.left;
+	}
+	return {
+		top,
+		right,
+		bottom,
+		left
+	};
+}
+/** CSS box expansion: 1-4 whitespace-separated values to top/right/bottom/left. */
+function expandBoxShorthandStringToSides(raw) {
+	const parts = splitCssValueWhitespace(raw.trim());
+	const top = parts[0];
+	if (top === void 0 || parts.length > 4) return null;
+	const right = parts[1] ?? top;
+	return {
+		top,
+		right,
+		bottom: parts[2] ?? top,
+		left: parts[3] ?? right
+	};
+}
+function replaceStyleKeyInPlace(styleObj, key, replacements) {
+	const entries = Object.entries(styleObj);
+	for (const existingKey of Object.keys(styleObj)) delete styleObj[existingKey];
+	for (const [entryKey, entryValue] of entries) if (entryKey === key) for (const [replacementKey, replacementValue] of replacements) styleObj[replacementKey] = replacementValue;
+	else styleObj[entryKey] = entryValue;
+}
+function cloneBoxValue(value) {
+	if (isAstNode$1(value)) return cloneAstNode(value);
+	if (isMediaOrPseudoMap(value)) {
+		const cloned = {};
+		for (const [condition, conditionValue] of Object.entries(value)) cloned[condition] = cloneBoxValue(conditionValue);
+		return cloned;
+	}
+	return value;
+}
+/**
+* StyleX gives longhand properties priority over shorthands regardless of
+* application order, so a `borderRadius` shorthand in one style object can
+* never override corner longhands applied from another (e.g. a variant's
+* `borderRadius: 4px` losing to base corner longhands expanded from
+* `border-radius: 16px 0`). When any style object in the declaration family
+* carries corner longhands, expand sibling single-value `borderRadius`
+* shorthands too so cascade overrides keep working.
+*/
+function harmonizeBorderRadiusExpansion(styleObjs, options) {
+	if (!styleObjs.some((obj) => BORDER_RADIUS_CORNER_PROPS.some((prop) => prop in obj))) return;
+	for (const obj of styleObjs) expandMultiValueBorderRadius(obj, {
+		includeSingleValue: true,
+		omitCorners: lateBaseCornersFor(obj, options),
+		mergeBaseConditionCorners: conditionalBaseCornersFor(obj, options)
+	});
+}
+/**
+* Corners whose base longhand was (re)declared after the variant block in
+* source order — those keep winning over the variant's expanded borderRadius,
+* so the variant must not emit them.
+*/
+function lateBaseCornersFor(styleObj, options) {
+	if (!options?.inheritBaseLateSides?.has(styleObj) || !options.baseRawEntries) return;
+	const snapshot = options.bucketBaseKeySnapshot?.(styleObj);
+	if (!snapshot) return;
+	const lateCorners = /* @__PURE__ */ new Set();
+	for (const [key, value] of options.baseRawEntries) {
+		if (!BORDER_RADIUS_CORNER_PROPS.includes(key)) continue;
+		if (!declaredAfterSnapshot(snapshot, key, value)) continue;
+		if (isMediaOrPseudoMap(value) && hasNullishDefault(value)) continue;
+		lateCorners.add(key);
+	}
+	return lateCorners;
+}
+/** Conditional-only base corner entries a variant's expanded borderRadius must preserve. */
+function conditionalBaseCornersFor(styleObj, options) {
+	if (!options?.inheritBaseLateSides?.has(styleObj) || !options.baseRawEntries) return;
+	const snapshot = options.bucketBaseKeySnapshot?.(styleObj);
+	const variantSourceOrder = options.bucketSourceOrder?.(styleObj);
+	const conditionMaps = /* @__PURE__ */ new Map();
+	for (const [key, value] of options.baseRawEntries) {
+		if (!BORDER_RADIUS_CORNER_PROPS.includes(key)) continue;
+		const changedConditions = changedConditionEntriesAfterSnapshot(snapshot, variantSourceOrder, key, value);
+		if (!changedConditions) continue;
+		conditionMaps.set(key, changedConditions);
+	}
+	return conditionMaps;
+}
+function expandMultiValueBorderRadius(styleObj, options) {
+	const value = styleObj.borderRadius;
+	if (value === void 0) return;
+	const expanded = expandBorderRadiusValue(value, options);
+	if (!expanded) return;
+	const next = expandBorderRadiusInStyleObject(styleObj, expanded, { omitCorners: options?.omitCorners });
+	for (const [corner, conditionMap] of options?.mergeBaseConditionCorners ?? []) if (corner in next) next[corner] = mergeBaseConditionsIntoSideValue(next[corner], conditionMap);
+	for (const key of Object.keys(styleObj)) delete styleObj[key];
+	Object.assign(styleObj, next);
+}
+function expandBorderRadiusValue(value, options) {
+	const staticExpanded = expandStaticBorderRadiusValue(value, options);
+	if (staticExpanded) return staticExpanded;
+	if (!isMediaOrPseudoMap(value)) return null;
+	const topLeft = {};
+	const topRight = {};
+	const bottomRight = {};
+	const bottomLeft = {};
+	let changed = false;
+	for (const [condition, conditionValue] of Object.entries(value)) {
+		if (conditionValue == null) {
+			topLeft[condition] = conditionValue;
+			topRight[condition] = conditionValue;
+			bottomRight[condition] = conditionValue;
+			bottomLeft[condition] = conditionValue;
+			continue;
+		}
+		const expanded = expandStaticBorderRadiusValue(conditionValue, options);
+		if (!expanded) return null;
+		changed = true;
+		topLeft[condition] = expanded.topLeft;
+		topRight[condition] = expanded.topRight;
+		bottomRight[condition] = expanded.bottomRight;
+		bottomLeft[condition] = expanded.bottomLeft;
+	}
+	return changed || options?.includeSingleValue === true ? {
+		topLeft,
+		topRight,
+		bottomRight,
+		bottomLeft
+	} : null;
+}
+function expandStaticBorderRadiusValue(value, options) {
+	if (typeof value === "number") return options?.includeSingleValue === true ? {
+		topLeft: value,
+		topRight: value,
+		bottomRight: value,
+		bottomLeft: value
+	} : null;
+	const staticString = typeof value === "string" ? value : staticStringValue(value);
+	if (staticString === null) return null;
+	return expandBorderRadiusShorthandValue(staticString, options);
+}
 function resolveDirectionalConflictValue(args) {
 	const { shorthandVal, longhandVal, hasLonghand, shorthandIndex, longhandIndex } = args;
 	if (!hasLonghand || longhandIndex < 0) return cloneDirectionalValue(shorthandVal);
@@ -35006,7 +36708,10 @@ function computeMergedLonghand(longhandVal, shorthandMap, options) {
 }
 function shouldUseShorthandMapEntry(args) {
 	const { key, longhandMap, shorthandMap, shorthandOverrides } = args;
-	if (!shorthandOverrides) return !(key in longhandMap);
+	if (!shorthandOverrides) {
+		if (key === "default" && hasNullishDefault(longhandMap)) return true;
+		return !(key in longhandMap);
+	}
 	if (key !== "default") return true;
 	return !hasNullishDefault(shorthandMap) || hasNullishDefault(longhandMap);
 }
@@ -35036,7 +36741,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,
@@ -35712,6 +37417,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";
@@ -35773,6 +37483,7 @@ function tryHandleInterpolatedBorder(ctx, args) {
 		const alt = expr.body.alternate;
 		if (isMemberExpression(cons) || isMemberExpression(alt)) {
 			d.property = targetCssProperty;
+			stripConsumedStaticParts();
 			return false;
 		}
 	}
@@ -35969,6 +37680,7 @@ function tryHandleInterpolatedBorder(ctx, args) {
 	if (expr?.type === "ArrowFunctionExpression") {
 		if (expr.body?.type === "MemberExpression") {
 			d.property = targetCssProperty;
+			stripConsumedStaticParts();
 			return false;
 		}
 	}
@@ -36162,7 +37874,39 @@ function handleSplitVariantsResolvedValue(ctx) {
 			target[prop] = map;
 			return map;
 		};
-		const applyWithContext = (prop, valueAst) => {
+		const withImportant = (valueAst) => {
+			if (!d.important || !valueAst || typeof valueAst !== "object") return valueAst;
+			const node = valueAst;
+			if (node.type === "StringLiteral" || node.type === "Literal" || node.type === "NumericLiteral") {
+				if (typeof node.value === "string") return node.value.includes("!important") ? valueAst : j.literal(`${node.value} !important`);
+				if (typeof node.value === "number") return j.literal(`${node.value} !important`);
+				return valueAst;
+			}
+			if (node.type === "TemplateLiteral" && Array.isArray(node.quasis)) {
+				const quasis = node.quasis;
+				const lastIndex = quasis.length - 1;
+				const last = quasis[lastIndex];
+				const lastText = last?.value?.cooked ?? last?.value?.raw ?? "";
+				if (lastText.includes("!important")) return valueAst;
+				const newQuasis = quasis.map((q, i) => i === lastIndex ? j.templateElement({
+					raw: `${lastText} !important`,
+					cooked: `${lastText} !important`
+				}, true) : j.templateElement({
+					raw: q?.value?.raw ?? q?.value?.cooked ?? "",
+					cooked: q?.value?.cooked ?? q?.value?.raw ?? ""
+				}, false));
+				return j.templateLiteral(newQuasis, node.expressions ?? []);
+			}
+			return j.templateLiteral([j.templateElement({
+				raw: "",
+				cooked: ""
+			}, false), j.templateElement({
+				raw: " !important",
+				cooked: " !important"
+			}, true)], [valueAst]);
+		};
+		const applyWithContext = (prop, valueAstRaw) => {
+			const valueAst = withImportant(valueAstRaw);
 			if (media) {
 				const map = getOrCreateConditionMap(prop);
 				map[media] = valueAst;
@@ -36929,7 +38673,7 @@ function handleInterpolatedDeclaration(args) {
 			applyVariant({
 				when: formatObservedVariantCondition(jsxProp, value),
 				propName: jsxProp
-			}, { [stylexProp]: emitStaticObservedValue(value, stylexProp, observedValues !== null, staticParts) });
+			}, staticVariantStyleObject(stylexProp, emitStaticObservedValue(value, stylexProp, observedValues !== null, staticParts)));
 		}
 		if (observedValues) {
 			const numericIdentifiers = numericIdentifierSetForJsxProp(jsxProp, ctx.findJsxPropTsType);
@@ -37513,9 +39257,25 @@ 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,
+						importedName: imp.importedName,
+						source: imp.source.value,
+						path: info.path.length ? info.path.join(".") : void 0
+					}
+				});
+				bail = true;
+				return { bail: true };
+			}
+			if (!isStylexImportSource(imp.source.value) && hasRuntimeImport(resolveValueResult.imports)) {
+				warnings.push({
+					severity: "warning",
+					type: "Unsupported interpolation: call expression",
 					loc: getNodeLocStart(expr) ?? decl.loc,
 					context: {
 						localName: decl.localName,
@@ -37600,7 +39360,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;
 		}
@@ -37613,6 +39374,7 @@ function handleInterpolatedDeclaration(args) {
 			addImport,
 			resolveImportedValueExpr,
 			resolveThemeValue,
+			numericIdentifiers,
 			setStyleValue: (prop, value) => applyResolvedPropValue(prop, value, null)
 		})) continue;
 		if (bail) break;
@@ -37621,9 +39383,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;
 					}
@@ -37632,6 +39416,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;
 					}
@@ -37777,7 +39562,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);
@@ -38303,11 +40105,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));
@@ -38595,17 +40397,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 = (() => {
@@ -38670,7 +40477,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") {
@@ -38926,6 +40754,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;
@@ -38980,16 +40819,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 = {
@@ -39014,24 +40882,120 @@ 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 } = 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;
+		}
+		for (const out of cssDeclarationToStylexDeclarations(laterDecl)) {
+			const overrideProp = out.prop;
+			const overlapped = branchProps().filter((prop) => stylexPropsOverlap(prop, overrideProp));
+			if (!overlapped.length) continue;
+			if (currentDecl.important && !laterDecl.important) return false;
+			if (!context.unconditional || laterDecl.value.kind !== "static") return false;
+			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);
@@ -39067,21 +41031,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 {
@@ -39244,6 +41207,17 @@ function emitStaticObservedValue(value, stylexProp, isObservedNumeric, staticPar
 	if (staticParts.prefix || staticParts.suffix) return `${staticParts.prefix}${value}${staticParts.suffix}`;
 	return getNumericCssEmissionMode(stylexProp) === "stylexNumber" ? value : String(value);
 }
+function staticVariantStyleObject(stylexProp, value) {
+	if (stylexProp !== "borderRadius" || typeof value !== "string") return { [stylexProp]: value };
+	const expanded = expandBorderRadiusShorthandValue(value);
+	if (!expanded) return { [stylexProp]: value };
+	return {
+		borderTopLeftRadius: expanded.topLeft,
+		borderTopRightRadius: expanded.topRight,
+		borderBottomRightRadius: expanded.bottomRight,
+		borderBottomLeftRadius: expanded.bottomLeft
+	};
+}
 function buildRuntimeObservedValueExpr(j, stylexProp, valueExpr, staticParts, numericIdentifiers = /* @__PURE__ */ new Set()) {
 	if (canOmitPxUnitForStylexNumber(stylexProp, staticParts.prefix, staticParts.suffix) && isNumericStylexExpression(valueExpr, { numericIdentifiers })) return staticParts.prefix === "-" ? j.unaryExpression("-", valueExpr, true) : valueExpr;
 	if (!staticParts.prefix && !staticParts.suffix) {
@@ -40235,6 +42209,9 @@ function tryHandleMultiSlotTernary(ctx, d) {
 	decl.needsWrapperComponent = true;
 	return true;
 }
+function hasRuntimeImport(imports) {
+	return (imports ?? []).some((imp) => !isStylexImportSource(imp.from.value));
+}
 /**
 * If any variant `when` condition references the styled-components theme object,
 * mark the declaration as needing the `useTheme()` hook so the emitted wrapper
@@ -40809,6 +42786,7 @@ function processRuleDeclarations(args) {
 	const { ctx, rule, allRules, media, pseudos, pseudoElement, attrTarget, resolvedSelectorMedia, applyResolvedPropValue } = args;
 	const { state } = ctx;
 	for (const d of rule.declarations) {
+		ctx.setCurrentDeclarationSourceOrder(d.sourceOrder);
 		if (d.property && d.property.includes("__SC_EXPR_")) {
 			const resolvedProperty = resolveInterpolatedPropertyName(d.property, ctx);
 			if (resolvedProperty === null) {
@@ -40818,6 +42796,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,
@@ -40863,6 +42847,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;
@@ -40917,6 +42915,19 @@ 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) {
@@ -41560,6 +43571,40 @@ 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 applyResolvedPropValue = (prop, value, commentSource, sourceCssProperty) => {
 			const noteSourceCssProperty = (target) => {
 				if (sourceCssProperty) {
@@ -41573,6 +43618,9 @@ function processDeclRules(ctx) {
 					sourceProperties[prop] = sourceCssProperty;
 				}
 			};
+			const noteConditionSourceOrder = (target, condition) => {
+				setConditionSourceOrder(target, condition, ctx.getCurrentDeclarationSourceOrder());
+			};
 			if (attrTarget) {
 				if (attrPseudoElement) {
 					const nested = attrTarget[attrPseudoElement] ?? {};
@@ -41607,7 +43655,10 @@ function processDeclRules(ctx) {
 					}
 					const current = existing[media];
 					const mediaMap = current && typeof current === "object" && !Array.isArray(current) && !isAstNode$1(current) ? current : { default: current ?? getConditionDefaultValue(prop) };
-					for (const ps of pseudos) mediaMap[ps] = value;
+					for (const ps of pseudos) {
+						mediaMap[ps] = value;
+						noteConditionSourceOrder(mediaMap, ps);
+					}
 					existing[media] = mediaMap;
 				} else {
 					perPropPseudo[prop] ??= {};
@@ -41624,6 +43675,7 @@ function processDeclRules(ctx) {
 							existing[ps] = { default: current !== void 0 ? current : fallbackDefault };
 						} else if (!("default" in current)) current.default = getConditionDefaultValue(prop);
 						existing[ps][media] = value;
+						noteConditionSourceOrder(existing[ps], media);
 					}
 				}
 				return;
@@ -41704,6 +43756,7 @@ function processDeclRules(ctx) {
 				const currentMediaValue = existing[media];
 				if (currentMediaValue && typeof currentMediaValue === "object" && !Array.isArray(currentMediaValue) && !isAstNode$1(currentMediaValue)) currentMediaValue.default = value;
 				else existing[media] = value;
+				noteConditionSourceOrder(existing, media);
 				patchEarlierDynamicConditionValues(prop, media, value);
 				return;
 			}
@@ -41719,10 +43772,16 @@ function processDeclRules(ctx) {
 				const peTarget = nestedSelectors[pseudoElement];
 				noteSourceCssProperty(peTarget);
 				const existingVal = peTarget[prop];
-				if (typeof existingVal === "object" && existingVal !== null && "default" in existingVal) for (const ps of pseudos) existingVal[ps] = value;
+				if (typeof existingVal === "object" && existingVal !== null && "default" in existingVal) for (const ps of pseudos) {
+					existingVal[ps] = value;
+					noteConditionSourceOrder(existingVal, ps);
+				}
 				else {
 					const pseudoMap = { default: existingVal ?? getConditionDefaultValue(prop) };
-					for (const ps of pseudos) pseudoMap[ps] = value;
+					for (const ps of pseudos) {
+						pseudoMap[ps] = value;
+						noteConditionSourceOrder(pseudoMap, ps);
+					}
 					peTarget[prop] = pseudoMap;
 				}
 				return;
@@ -41735,7 +43794,10 @@ function processDeclRules(ctx) {
 					const existingVal = styleObj[prop];
 					existing.default = existingVal !== void 0 ? existingVal : getConditionDefaultValue(prop);
 				}
-				for (const ps of pseudos) existing[ps] = value;
+				for (const ps of pseudos) {
+					existing[ps] = value;
+					noteConditionSourceOrder(existing, ps);
+				}
 				return;
 			}
 			const pseudoElementsToApply = pseudoElement ? [pseudoElement] : pseudoElementsList;
@@ -41757,6 +43819,7 @@ function processDeclRules(ctx) {
 				}
 				return;
 			}
+			clearEarlierVariantBaseValues(prop, value);
 			const target = ctx.getBaseStyleTarget();
 			setStyleObjectValue(target, prop, value);
 			noteSourceCssProperty(target);
@@ -42285,9 +44348,23 @@ function recoverStandaloneInterpolationsInPseudoBlock(rule, decl) {
 		cssProps
 	};
 }
+/**
+* Whether a lowered StyleX value carries `!important`. Values are stored either
+* as plain strings (e.g. `"red !important"`) or as AST string/template literals.
+*/
+function cssValueIsImportant(value) {
+	if (typeof value === "string") return value.includes("!important");
+	if (!value || typeof value !== "object") return false;
+	const node = value;
+	if ((node.type === "StringLiteral" || node.type === "Literal") && typeof node.value === "string") return node.value.includes("!important");
+	if (node.type === "TemplateLiteral" && Array.isArray(node.quasis)) return node.quasis.some((q) => (q?.value?.cooked ?? q?.value?.raw ?? "").includes("!important"));
+	return false;
+}
 /** Negates a `when` condition string (e.g. `$active` → `!$active`, `!$x` → `$x`). */
 function negateWhen(when) {
+	if (when.startsWith("!(") && when.endsWith(")")) return when.slice(2, -1);
 	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}`;
@@ -44774,6 +46851,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);
@@ -45021,8 +47102,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
@@ -45106,7 +47188,8 @@ function rewriteJsxStep(ctx) {
 					}
 				}
 				if (!hasTemplateVariant) {
-					if ((n.startsWith("$") || renamedTransientValues?.has(n)) && decl.base.kind === "intrinsic") return;
+					const shouldStripRenamedTransient = renamedTransientValues?.has(n) && (decl.base.kind === "intrinsic" || styleFnProps.has(n) || variantProps.has(n));
+					if (n.startsWith("$") || shouldStripRenamedTransient) return;
 					output.push(attr);
 					return;
 				}