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

package/dist/transform.mjs

@@ -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.
@@ -408,6 +491,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 +537,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++) {
@@ -5137,6 +5252,299 @@ 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);
+	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
+	};
+};
+/**
+* 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 +5688,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 +5741,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 +5873,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 +5920,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 +5992,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 +6218,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 +6226,8 @@ function inferPropertyShapeFromValue(value) {
 				value: defaultValue
 			} : { kind: "dynamic" },
 			conditionKeys,
-			...staticConditions ? { staticConditions } : {}
+			...staticConditions ? { staticConditions } : {},
+			...conditionSourceOrders ? { conditionSourceOrders } : {}
 		};
 	}
 	return { kind: "dynamic" };
@@ -5806,9 +6242,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 = {};
@@ -8191,6 +8639,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 +10002,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 +10429,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 +10544,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 +10566,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 +10588,8 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 					}]
 				},
 				important: false,
-				valueRaw: placeholder
+				valueRaw: placeholder,
+				sourceOrder: rawSourceOrder++
 			};
 			if (shouldPreserveRawDeclarationPosition) {
 				const rawDeclarationCount = rawDeclarationCountByRule.get(targetRule) ?? 0;
@@ -13266,6 +13756,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 +13777,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);
@@ -15045,6 +15692,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 +15701,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 +16036,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 +16047,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 +16085,7 @@ function detectCascadeConflictStep(ctx) {
 				component: decl.localName,
 				base: baseIdent,
 				importedPath,
-				definitionPath: styledDefinitions.path
+				definitionPath: styledDefinitions?.path ?? definition.path
 			}
 		});
 		foundCascadeConflict = true;
@@ -15348,6 +16105,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 +16202,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 +16238,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 +16279,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 +16303,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 +18109,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 +18208,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 +18769,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 +18800,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 +18840,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 +18856,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 +19614,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 +19626,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 +19667,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,
@@ -25497,204 +26348,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
@@ -28666,7 +29319,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 +29386,7 @@ 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));
+		setValue(out.prop, maybeOmitPxUnitFromStylexValue(j, tl, out.prop, d.important, { numericIdentifiers: args.numericIdentifiers }));
 		if (i === 0 && (d.leadingComment || d.leadingLineComment)) addPropComments(styleObj, out.prop, {
 			leading: d.leadingComment,
 			leadingLine: d.leadingLineComment
@@ -33270,6 +33923,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 +33987,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 +34141,10 @@ function createDeclProcessingState(state, decl) {
 		styleFnDecls,
 		attrBuckets,
 		observedVariantFallbackFns,
+		getCurrentDeclarationSourceOrder: () => currentDeclarationSourceOrder,
+		setCurrentDeclarationSourceOrder: (sourceOrder) => {
+			currentDeclarationSourceOrder = sourceOrder;
+		},
 		inlineStyleProps,
 		localVarValues,
 		cssHelperPropValues,
@@ -33572,8 +34233,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 +34437,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 +34537,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 +35472,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 +35561,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 +35620,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 +35724,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 +35778,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 +36276,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);
 }
@@ -36929,7 +38202,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);
@@ -37527,6 +38800,21 @@ function handleInterpolatedDeclaration(args) {
 				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,
+						importedName: imp.importedName,
+						source: imp.source.value,
+						path: info.path.length ? info.path.join(".") : void 0
+					}
+				});
+				bail = true;
+				return { bail: true };
+			}
 			const exprAst = parseExpr(resolveValueResult.expr);
 			if (!exprAst) {
 				warnings.push({
@@ -37613,6 +38901,7 @@ function handleInterpolatedDeclaration(args) {
 			addImport,
 			resolveImportedValueExpr,
 			resolveThemeValue,
+			numericIdentifiers: getNumericImportedStylexIdentifiers(j, filePath, importMap, resolverImports),
 			setStyleValue: (prop, value) => applyResolvedPropValue(prop, value, null)
 		})) continue;
 		if (bail) break;
@@ -39244,6 +40533,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 +41535,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 +42112,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) {
@@ -41573,6 +42877,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 +42914,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 +42934,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 +43015,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 +43031,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 +43053,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;
@@ -45106,7 +46427,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;
 				}