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

package/dist/transform.mjs

@@ -2,7 +2,7 @@ import { t as createModuleResolver } from "./resolve-imports-DgSAddIF.mjs";
 import { a as isDirectionalResult, n as mergeMarkerDeclarations, o as assertValidAdapter, r as DEFAULT_THEME_HOOK, t as transformedComponentAcceptsSx } from "./sx-surface-CEPFSTO1.mjs";
 import { a as findImportSource, c as resolveBarrelReExportBinding, d as UNSUPPORTED_SHOULD_FORWARD_PROP_WARNING, l as CASCADE_CONFLICT_WARNING, n as createPrepassParser, o as getReExportedSourceName, r as fileExports, t as walkAst, u as Logger } from "./ast-walk-BOXS-DT7.mjs";
 import { n as resolveExistingFilePath, r as toRealPath, t as isRelativeSpecifier } from "./path-utils-BC4U8X_q.mjs";
-import { a as isBackgroundImageValue, c as isSingleBackgroundComponent, d as kebabToCamelCase, f as looksLikeLength, h as sanitizeIdentifier, i as getCommentBody, l as isStyleSectionMarkerComment, m as normalizeWhitespace, n as capitalize$1, o as isJSDocBlockComment, p as lowerFirst, r as escapeRegex, s as isPrettierIgnoreComment, t as camelToKebabCase, u as isValidIdentifierName } from "./string-utils-BYTEHwNg.mjs";
+import { a as hasTopLevelMatch, c as isPrettierIgnoreComment, d as isValidIdentifierName, f as kebabToCamelCase, g as sanitizeIdentifier, h as normalizeWhitespace, i as getCommentBody, l as isSingleBackgroundComponent, m as lowerFirst, n as capitalize$1, o as isBackgroundImageValue, p as looksLikeLength, r as escapeRegex, s as isJSDocBlockComment, t as camelToKebabCase, u as isStyleSectionMarkerComment } from "./string-utils-Bo3cWgss.mjs";
 import { a as terminateStandaloneInterpolationStatements, i as parseStyledTemplateLiteral, n as isTemplatePlaceholderInSelectorContext, r as PLACEHOLDER_RE } from "./selector-context-heuristic-LVizWWOR.mjs";
 import { _ as walkForImportsAndTemplates, a as mergeComponentPropUsage, i as getExhaustiveObservedStaticValues, n as createComponentPropUsageInfo, o as readStaticJsxLiteral, r as formatObservedVariantCondition, s as collectStylexExportNames, t as KNOWN_NON_ELEMENT_PROPS, u as buildImportMapFromNodes } from "./prop-usage-SADzZJdX.mjs";
 import { createRequire } from "node:module";
@@ -351,24 +351,33 @@ const UNSUPPORTED_STYLEX_CSS_PROPS = new Set([
 	"all",
 	"scroll-margin-block",
 	"scroll-margin-block-start",
-	"scroll-margin-block-end",
-	"scroll-margin-inline",
-	"scroll-margin-inline-start",
-	"scroll-margin-inline-end",
-	"scroll-padding-block",
-	"scroll-padding-block-start",
-	"scroll-padding-block-end",
-	"scroll-padding-inline",
-	"scroll-padding-inline-start",
-	"scroll-padding-inline-end"
+	"scroll-margin-block-end"
 ]);
 /**
+* Logical scroll shorthands that expand to Start/End longhands. StyleX's
+* valid-styles rule accepts only the longhand forms.
+*/
+const LOGICAL_SCROLL_AXIS_SHORTHANDS = {
+	"scroll-margin-inline": "scrollMarginInline",
+	"scroll-padding-block": "scrollPaddingBlock",
+	"scroll-padding-inline": "scrollPaddingInline"
+};
+/**
 * Returns true if the CSS property is a shorthand that StyleX cannot express directly
 * and requires expansion (e.g., `padding`, `margin`, `border`, `background`).
 */
 function isCssShorthandProperty(cssProp) {
 	return cssProp in DIRECTIONAL_SHORTHAND_MAP || cssProp === "border" || /^border-(top|right|bottom|left)$/.test(cssProp) || cssProp === "background";
 }
+/**
+* True for the logical scroll axis shorthands (`scroll-margin-inline`,
+* `scroll-padding-block`, `scroll-padding-inline`). StyleX accepts only their
+* Start/End longhands, so a static value is expanded; a dynamic value cannot be
+* split losslessly and must bail.
+*/
+function isLogicalScrollAxisShorthand(cssProp) {
+	return cssProp.trim() in LOGICAL_SCROLL_AXIS_SHORTHANDS;
+}
 function isUnsupportedStylexProperty(cssProp) {
 	return UNSUPPORTED_STYLEX_CSS_PROPS.has(cssProp.trim());
 }
@@ -394,6 +403,111 @@ function resolveBackgroundStylexPropForVariants(values) {
 	if (hasGradient && hasColor) return null;
 	return hasGradient ? "backgroundImage" : "backgroundColor";
 }
+/**
+* Expands a static multi-component `background` shorthand (single layer) into
+* the full set of StyleX background longhands, e.g.
+* `#fff url(a.svg) no-repeat center / cover`. Components omitted from the
+* shorthand are emitted at their CSS initial value (e.g. `backgroundColor:
+* transparent`), reproducing the shorthand's reset semantics so the expansion
+* fully overrides any background longhand inherited from a merged/extended base.
+*
+* Returns null when the value cannot be expanded losslessly: multiple layers
+* (top-level commas), unrecognized tokens, duplicate components, or fewer than
+* two explicit components (single components keep the single-longhand path).
+*/
+function expandBackgroundShorthandComponents(rawValue) {
+	const value = rawValue.trim();
+	if (!value || hasTopLevelMatch(value, /,/)) return null;
+	const tokens = tokenizeBackgroundValue(value);
+	if (!tokens) return null;
+	let color;
+	let image;
+	let attachment;
+	const repeatTokens = [];
+	const positionTokens = [];
+	const sizeTokens = [];
+	const boxTokens = [];
+	let inSizeMode = false;
+	for (const token of tokens) {
+		if (token === "/") {
+			if (inSizeMode || positionTokens.length === 0) return null;
+			inSizeMode = true;
+			continue;
+		}
+		if (inSizeMode) {
+			if (sizeTokens.length >= 2 || !isBackgroundSizeToken(token)) return null;
+			sizeTokens.push(token);
+			continue;
+		}
+		if (token === "none" || isBackgroundImageValue(token)) {
+			if (image !== void 0) return null;
+			image = token;
+			continue;
+		}
+		if (isCssColorToken(token)) {
+			if (color !== void 0) return null;
+			color = token;
+			continue;
+		}
+		if (BACKGROUND_REPEAT_KEYWORDS.has(token)) {
+			if (repeatTokens.length >= 2) return null;
+			repeatTokens.push(token);
+			continue;
+		}
+		if (BACKGROUND_ATTACHMENT_KEYWORDS.has(token)) {
+			if (attachment !== void 0) return null;
+			attachment = token;
+			continue;
+		}
+		if (BACKGROUND_BOX_KEYWORDS.has(token)) {
+			if (boxTokens.length >= 2) return null;
+			boxTokens.push(token);
+			continue;
+		}
+		if (isBackgroundPositionToken(token)) {
+			if (positionTokens.length >= 2) return null;
+			positionTokens.push(token);
+			continue;
+		}
+		return null;
+	}
+	if (inSizeMode && sizeTokens.length === 0) return null;
+	if ((color !== void 0 ? 1 : 0) + (image !== void 0 ? 1 : 0) + (attachment !== void 0 ? 1 : 0) + (repeatTokens.length ? 1 : 0) + (positionTokens.length ? 1 : 0) + (sizeTokens.length ? 1 : 0) + (boxTokens.length ? 1 : 0) < 2) return null;
+	return [
+		{
+			prop: "backgroundColor",
+			value: color ?? "transparent"
+		},
+		{
+			prop: "backgroundImage",
+			value: image ?? "none"
+		},
+		{
+			prop: "backgroundRepeat",
+			value: repeatTokens.length ? repeatTokens.join(" ") : "repeat"
+		},
+		{
+			prop: "backgroundAttachment",
+			value: attachment ?? "scroll"
+		},
+		{
+			prop: "backgroundPosition",
+			value: positionTokens.length ? positionTokens.join(" ") : "0% 0%"
+		},
+		{
+			prop: "backgroundSize",
+			value: sizeTokens.length ? sizeTokens.join(" ") : "auto"
+		},
+		{
+			prop: "backgroundOrigin",
+			value: boxTokens[0] ?? "padding-box"
+		},
+		{
+			prop: "backgroundClip",
+			value: boxTokens[1] ?? boxTokens[0] ?? "border-box"
+		}
+	];
+}
 function parseInterpolatedBorderStaticParts(args) {
 	const { prop, prefix, suffix } = args;
 	const borderMatch = prop.match(/^border(-top|-right|-bottom|-left)?$/);
@@ -464,6 +578,28 @@ function cssDeclarationToStylexDeclarations(decl) {
 			}
 		}));
 	}
+	const logicalScrollAxis = LOGICAL_SCROLL_AXIS_SHORTHANDS[prop];
+	if (logicalScrollAxis && decl.value.kind === "static") {
+		const values = splitCssValueWhitespace(decl.valueRaw.trim());
+		if (values.length >= 1 && values.length <= 2) {
+			const start = values[0];
+			const end = values[1] ?? start;
+			const withImportant = (value) => decl.important ? `${value} !important` : value;
+			return [{
+				prop: `${logicalScrollAxis}Start`,
+				value: {
+					kind: "static",
+					value: withImportant(start)
+				}
+			}, {
+				prop: `${logicalScrollAxis}End`,
+				value: {
+					kind: "static",
+					value: withImportant(end)
+				}
+			}];
+		}
+	}
 	if (prop === "background") {
 		const rawVal = (decl.valueRaw ?? "").trim();
 		if (rawVal === "none") return [{
@@ -482,6 +618,22 @@ function cssDeclarationToStylexDeclarations(decl) {
 		}];
 	}
 	if (prop === "display" && decl.value.kind === "static" && decl.valueRaw.trim() === "wrap") return [];
+	if (prop === "overflow" && decl.value.kind === "static") {
+		const tokens = decl.valueRaw.trim().split(/\s+/);
+		if (tokens.length === 2) return [{
+			prop: "overflowX",
+			value: {
+				kind: "static",
+				value: tokens[0]
+			}
+		}, {
+			prop: "overflowY",
+			value: {
+				kind: "static",
+				value: tokens[1]
+			}
+		}];
+	}
 	if (prop === "animation" && decl.value.kind === "static" && decl.valueRaw.trim() === "none") return [{
 		prop: "animationName",
 		value: decl.value
@@ -729,6 +881,87 @@ function classifyBorderTokens(tokens) {
 		color
 	};
 }
+const BACKGROUND_REPEAT_KEYWORDS = new Set([
+	"repeat",
+	"repeat-x",
+	"repeat-y",
+	"no-repeat",
+	"space",
+	"round"
+]);
+const BACKGROUND_ATTACHMENT_KEYWORDS = new Set([
+	"scroll",
+	"fixed",
+	"local"
+]);
+const BACKGROUND_BOX_KEYWORDS = new Set([
+	"border-box",
+	"padding-box",
+	"content-box"
+]);
+const BACKGROUND_POSITION_KEYWORDS = new Set([
+	"left",
+	"right",
+	"top",
+	"bottom",
+	"center"
+]);
+const CSS_COLOR_FUNCTION_RE = /^(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color)\(/i;
+const CSS_NAMED_COLORS = new Set("aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen transparent currentcolor".split(" "));
+function isCssColorToken(token) {
+	if (token.startsWith("#")) return /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(token);
+	if (CSS_COLOR_FUNCTION_RE.test(token)) return true;
+	return CSS_NAMED_COLORS.has(token.toLowerCase());
+}
+function isBackgroundPositionToken(token) {
+	return BACKGROUND_POSITION_KEYWORDS.has(token.toLowerCase()) || /^-?\d*\.?\d+(?:[a-z%]*)$/i.test(token) || /^calc\(/i.test(token);
+}
+function isBackgroundSizeToken(token) {
+	const lower = token.toLowerCase();
+	return lower === "cover" || lower === "contain" || lower === "auto" || /^-?\d*\.?\d+(?:[a-z%]*)$/i.test(token) || /^calc\(/i.test(token);
+}
+/**
+* Splits a background shorthand value into top-level tokens, keeping function
+* calls intact and emitting `/` (position/size separator) as its own token.
+* Returns null for values containing placeholders or unbalanced parens.
+*/
+function tokenizeBackgroundValue(value) {
+	if (value.includes("__SC_EXPR_")) return null;
+	const tokens = [];
+	let current = "";
+	let depth = 0;
+	const flush = () => {
+		if (current) {
+			tokens.push(current);
+			current = "";
+		}
+	};
+	for (const c of value) {
+		if (c === "(") {
+			depth++;
+			current += c;
+			continue;
+		}
+		if (c === ")") {
+			depth = Math.max(0, depth - 1);
+			current += c;
+			continue;
+		}
+		if (depth === 0 && /\s/.test(c)) {
+			flush();
+			continue;
+		}
+		if (depth === 0 && c === "/") {
+			flush();
+			tokens.push("/");
+			continue;
+		}
+		current += c;
+	}
+	if (depth !== 0) return null;
+	flush();
+	return tokens.length ? tokens : null;
+}
 //#endregion
 //#region src/internal/transform-parse-expr.ts
 function parseExpr(api, exprSource) {
@@ -1741,6 +1974,11 @@ function toSuffixFromProp(propName) {
 			return suffixes.join("");
 		}
 	}
+	const defaultTruthyMatch = trimmed.match(/^(.+?) === undefined \|\| (.+)$/);
+	if (defaultTruthyMatch) {
+		const lhs = defaultTruthyMatch[1].replace(/^\$/, "");
+		if (lhs === defaultTruthyMatch[2].replace(/^\$/, "")) return toSuffixFromProp(lhs);
+	}
 	if (trimmed.includes(" || ")) {
 		const parts = trimmed.split(" || ").map((s) => s.trim()).filter(Boolean);
 		if (parts.length) {
@@ -3498,7 +3736,7 @@ function specifierExportedName(spec) {
 * - Disjunction: `"a || b"` → `a || b`
 * - Grouped negation: `"!(a || b)"` → `!(a || b)`
 */
-function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
+function parseVariantWhenToAst(j, when, booleanProps, knownProps, nonPropRoots) {
 	const buildMemberExpr = (raw) => {
 		if (!raw.includes(".")) return null;
 		const parts = raw.split(".").map((part) => part.trim()).filter(Boolean);
@@ -3533,7 +3771,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 			}
 			const memberExpr = buildMemberExpr(trimmedRaw);
 			if (memberExpr) return {
-				propName: root && root !== "theme" && isConditionPropIdentifier(root) ? root : null,
+				propName: root && root !== "theme" && !nonPropRoots?.has(root) && isConditionPropIdentifier(root) ? root : null,
 				expr: memberExpr
 			};
 			return {
@@ -3542,7 +3780,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 			};
 		}
 		return {
-			propName: trimmedRaw === "theme" || !isConditionPropIdentifier(trimmedRaw) ? null : trimmedRaw,
+			propName: trimmedRaw === "theme" || nonPropRoots?.has(trimmedRaw) || !isConditionPropIdentifier(trimmedRaw) ? null : trimmedRaw,
 			expr: j.identifier(trimmedRaw)
 		};
 	};
@@ -3553,7 +3791,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 		isBoolean: true
 	};
 	if (trimmed.startsWith("!(") && trimmed.endsWith(")")) {
-		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(2, -1).trim(), booleanProps, knownProps);
+		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(2, -1).trim(), booleanProps, knownProps, nonPropRoots);
 		return {
 			cond: j.unaryExpression("!", innerParsed.cond),
 			props: innerParsed.props,
@@ -3561,7 +3799,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 		};
 	}
 	if (trimmed.includes("&&")) {
-		const parsed = trimmed.split("&&").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps, knownProps));
+		const parsed = trimmed.split("&&").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps, knownProps, nonPropRoots));
 		const firstParsed = parsed[0];
 		if (!firstParsed) return {
 			cond: j.identifier("true"),
@@ -3575,7 +3813,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 		};
 	}
 	if (trimmed.includes(" || ")) {
-		const parsed = trimmed.split(" || ").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps, knownProps));
+		const parsed = trimmed.split(" || ").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps, knownProps, nonPropRoots));
 		const firstParsedOr = parsed[0];
 		if (!firstParsedOr) return {
 			cond: j.identifier("true"),
@@ -3589,7 +3827,7 @@ function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 		};
 	}
 	if (trimmed.startsWith("!")) {
-		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(1).trim(), booleanProps, knownProps);
+		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(1).trim(), booleanProps, knownProps, nonPropRoots);
 		return {
 			cond: j.unaryExpression("!", innerParsed.cond),
 			props: innerParsed.props,
@@ -3718,8 +3956,8 @@ function isConditionPropIdentifier(name, knownProps) {
 * function's parameter destructuring.
 */
 function collectConditionProps(j, args) {
-	const { when, destructureProps, booleanProps, knownProps } = args;
-	const parsed = parseVariantWhenToAst(j, when, booleanProps, knownProps);
+	const { when, destructureProps, booleanProps, knownProps, nonPropRoots } = args;
+	const parsed = parseVariantWhenToAst(j, when, booleanProps, knownProps, nonPropRoots);
 	if (destructureProps) {
 		for (const p of parsed.props) if (p && !destructureProps.includes(p)) destructureProps.push(p);
 	}
@@ -4627,6 +4865,19 @@ function getPropertyNameFromKey(key) {
 * Core concepts: deep merge semantics, AST node detection, and media query resolution.
 */
 /**
+* Marks an emitted AST value node as proven to be a single CSS token (e.g. a
+* numeric stylex const that had a unit suffix). Shorthand properties holding
+* such values cannot expand to multiple tokens, so the opaque-shorthand
+* warning does not apply to them.
+*/
+function markProvenSingleTokenValue(node) {
+	if (node && typeof node === "object") provenSingleTokenValues.add(node);
+}
+function isProvenSingleTokenValue(node) {
+	return !!node && typeof node === "object" && provenSingleTokenValues.has(node);
+}
+const provenSingleTokenValues = /* @__PURE__ */ new WeakSet();
+/**
 * Tries to resolve a CallExpression via the adapter's `resolveCall`.
 * Shared by both css-helper and process-rules slot resolution.
 *
@@ -5284,6 +5535,10 @@ function staticStringValue(value) {
 function invertWhen(when) {
 	if (when.startsWith("!(") && when.endsWith(")")) return when.slice(2, -1);
 	if (when.startsWith("!")) return when.slice(1);
+	if (when.includes(" || ") || when.includes(" && ")) {
+		if (when.includes(" || ") && when.includes(" && ")) return null;
+		return `!(${when})`;
+	}
 	const match = when.match(/^(.+)\s+(===|!==)\s+(.+)$/);
 	if (match) {
 		const [, propName, op, rhs] = match;
@@ -5336,31 +5591,46 @@ const createPropTestHelpers = (bindings) => {
 		}
 		return null;
 	};
+	const applyDefaultToTruthyWhen = (whenName, propName) => {
+		if (bindings.kind !== "destructured" || !bindings.defaults?.has(propName)) return whenName;
+		if (whenName !== propName) return null;
+		const defaultValue = literalToStaticValue(bindings.defaults.get(propName));
+		if (defaultValue === null) return null;
+		return defaultValue ? `${whenName} === undefined || ${whenName}` : whenName;
+	};
 	const parseTestInfo = (test) => {
 		if (!test || typeof test !== "object") return null;
 		if (test.type === "Identifier" && bindings.kind === "destructured") {
 			const propAccess = readPropAccess(test);
-			return propAccess ? {
-				when: propAccess.whenName,
+			if (!propAccess) return null;
+			const when = applyDefaultToTruthyWhen(propAccess.whenName, propAccess.propName);
+			return when === null ? null : {
+				when,
 				propName: propAccess.propName
-			} : null;
+			};
 		}
 		if (isMemberExpression(test)) {
 			const propAccess = readPropAccess(test);
-			return propAccess ? {
-				when: propAccess.whenName,
+			if (!propAccess) return null;
+			const when = applyDefaultToTruthyWhen(propAccess.whenName, propAccess.propName);
+			return when === null ? null : {
+				when,
 				propName: propAccess.propName
-			} : null;
+			};
 		}
 		if (test.type === "UnaryExpression" && test.operator === "!" && test.argument) {
 			const propAccess = readPropAccess(test.argument);
-			return propAccess ? {
-				when: `!${propAccess.whenName}`,
+			if (!propAccess) return null;
+			const truthyWhen = applyDefaultToTruthyWhen(propAccess.whenName, propAccess.propName);
+			if (truthyWhen === null) return null;
+			return {
+				when: truthyWhen === propAccess.whenName ? `!${truthyWhen}` : `!(${truthyWhen})`,
 				propName: propAccess.propName
-			} : null;
+			};
 		}
 		if (test.type === "BinaryExpression" && (test.operator === "===" || test.operator === "!==")) {
 			const left = test.left;
+			const operator = test.operator;
 			const getRhsValue = () => {
 				const rhsTyped = test.right;
 				if (rhsTyped.type === "Identifier" && rhsTyped.name === "undefined") return "undefined";
@@ -5368,12 +5638,28 @@ const createPropTestHelpers = (bindings) => {
 				if (rhs === null) return getMemberExpressionSource(test.right);
 				return JSON.stringify(rhs);
 			};
+			const buildBinaryWhen = (propAccess, rhsValue) => {
+				const base = `${propAccess.whenName} ${operator} ${rhsValue}`;
+				if (bindings.kind !== "destructured" || !bindings.defaults?.has(propAccess.propName)) return base;
+				if (propAccess.whenName !== propAccess.propName || rhsValue === "undefined") return null;
+				const defaultValue = literalToStaticValue(bindings.defaults.get(propAccess.propName));
+				if (defaultValue === null) return null;
+				let rhsStatic;
+				try {
+					rhsStatic = JSON.parse(rhsValue);
+				} catch {
+					return null;
+				}
+				if (defaultValue !== rhsStatic) return base;
+				return operator === "===" ? `${propAccess.whenName} === undefined || ${base}` : `${propAccess.whenName} !== undefined && ${base}`;
+			};
 			if (bindings.kind === "destructured" && left.type === "Identifier") {
 				const propAccess = readPropAccess(left);
 				const rhsValue = getRhsValue();
 				if (!propAccess || rhsValue === null) return null;
-				return {
-					when: `${propAccess.whenName} ${test.operator} ${rhsValue}`,
+				const when = buildBinaryWhen(propAccess, rhsValue);
+				return when === null ? null : {
+					when,
 					propName: propAccess.propName
 				};
 			}
@@ -5381,8 +5667,9 @@ const createPropTestHelpers = (bindings) => {
 				const propAccess = readPropAccess(left);
 				const rhsValue = getRhsValue();
 				if (!propAccess || rhsValue === null) return null;
-				return {
-					when: `${propAccess.whenName} ${test.operator} ${rhsValue}`,
+				const when = buildBinaryWhen(propAccess, rhsValue);
+				return when === null ? null : {
+					when,
 					propName: propAccess.propName
 				};
 			}
@@ -8513,10 +8800,10 @@ function collectDeclPropNames(root, j, decl, filter) {
 	const addIfMatch = (name) => {
 		if (filter(name)) result.add(name);
 	};
-	for (const when of Object.keys(decl.variantStyleKeys ?? {})) for (const p of parseVariantWhenToAst(j, when).props) addIfMatch(p);
+	for (const when of Object.keys(decl.variantStyleKeys ?? {})) for (const p of parseVariantWhenToAst(j, when, void 0, void 0, decl.nonPropConditionRoots).props) addIfMatch(p);
 	for (const sf of decl.styleFnFromProps ?? []) {
 		addIfMatch(sf.jsxProp);
-		if (sf.conditionWhen) for (const p of parseVariantWhenToAst(j, sf.conditionWhen).props) addIfMatch(p);
+		if (sf.conditionWhen) for (const p of parseVariantWhenToAst(j, sf.conditionWhen, void 0, void 0, decl.nonPropConditionRoots).props) addIfMatch(p);
 	}
 	for (const isp of decl.inlineStyleProps ?? []) addIfMatch(isp.jsxProp ?? isp.prop);
 	for (const cv of decl.compoundVariants ?? []) if (cv.kind === "3branch" || cv.kind === "4branch") {
@@ -14521,10 +14808,13 @@ function tryHandleAnimation(args) {
 		for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {
 			const tokens = segments[segmentIndex];
 			if (!tokens.length) return false;
-			const m = tokens.shift().match(/^__SC_EXPR_(\d+)__$/);
-			if (!m) return false;
+			const nameIdx = tokens.findIndex((t) => {
+				const slotMatch = t.match(/^__SC_EXPR_(\d+)__$/);
+				return slotMatch ? getKeyframeFromSlot(Number(slotMatch[1])) !== null : false;
+			});
+			if (nameIdx === -1) return false;
+			const m = tokens.splice(nameIdx, 1)[0].match(/^__SC_EXPR_(\d+)__$/);
 			const kf = getKeyframeFromSlot(Number(m[1]));
-			if (!kf) return false;
 			animNames.push({
 				kind: "ident",
 				name: kf
@@ -20653,7 +20943,8 @@ function buildVariantStyleExprs(opts) {
 					when: positiveWhen,
 					destructureProps,
 					booleanProps,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				if (onNewDestructureProp && prevLengthRef && destructureProps) for (let i = prevLengthRef.value; i < destructureProps.length; i++) onNewDestructureProp(destructureProps[i]);
 				const isCurrentPositive = areEquivalentWhen(when, positiveWhen);
@@ -20668,7 +20959,8 @@ function buildVariantStyleExprs(opts) {
 				when,
 				destructureProps,
 				booleanProps,
-				...knownProps ? { knownProps } : {}
+				...knownProps ? { knownProps } : {},
+				nonPropRoots: d.nonPropConditionRoots
 			});
 			if (onNewDestructureProp && prevLengthRef && destructureProps) for (let i = prevLengthRef.value; i < destructureProps.length; i++) onNewDestructureProp(destructureProps[i]);
 			const styleExpr = styleRef(j, stylesIdentifier, variantKey);
@@ -20684,7 +20976,8 @@ function buildVariantStyleExprs(opts) {
 			when,
 			destructureProps,
 			booleanProps,
-			...knownProps ? { knownProps } : {}
+			...knownProps ? { knownProps } : {},
+			nonPropRoots: d.nonPropConditionRoots
 		});
 		const styleExpr = styleRef(j, stylesIdentifier, variantKey);
 		pushExpr(emitter.makeConditionalStyleExpr({
@@ -24569,7 +24862,8 @@ function emitShouldForwardPropWrappers(ctx) {
 		for (const when of Object.keys(d.variantStyleKeys ?? {})) {
 			const { props } = emitter.collectConditionProps({
 				when,
-				...knownConditionProps ? { knownProps: knownConditionProps } : {}
+				...knownConditionProps ? { knownProps: knownConditionProps } : {},
+				nonPropRoots: d.nonPropConditionRoots
 			});
 			for (const p of props) if (p) extraProps.add(p);
 		}
@@ -24715,7 +25009,8 @@ function emitShouldForwardPropWrappers(ctx) {
 			if (compoundVariantKeys.has(when)) continue;
 			const { props } = emitter.collectConditionProps({
 				when,
-				...knownProps ? { knownProps } : {}
+				...knownProps ? { knownProps } : {},
+				nonPropRoots: d.nonPropConditionRoots
 			});
 			for (const p of props) if (p && !dropProps.includes(p)) dropProps.push(p);
 		}
@@ -24726,7 +25021,8 @@ function emitShouldForwardPropWrappers(ctx) {
 			for (const extra of d.extraStylexPropsArgs) if (extra.when) {
 				const { props } = emitter.collectConditionProps({
 					when: extra.when,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				for (const p of props) if (p && !destructureParts.includes(p)) destructureParts.push(p);
 			}
@@ -24760,7 +25056,8 @@ function emitShouldForwardPropWrappers(ctx) {
 					when: p.conditionWhen,
 					destructureProps: destructureParts,
 					booleanProps,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				expr = emitter.makeConditionalStyleExpr({
 					cond,
@@ -25059,7 +25356,8 @@ function emitSimpleWithConfigWrappers(ctx) {
 			if (d.variantStyleKeys) for (const [when] of Object.entries(d.variantStyleKeys)) {
 				const { props } = emitter.collectConditionProps({
 					when,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				for (const p of props) if (p) variantProps.add(p);
 			}
@@ -25073,7 +25371,8 @@ function emitSimpleWithConfigWrappers(ctx) {
 				if (!extra.when) continue;
 				const { props } = emitter.collectConditionProps({
 					when: extra.when,
-					...knownProps ? { knownProps } : {}
+					...knownProps ? { knownProps } : {},
+					nonPropRoots: d.nonPropConditionRoots
 				});
 				for (const p of props) if (p) extraProps.add(p);
 			}
@@ -25668,7 +25967,7 @@ function collectPropsUsedOutsideExtraStyleConditionals(j, d, knownProps) {
 		if (name) used.add(name);
 	};
 	for (const [when] of Object.entries(d.variantStyleKeys ?? {})) {
-		const parsed = parseVariantWhenToAst(j, when, void 0, knownProps);
+		const parsed = parseVariantWhenToAst(j, when, void 0, knownProps, d.nonPropConditionRoots);
 		for (const prop of parsed.props) add(prop);
 	}
 	for (const dim of d.variantDimensions ?? []) {
@@ -27268,43 +27567,47 @@ function tryResolveConditionalValue(node, ctx) {
 	}
 	if (info?.kind === "themeBinding" && test.type === "Identifier" && typeof test.name === "string" && isDestructuredFromParam(expr, test.name)) {
 		const destructuredProp = test.name;
-		const cons = getBranch(consequent);
-		const alt = getBranch(alternate);
-		if (cons && alt) {
-			if (new Set([cons.usage, alt.usage]).size === 1) {
-				const usage = cons.usage;
-				const variants = [{
-					nameHint: "truthy",
-					when: destructuredProp,
-					expr: cons.expr,
-					imports: cons.imports
-				}, {
-					nameHint: "falsy",
-					when: `!${destructuredProp}`,
-					expr: alt.expr,
-					imports: alt.imports
-				}];
-				return usage === "props" ? {
-					type: "splitVariantsResolvedStyles",
-					variants
-				} : {
-					type: "splitVariantsResolvedValue",
-					variants
-				};
+		const whens = destructuredBooleanWhens(destructuredProp, getArrowFnParamBindings(expr));
+		if (whens) {
+			const cons = getBranch(consequent);
+			const alt = getBranch(alternate);
+			if (cons && alt) {
+				if (new Set([cons.usage, alt.usage]).size === 1) {
+					const usage = cons.usage;
+					const variants = [{
+						nameHint: "truthy",
+						when: whens.truthy,
+						expr: cons.expr,
+						imports: cons.imports
+					}, {
+						nameHint: "falsy",
+						when: whens.falsy,
+						expr: alt.expr,
+						imports: alt.imports
+					}];
+					return usage === "props" ? {
+						type: "splitVariantsResolvedStyles",
+						variants
+					} : {
+						type: "splitVariantsResolvedValue",
+						variants
+					};
+				}
 			}
+			const oneSided = buildOneSidedVariantResult({
+				cons,
+				alt,
+				alternate,
+				truthyWhen: whens.truthy
+			});
+			if (oneSided) return oneSided;
+			if (!cons || !alt) return buildRuntimeCallResult();
 		}
-		const oneSided = buildOneSidedVariantResult({
-			cons,
-			alt,
-			alternate,
-			truthyWhen: destructuredProp
-		});
-		if (oneSided) return oneSided;
-		if (!cons || !alt) return buildRuntimeCallResult();
 	}
 	if (paramBindings?.kind === "destructured" && test.type === "Identifier" && typeof test.name === "string") {
 		const resolvedProp = resolveIdentifierToPropName(test, paramBindings);
-		if (resolvedProp) {
+		const resolvedWhens = resolvedProp ? destructuredBooleanWhens(resolvedProp, paramBindings) : null;
+		if (resolvedProp && resolvedWhens) {
 			const cons = getBranch(consequent);
 			const alt = getBranch(alternate);
 			if (cons && alt) {
@@ -27312,12 +27615,12 @@ function tryResolveConditionalValue(node, ctx) {
 					const usage = cons.usage;
 					const variants = [{
 						nameHint: "truthy",
-						when: resolvedProp,
+						when: resolvedWhens.truthy,
 						expr: cons.expr,
 						imports: cons.imports
 					}, {
 						nameHint: "falsy",
-						when: `!${resolvedProp}`,
+						when: resolvedWhens.falsy,
 						expr: alt.expr,
 						imports: alt.imports
 					}];
@@ -27342,7 +27645,7 @@ function tryResolveConditionalValue(node, ctx) {
 				cons,
 				alt,
 				alternate,
-				truthyWhen: resolvedProp
+				truthyWhen: resolvedWhens.truthy
 			});
 			if (oneSided) return oneSided;
 			if (!cons || !alt) return buildRuntimeCallResult();
@@ -27419,6 +27722,8 @@ function tryResolveConditionalCssBlock(node, ctx) {
 	const { left, right } = body;
 	const testProp = paramName ? getSinglePropFromMemberExpr(left, paramName) : bindings?.kind === "destructured" ? resolveIdentifierToPropName(left, bindings) : null;
 	if (!testProp) return null;
+	const whens = destructuredBooleanWhens(testProp, bindings);
+	if (!whens) return null;
 	const cssText = literalToString(right);
 	if (cssText !== null && cssText !== void 0) {
 		const style = parseCssDeclarationBlock(cssText);
@@ -27427,7 +27732,7 @@ function tryResolveConditionalCssBlock(node, ctx) {
 			type: "splitVariants",
 			variants: [{
 				nameHint: "truthy",
-				when: testProp,
+				when: whens.truthy,
 				style
 			}]
 		};
@@ -27435,7 +27740,7 @@ function tryResolveConditionalCssBlock(node, ctx) {
 	if (!paramName) return null;
 	return resolveThemeTemplateToCssVariant(right, paramName, ctx, {
 		nameHint: "truthy",
-		when: testProp
+		when: whens.truthy
 	});
 }
 function tryResolveConditionalCssBlockTernary(node, ctx) {
@@ -27887,6 +28192,35 @@ function replaceThemeRefsWithHookVar(expr, paramName, info) {
 	};
 	return replace(cloned);
 }
+/**
+* Builds truthy/falsy `when` condition strings for a destructured boolean-ish prop,
+* accounting for destructuring defaults. A default applies only when the prop is
+* `undefined`, so a statically-truthy default means the truthy branch must also
+* apply when the prop is unset (`prop === undefined || prop`).
+*
+* Returns null when the prop has a default whose truthiness cannot be determined
+* statically — callers should fall back to other handlers instead of emitting a
+* condition that ignores the default.
+*/
+function destructuredBooleanWhens(propName, bindings) {
+	if (bindings?.kind !== "destructured" || !bindings.defaults?.has(propName)) return {
+		truthy: propName,
+		falsy: `!${propName}`
+	};
+	const defaultValue = literalToStaticValue(bindings.defaults.get(propName));
+	if (defaultValue === null) return null;
+	if (defaultValue) {
+		const truthy = `${propName} === undefined || ${propName}`;
+		return {
+			truthy,
+			falsy: `!(${truthy})`
+		};
+	}
+	return {
+		truthy: propName,
+		falsy: `!${propName}`
+	};
+}
 //#endregion
 //#region src/internal/builtin-handlers.ts
 /**
@@ -29386,7 +29720,9 @@ function tryHandleInterpolatedStringValue(args) {
 	const outputs = cssDeclarationToStylexDeclarations(d);
 	for (let i = 0; i < outputs.length; i++) {
 		const out = outputs[i];
-		setValue(out.prop, maybeOmitPxUnitFromStylexValue(j, tl, out.prop, d.important, { numericIdentifiers: args.numericIdentifiers }));
+		const emitted = maybeOmitPxUnitFromStylexValue(j, tl, out.prop, d.important, { numericIdentifiers: args.numericIdentifiers });
+		if (emitted !== tl && hasSingleSlotUnitSuffix(d.value)) markProvenSingleTokenValue(emitted);
+		setValue(out.prop, emitted);
 		if (i === 0 && (d.leadingComment || d.leadingLineComment)) addPropComments(styleObj, out.prop, {
 			leading: d.leadingComment,
 			leadingLine: d.leadingLineComment
@@ -33494,7 +33830,12 @@ const createValuePatternHandlers = (ctx) => {
 					callArg,
 					condition: "always"
 				});
-			} else styleFnFromProps.push({
+			} else if (expr.body.operator === "||") styleFnFromProps.push({
+				fnKey,
+				jsxProp,
+				condition: "truthy"
+			});
+			else styleFnFromProps.push({
 				fnKey,
 				jsxProp
 			});
@@ -34201,6 +34542,89 @@ function createDeclProcessingState(state, decl) {
 	};
 }
 //#endregion
+//#region src/internal/lower-rules/validate-decl-conflicts.ts
+/**
+* Returns the name of an imported runtime-condition root (recorded in
+* `nonPropConditionRoots`) that also appears as a genuine component prop. Such a
+* collision is unrepresentable: the decl-wide non-prop marking suppresses
+* destructuring of the prop, so a prop-based variant would silently read the
+* imported binding instead. Covers both typed props and props inferred from
+* `props.<name>` usage in styling.
+*
+* `variantWhens` must be sourced from the in-progress finalize state, since
+* `decl.variantStyleKeys` is not assigned until later in finalize.
+*/
+function findImportedRootPropCollision(decl, variantWhens) {
+	const roots = decl.nonPropConditionRoots;
+	if (!roots || roots.size === 0) return null;
+	const directProps = collectDirectPropReferences(decl);
+	for (const root of roots) {
+		if (directProps.has(root)) return root;
+		const bareRef = new RegExp(`(?:^|[^\\w.])${escapeRegex(root)}(?:$|[^\\w.])`);
+		if (variantWhens.some((when) => bareRef.test(when))) return root;
+	}
+	return null;
+}
+/**
+* Returns true when the component declares both a logical scroll longhand
+* (e.g. `scroll-padding-inline-start`) and a physical scroll side
+* (e.g. `scroll-padding-left`) in the same scroll family. StyleX's
+* logical/physical conflict normalization resolves these to physical sides
+* assuming horizontal-tb LTR, but the logical-to-physical mapping depends on
+* `writing-mode`/`direction` (e.g. `inline-start` is the right side in RTL),
+* so any such mix may silently preserve or override the wrong side — bail.
+*/
+function hasConflictingLogicalPhysicalScrollProps(decl) {
+	for (const family of SCROLL_FAMILIES) {
+		let hasLogical = false;
+		let hasPhysical = false;
+		for (const rule of decl.rules) for (const declaration of rule.declarations) {
+			const prop = declaration.property?.trim();
+			if (!prop) continue;
+			const camel = kebabToCamel(prop);
+			if (!camel.startsWith(family)) continue;
+			const side = camel.slice(family.length);
+			if (/^(?:Inline|Block)/.test(side)) hasLogical = true;
+			else if (side === "" || /^(?:Top|Right|Bottom|Left)$/.test(side)) hasPhysical = true;
+		}
+		if (hasLogical && hasPhysical) return true;
+	}
+	return false;
+}
+const SCROLL_FAMILIES = ["scrollMargin", "scrollPadding"];
+function collectDirectPropReferences(decl) {
+	const props = /* @__PURE__ */ new Set();
+	const add = (name) => {
+		if (name && !name.startsWith("__")) props.add(name);
+	};
+	for (const name of decl.typeScriptExplicitPropNames ?? []) add(name);
+	for (const entry of decl.styleFnFromProps ?? []) {
+		add(entry.jsxProp);
+		for (const extra of entry.extraCallArgs ?? []) add(extra.jsxProp);
+	}
+	for (const entry of decl.inlineStyleProps ?? []) add(entry.jsxProp);
+	for (const dim of decl.variantDimensions ?? []) {
+		add(dim.propName);
+		add(dim.namespaceBooleanProp);
+	}
+	for (const cv of decl.compoundVariants ?? []) {
+		add(cv.outerProp);
+		add(cv.innerProp);
+	}
+	const attrs = decl.attrsInfo;
+	if (attrs) {
+		for (const entry of attrs.defaultAttrs ?? []) add(entry.jsxProp);
+		for (const entry of attrs.dynamicAttrs ?? []) add(entry.jsxProp);
+		for (const entry of attrs.conditionalAttrs ?? []) add(entry.jsxProp);
+		for (const entry of attrs.invertedBoolAttrs ?? []) add(entry.jsxProp);
+		for (const entry of attrs.attrsDynamicStyles ?? []) add(entry.jsxProp);
+	}
+	return props;
+}
+function kebabToCamel(prop) {
+	return prop.replace(/-([a-z])/g, (_, ch) => ch.toUpperCase());
+}
+//#endregion
 //#region src/internal/lower-rules/finalize-decl.ts
 /**
 * Finalizes per-declaration style objects after rule processing.
@@ -34209,6 +34633,14 @@ function createDeclProcessingState(state, decl) {
 function finalizeDeclProcessing(ctx) {
 	const { state, decl, styleObj, perPropPseudo, perPropMedia, perPropComputedMedia, nestedSelectors, variantBuckets, variantStyleKeys, variantSourceOrder, extraStyleObjects, styleFnFromProps, styleFnDecls, attrBuckets, observedVariantFallbackFns, inlineStyleProps, localVarValues, cssHelperPropValues } = ctx;
 	const { rewriteCssVarsInStyleObject, rewriteCssVarsInAstNode, relationOverridePseudoBuckets, relationOverrides, ancestorSelectorParents, resolvedStyleObjects, warnings } = state;
+	if (findImportedRootPropCollision(decl, Object.keys(variantStyleKeys ?? {}))) {
+		state.bailUnsupported(decl, "Imported runtime condition root collides with a component prop of the same name");
+		return;
+	}
+	if (hasConflictingLogicalPhysicalScrollProps(decl)) {
+		state.bailUnsupported(decl, "Mixed logical and physical scroll properties cannot be normalized without a known writing-mode");
+		return;
+	}
 	mergeConditionBucket(styleObj, perPropPseudo);
 	mergeConditionBucket(styleObj, perPropMedia);
 	for (const [prop, entry] of perPropComputedMedia) {
@@ -36309,7 +36741,7 @@ const OPAQUE_SHORTHAND_PROPS = new Set([
 function warnOpaqueShorthands(styleObj, decl, warnings) {
 	for (const prop of OPAQUE_SHORTHAND_PROPS) {
 		const val = styleObj[prop];
-		if (val !== void 0 && isAstNode$1(val)) warnings.push({
+		if (val !== void 0 && isAstNode$1(val) && !isProvenSingleTokenValue(val)) warnings.push({
 			severity: "warning",
 			type: "Shorthand property has an opaque value that StyleX will expand to longhands — use `directional` in resolveValue to return separate longhand tokens",
 			loc: decl.loc,
@@ -36985,6 +37417,11 @@ function tryHandleInterpolatedBorder(ctx, args) {
 	if (width) applyResolvedPropValue(widthProp, width);
 	if (style) applyResolvedPropValue(styleProp, style);
 	if (color) applyResolvedPropValue(colorProp, color);
+	const stripConsumedStaticParts = () => {
+		const value = d.value;
+		if (!staticRaw || value?.kind !== "interpolated" || !Array.isArray(value.parts)) return;
+		for (const part of value.parts) if (part?.kind === "static") part.value = "";
+	};
 	const hasStaticWidthOrStyle = Boolean(width || style);
 	const targetProp = interpolationTarget === "color" ? colorProp : interpolationTarget === "width" ? widthProp : styleProp;
 	const targetCssProperty = interpolationTarget === "width" ? directionLower ? `border-${directionLower}-width` : "border-width" : interpolationTarget === "style" ? directionLower ? `border-${directionLower}-style` : "border-style" : directionLower ? `border-${directionLower}-color` : "border-color";
@@ -37046,6 +37483,7 @@ function tryHandleInterpolatedBorder(ctx, args) {
 		const alt = expr.body.alternate;
 		if (isMemberExpression(cons) || isMemberExpression(alt)) {
 			d.property = targetCssProperty;
+			stripConsumedStaticParts();
 			return false;
 		}
 	}
@@ -37242,6 +37680,7 @@ function tryHandleInterpolatedBorder(ctx, args) {
 	if (expr?.type === "ArrowFunctionExpression") {
 		if (expr.body?.type === "MemberExpression") {
 			d.property = targetCssProperty;
+			stripConsumedStaticParts();
 			return false;
 		}
 	}
@@ -37435,7 +37874,39 @@ function handleSplitVariantsResolvedValue(ctx) {
 			target[prop] = map;
 			return map;
 		};
-		const applyWithContext = (prop, valueAst) => {
+		const withImportant = (valueAst) => {
+			if (!d.important || !valueAst || typeof valueAst !== "object") return valueAst;
+			const node = valueAst;
+			if (node.type === "StringLiteral" || node.type === "Literal" || node.type === "NumericLiteral") {
+				if (typeof node.value === "string") return node.value.includes("!important") ? valueAst : j.literal(`${node.value} !important`);
+				if (typeof node.value === "number") return j.literal(`${node.value} !important`);
+				return valueAst;
+			}
+			if (node.type === "TemplateLiteral" && Array.isArray(node.quasis)) {
+				const quasis = node.quasis;
+				const lastIndex = quasis.length - 1;
+				const last = quasis[lastIndex];
+				const lastText = last?.value?.cooked ?? last?.value?.raw ?? "";
+				if (lastText.includes("!important")) return valueAst;
+				const newQuasis = quasis.map((q, i) => i === lastIndex ? j.templateElement({
+					raw: `${lastText} !important`,
+					cooked: `${lastText} !important`
+				}, true) : j.templateElement({
+					raw: q?.value?.raw ?? q?.value?.cooked ?? "",
+					cooked: q?.value?.cooked ?? q?.value?.raw ?? ""
+				}, false));
+				return j.templateLiteral(newQuasis, node.expressions ?? []);
+			}
+			return j.templateLiteral([j.templateElement({
+				raw: "",
+				cooked: ""
+			}, false), j.templateElement({
+				raw: " !important",
+				cooked: " !important"
+			}, true)], [valueAst]);
+		};
+		const applyWithContext = (prop, valueAstRaw) => {
+			const valueAst = withImportant(valueAstRaw);
 			if (media) {
 				const map = getOrCreateConditionMap(prop);
 				map[media] = valueAst;
@@ -38786,9 +39257,10 @@ function handleInterpolatedDeclaration(args) {
 			};
 			const resolveValueResult = resolveValue(resolveValueContext);
 			if (!resolveValueResult) {
+				const isPlainOwnedConstant = info.path.length === 0 && imp.source.kind === "absolutePath" && !isStylexImportSource(imp.source.value);
 				warnings.push({
 					severity: "error",
-					type: "Adapter resolveValue returned undefined for imported value",
+					type: isPlainOwnedConstant ? "Imported constant cannot be referenced inside stylex.create() — move it into a `.stylex` defineConsts/defineVars group (or map it via adapter.resolveValue)" : "Adapter resolveValue returned undefined for imported value",
 					loc: getNodeLocStart(expr) ?? decl.loc,
 					context: {
 						localName: decl.localName,
@@ -38888,7 +39360,8 @@ function handleInterpolatedDeclaration(args) {
 			attrTarget,
 			resolvedSelectorMedia
 		})) continue;
-		if (isImportedShorthandUnitValue(d, decl, importMap)) {
+		const numericIdentifiers = getNumericImportedStylexIdentifiers(j, filePath, importMap, resolverImports);
+		if (isImportedShorthandUnitValue(d, decl, importMap, numericIdentifiers)) {
 			bailUnsupportedLocal(decl, "Unsupported interpolation: call expression");
 			continue;
 		}
@@ -38901,7 +39374,7 @@ function handleInterpolatedDeclaration(args) {
 			addImport,
 			resolveImportedValueExpr,
 			resolveThemeValue,
-			numericIdentifiers: getNumericImportedStylexIdentifiers(j, filePath, importMap, resolverImports),
+			numericIdentifiers,
 			setStyleValue: (prop, value) => applyResolvedPropValue(prop, value, null)
 		})) continue;
 		if (bail) break;
@@ -38910,9 +39383,31 @@ function handleInterpolatedDeclaration(args) {
 			if (slot) {
 				const expr = decl.templateExpressions[slot.slotId];
 				if (tryEmitObservedCssBlockVariantBuckets(expr)) continue;
+				const bailOnPropDependentCssHelper = (helperDecl) => {
+					for (const helperExpr of helperDecl.templateExpressions ?? []) {
+						if (!helperExpr || helperExpr.type !== "ArrowFunctionExpression" && helperExpr.type !== "FunctionExpression") continue;
+						const propsUsed = new Set([...collectPropsFromArrowFn(helperExpr), ...collectPropsFromArrowFnDestructured(helperExpr)]);
+						propsUsed.delete("theme");
+						if (propsUsed.size > 0) {
+							warnings.push({
+								severity: "warning",
+								type: "css helper with prop-based interpolation cannot be reused as a mixin",
+								loc: decl.loc,
+								context: {
+									localName: decl.localName,
+									mixin: helperDecl.localName
+								}
+							});
+							bail = true;
+							return true;
+						}
+					}
+					return false;
+				};
 				if (expr?.type === "Identifier" && cssHelperNames.has(expr.name)) {
 					const helperDecl = declByLocalName.get(expr.name);
 					if (helperDecl) {
+						if (bailOnPropDependentCssHelper(helperDecl)) break;
 						applyCssHelperMixin(decl, helperDecl, cssHelperPropValues, inlineStyleProps);
 						continue;
 					}
@@ -38921,6 +39416,7 @@ function handleInterpolatedDeclaration(args) {
 					const calleeName = expr.callee.name;
 					const helperDecl = declByLocalName.get(calleeName);
 					if (helperDecl?.isCssHelper) {
+						if (bailOnPropDependentCssHelper(helperDecl)) break;
 						applyCssHelperMixin(decl, helperDecl, cssHelperPropValues, inlineStyleProps);
 						continue;
 					}
@@ -39066,7 +39562,24 @@ function handleInterpolatedDeclaration(args) {
 		})) continue;
 		if (d.property && d.value.kind === "interpolated" && tryHandleMultiSlotTernary(ctx, d)) continue;
 		if (tryHandleMultiSlotRuntimeValue(resolveImportedValueExpr)) continue;
-		const slotPart = d.value.parts.find((p) => p.kind === "slot");
+		const remainingSlotParts = d.value.parts.filter((p) => p.kind === "slot");
+		if (remainingSlotParts.filter((p) => {
+			const slotExpr = decl.templateExpressions[p.slotId];
+			return slotExpr?.type === "ArrowFunctionExpression" || slotExpr?.type === "FunctionExpression";
+		}).length > 1) {
+			warnings.push({
+				severity: "error",
+				type: "Unsupported interpolation: multiple dynamic slots in one declaration",
+				loc: decl.loc,
+				context: {
+					localName: decl.localName,
+					property: d.property
+				}
+			});
+			bail = true;
+			break;
+		}
+		const slotPart = remainingSlotParts[0];
 		const slotId = slotPart && slotPart.kind === "slot" ? slotPart.slotId : 0;
 		const expr = decl.templateExpressions[slotId];
 		const loc = getNodeLocStart(expr);
@@ -39592,11 +40105,11 @@ function handleInterpolatedDeclaration(args) {
 			const scalarDynamic = shouldUseScalarDynamicArgs(d.property, d.valueRaw) && dynamicProps.length > 0 ? scalarizePropsObjectDynamicValue({
 				j,
 				valueExpr: dynamicValueExpr,
-				paramName: "props",
+				paramName,
 				propNames: dynamicProps
 			}) : null;
 			const dynamicStyleValueExpr = scalarDynamic?.valueExpr ?? dynamicValueExpr;
-			const dynamicStyleParams = scalarDynamic ? scalarDynamic.paramNames.map((propName) => j.identifier(propName)) : [j.identifier("props")];
+			const dynamicStyleParams = scalarDynamic ? scalarDynamic.paramNames.map((propName) => j.identifier(propName)) : [j.identifier(paramName)];
 			if (scalarDynamic) annotateScalarParams(dynamicStyleParams, scalarDynamic.paramNames);
 			const callArg = j.objectExpression(dynamicProps.map((name) => {
 				const prop = j.property("init", j.identifier(name), j.identifier(name));
@@ -39884,17 +40397,22 @@ function handleInterpolatedDeclaration(args) {
 				const callArg = resolvedCallArg ?? scalarCallArg;
 				const hasExplicitType = !!decl.propsType;
 				const isOptional = ctx.isJsxPropOptional(jsxProp);
+				const foldsStaticBaseIntoPseudoDefault = !media && !!pseudos?.length && staticBaseValueWouldFold(styleObj[out.prop]);
 				styleFnFromProps.push({
 					fnKey,
 					jsxProp,
 					...callArg ? { callArg } : {},
-					...hasExplicitType && !isOptional ? { condition: "always" } : {}
+					...hasExplicitType && !isOptional || foldsStaticBaseIntoPseudoDefault ? { condition: "always" } : {}
 				});
 				if (!styleFnDecls.has(fnKey)) {
 					const param = j.identifier(outParamName);
 					const valueId = j.identifier(outParamName);
 					if (jsxProp !== "__props") annotateParamFromJsxProp(param, jsxProp);
 					if (resolvedCallArg && /\.(ts|tsx)$/.test(filePath)) param.typeAnnotation = j.tsTypeAnnotation(j.tsStringKeyword());
+					if (foldsStaticBaseIntoPseudoDefault && isOptional && jsxProp !== "__props" && /\.(ts|tsx)$/.test(filePath)) {
+						const baseTypeNode = param.typeAnnotation?.typeAnnotation ?? j.tsStringKeyword();
+						param.typeAnnotation = j.tsTypeAnnotation(j.tsUnionType([baseTypeNode, j.tsUndefinedKeyword()]));
+					}
 					if (jsxProp?.startsWith?.("$")) ensureShouldForwardPropDrop(decl, jsxProp);
 					const buildValueExpr = () => {
 						const transformed = (() => {
@@ -39959,7 +40477,28 @@ function handleInterpolatedDeclaration(args) {
 					};
 					const valueExpr = buildValueExpr();
 					const getPropValue = () => {
+						if (!media && !pseudos?.length) return valueExpr;
+						if (!media && pseudos?.length) {
+							const existingStatic = styleObj[out.prop];
+							let defaultValue = j.literal(null);
+							if (existingStatic !== void 0 && existingStatic !== null) if (typeof existingStatic === "object") {
+								if ("type" in existingStatic) {
+									defaultValue = cloneAstNode(existingStatic);
+									delete styleObj[out.prop];
+								}
+							} else {
+								defaultValue = staticValueToLiteral(j, existingStatic);
+								delete styleObj[out.prop];
+							}
+							return j.objectExpression([j.property("init", j.identifier("default"), defaultValue), ...pseudos.map((ps) => j.property("init", j.literal(ps), valueExpr))]);
+						}
 						if (!media) return valueExpr;
+						if (pseudos?.length) return buildPseudoMediaPropValue({
+							j,
+							valueExpr,
+							pseudos,
+							media
+						});
 						const existingFn = styleFnDecls.get(fnKey);
 						let existingValue = null;
 						if (existingFn?.type === "ArrowFunctionExpression") {
@@ -40215,6 +40754,17 @@ function resolveDerivedLocalVariable(j, fnBody, fnParamName, localName, jsxProp)
 function isPseudoElementSelector(pseudoElement) {
 	return pseudoElement === "::before" || pseudoElement === "::after" || pseudoElement === "::placeholder";
 }
+/**
+* Whether a base style value for a property would be folded into a pseudo-gated
+* dynamic style function's `default` (mirrors the fold logic in getPropValue):
+* plain primitives and AST-node values fold; existing pseudo/media condition
+* buckets (plain objects without a `type` discriminator) do not.
+*/
+function staticBaseValueWouldFold(existingStatic) {
+	if (existingStatic === void 0 || existingStatic === null) return false;
+	if (typeof existingStatic === "object") return "type" in existingStatic;
+	return true;
+}
 function tryHandleLocalCustomPropertyDefinition(args) {
 	const { j, d, decl, expr, getOrCreateLocalStylexVar, inlineStyleProps } = args;
 	if (!expr || typeof expr !== "object") return false;
@@ -40269,16 +40819,45 @@ function tryHandleRuntimeConditionalStaticBranches(ctx, args) {
 		state.bailUnsupported(decl, "Unsupported interpolation: call expression");
 		return true;
 	}
-	if (hasLaterDeclarationOverlap(rule, allRules, d, new Set(Object.keys(consequentStyle)))) {
+	if (!subtractLaterStaticOverrides({
+		rule,
+		allRules,
+		currentDecl: d,
+		branchStyles: [consequentStyle, alternateStyle]
+	})) {
 		state.bailUnsupported(decl, "Unsupported interpolation: call expression");
 		return true;
 	}
+	if (!Object.keys(consequentStyle).length && !Object.keys(alternateStyle).length) return true;
 	const target = getBaseStyleTarget();
 	for (const [prop, value] of Object.entries(alternateStyle)) target[prop] = value;
 	applyVariant({ when }, consequentStyle);
 	decl.needsWrapperComponent = true;
+	recordNonPropConditionRoots(decl, expr.test);
 	return true;
 }
+/**
+* Records the root identifiers of an imported runtime condition on the decl so
+* wrapper emission treats them as module-scope bindings rather than component
+* props (which matters for lowercase roots like `browser.isTouchDevice`).
+*/
+function recordNonPropConditionRoots(decl, test) {
+	const roots = decl.nonPropConditionRoots ??= /* @__PURE__ */ new Set();
+	const visit = (expr) => {
+		if (expr.type === "LogicalExpression") {
+			visit(expr.left);
+			visit(expr.right);
+			return;
+		}
+		if (expr.type === "UnaryExpression") {
+			visit(expr.argument);
+			return;
+		}
+		const info = extractRootAndPath(expr);
+		if (info && info.path.length > 0) roots.add(info.rootName);
+	};
+	visit(test);
+}
 function buildStaticBranchStyle(d, rawValue) {
 	if (d.property === "background" && isUnsupportedBackgroundShorthandValue(rawValue)) return null;
 	const staticDecl = {
@@ -40303,24 +40882,120 @@ function sameStyleProps(left, right) {
 	const rightKeys = new Set(Object.keys(right));
 	return leftKeys.length === rightKeys.size && leftKeys.every((key) => rightKeys.has(key));
 }
-function hasLaterDeclarationOverlap(rule, allRules, currentDecl, stylexProps) {
+/**
+* Removes branch properties that are unconditionally overridden by later static
+* declarations in the same selector context, so the runtime variant cannot
+* invert the original CSS cascade. Partially overridden directional props are
+* narrowed to the longhands that survive the override (e.g. `marginBlock`
+* overridden by a later `margin-top` becomes `marginBlockEnd`).
+*
+* Returns false when a later overlapping declaration cannot be subtracted
+* safely (conditional at-rule context, dynamic value, property-less helper, or
+* a multi-token branch value that cannot be split per longhand) — the caller
+* must bail in that case.
+*/
+function subtractLaterStaticOverrides(args) {
+	const { rule, allRules, currentDecl, branchStyles } = args;
 	const currentIndex = rule.declarations.indexOf(currentDecl);
-	if (currentIndex === -1) return false;
-	if (declarationsOverlap(rule.declarations.slice(currentIndex + 1), stylexProps)) return true;
+	if (currentIndex === -1) return true;
+	const laterContexts = [{
+		declarations: rule.declarations.slice(currentIndex + 1),
+		unconditional: true
+	}];
 	const currentRuleIndex = allRules.indexOf(rule);
-	if (currentRuleIndex === -1) return false;
-	for (const laterRule of allRules.slice(currentRuleIndex + 1)) {
-		if (rule.selector !== laterRule.selector) continue;
-		if (declarationsOverlap(laterRule.declarations, stylexProps)) return true;
+	if (currentRuleIndex !== -1) for (const laterRule of allRules.slice(currentRuleIndex + 1)) {
+		if (laterRule.selector !== rule.selector) continue;
+		laterContexts.push({
+			declarations: laterRule.declarations,
+			unconditional: sameAtRuleStack(laterRule.atRuleStack, rule.atRuleStack)
+		});
 	}
-	return false;
+	const branchProps = () => [...new Set(branchStyles.flatMap((style) => Object.keys(style)))];
+	for (const context of laterContexts) for (const laterDecl of context.declarations) {
+		if (!laterDecl.property) {
+			if (branchProps().length) return false;
+			continue;
+		}
+		if (isBorderShorthandProperty(laterDecl.property)) {
+			const borderProps = new Set(cssDeclarationToStylexDeclarations(laterDecl).map((out) => out.prop));
+			if (branchProps().some((prop) => [...borderProps].some((borderProp) => stylexPropsOverlap(prop, borderProp)))) return false;
+			continue;
+		}
+		for (const out of cssDeclarationToStylexDeclarations(laterDecl)) {
+			const overrideProp = out.prop;
+			const overlapped = branchProps().filter((prop) => stylexPropsOverlap(prop, overrideProp));
+			if (!overlapped.length) continue;
+			if (currentDecl.important && !laterDecl.important) return false;
+			if (!context.unconditional || laterDecl.value.kind !== "static") return false;
+			for (const branch of branchStyles) if (!subtractOverrideFromBranch(branch, overlapped, overrideProp)) return false;
+		}
+	}
+	return true;
 }
-function declarationsOverlap(declarations, stylexProps) {
-	for (const laterDecl of declarations) {
-		if (!laterDecl.property) return true;
-		for (const out of cssDeclarationToStylexDeclarations(laterDecl)) if ([...stylexProps].some((prop) => stylexPropsOverlap(prop, out.prop))) return true;
+function sameAtRuleStack(left, right) {
+	return left.length === right.length && left.every((entry, i) => entry === right[i]);
+}
+/** True for the `border` / `border-<side>` shorthands (not the longhands). */
+function isBorderShorthandProperty(property) {
+	return /^border(?:-(?:top|right|bottom|left))?$/.test(property.trim());
+}
+function subtractOverrideFromBranch(branch, overlappedProps, overrideProp) {
+	const overridePhysical = new Set(physicalLonghandExpansion(overrideProp));
+	const overrideIsLogical = isLogicalDirectionalProp(overrideProp);
+	for (const branchProp of overlappedProps) {
+		if (!(branchProp in branch)) continue;
+		const branchPhysical = physicalLonghandExpansion(branchProp);
+		const remainder = branchPhysical.filter((prop) => !overridePhysical.has(prop));
+		if (remainder.length === branchPhysical.length) continue;
+		if (isLogicalDirectionalProp(branchProp) !== overrideIsLogical) return false;
+		const value = branch[branchProp];
+		delete branch[branchProp];
+		if (!remainder.length) continue;
+		if (!isSingleCssToken(value)) return false;
+		for (const physical of remainder) {
+			const name = overrideIsLogical && LOGICAL_TO_PHYSICAL[branchProp] ? logicalFormForPhysical(branchProp, physical) : physical;
+			if (!name) return false;
+			branch[name] = value;
+		}
 	}
-	return false;
+	return true;
+}
+/**
+* True for a logical directional longhand whose physical side(s) depend on the
+* writing mode — `marginInline`, `paddingBlockEnd`, `scrollMarginInlineStart`,
+* etc. The physical-neutral full shorthands (`margin`, `padding`) and physical
+* sides (`marginTop`) are not logical.
+*/
+function isLogicalDirectionalProp(prop) {
+	return LOGICAL_TO_PHYSICAL[prop] !== void 0;
+}
+/** Physical longhands covered by a StyleX directional/border property. */
+function physicalLonghandExpansion(prop) {
+	const group = SHORTHAND_LONGHANDS[prop];
+	if (group) return [...group.physical];
+	const logical = LOGICAL_TO_PHYSICAL[prop];
+	if (logical) return [...logical];
+	const borderMatch = prop.match(/^border(Top|Right|Bottom|Left)?(Width|Style|Color)$/);
+	if (borderMatch) {
+		const side = borderMatch[1];
+		const kind = borderMatch[2];
+		return side ? [prop] : [
+			"Top",
+			"Right",
+			"Bottom",
+			"Left"
+		].map((s) => `border${s}${kind}`);
+	}
+	return [prop];
+}
+/** Maps a physical longhand back to the Start/End form of a logical branch prop. */
+function logicalFormForPhysical(logicalProp, physical) {
+	for (const [name, physicalProps] of Object.entries(LOGICAL_TO_PHYSICAL)) if (physicalProps.length === 1 && physicalProps[0] === physical && name.startsWith(logicalProp)) return name;
+	return null;
+}
+function isSingleCssToken(value) {
+	if (typeof value === "number") return true;
+	return typeof value === "string" && value.trim() !== "" && !/\s/.test(value.trim());
 }
 function stylexPropsOverlap(left, right) {
 	const leftRelated = relatedDirectionalProps(left);
@@ -40356,21 +41031,20 @@ function addRelatedBorderLonghands(prop, related) {
 }
 function isImportedRuntimeCondition(expr, importMap) {
 	const info = extractRootAndPath(expr);
-	if (info && info.path.length > 0 && importMap.has(info.rootName) && isRuntimeConditionImportRoot(info.rootName)) return true;
+	if (info && info.path.length > 0 && importMap.has(info.rootName)) return true;
 	if (expr.type === "LogicalExpression" && expr.operator === "&&") return isImportedRuntimeCondition(expr.left, importMap) && isImportedRuntimeCondition(expr.right, importMap);
 	if (expr.type === "UnaryExpression" && expr.operator === "!") return isImportedRuntimeCondition(expr.argument, importMap);
 	return false;
 }
-function isRuntimeConditionImportRoot(rootName) {
-	return /^[A-Z]/.test(rootName);
-}
-function isImportedShorthandUnitValue(d, decl, importMap) {
+function isImportedShorthandUnitValue(d, decl, importMap, numericIdentifiers) {
 	if (!d.property || !isCssShorthandProperty(d.property)) return false;
 	const staticParts = getSingleSlotStaticParts(d, decl);
 	if (!staticParts || !/^[a-zA-Z%]/.test(staticParts.suffix)) return false;
 	const slotPart = d.value.kind === "interpolated" ? d.value.parts.find((part) => part.kind === "slot") : null;
 	const info = extractRootAndPath(slotPart && slotPart.kind === "slot" ? decl.templateExpressions[slotPart.slotId] : void 0);
-	return !!info && importMap.has(info.rootName);
+	if (!info || !importMap.has(info.rootName)) return false;
+	if ((d.property === "margin" || d.property === "padding") && staticParts.prefix.trim() === "" && /^[a-zA-Z%]+$/.test(staticParts.suffix.trim()) && numericIdentifiers.has(info.rootName)) return false;
+	return true;
 }
 function expressionToSource(j, expr) {
 	try {
@@ -42122,6 +42796,12 @@ function processRuleDeclarations(args) {
 			d.property = resolvedProperty;
 		}
 		if (d.value.kind === "interpolated") {
+			if (d.property && isLogicalScrollAxisShorthand(d.property)) {
+				state.bailUnsupported(ctx.decl, "Dynamic logical scroll shorthand cannot be expanded — bind a specific longhand (e.g. scroll-padding-inline-start) instead");
+				if (state.currentDecl === ctx.decl) continue;
+				state.bail = true;
+				break;
+			}
 			handleInterpolatedDeclaration({
 				ctx,
 				rule,
@@ -42167,6 +42847,20 @@ function processRuleDeclarations(args) {
 			}
 		}
 		if (d.property === "background" && isUnsupportedBackgroundShorthandValue(d.valueRaw)) {
+			const expanded = d.value.kind === "static" && !d.important && !hasOtherBackgroundDeclaration(allRules, d) ? expandBackgroundShorthandComponents(d.valueRaw) : null;
+			if (expanded) {
+				const commentSource = {
+					leading: d.leadingComment,
+					leadingLine: d.leadingLineComment,
+					trailingLine: d.trailingLineComment
+				};
+				let isFirst = true;
+				for (const { prop, value } of expanded) {
+					applyResolvedPropValue(prop, value, isFirst ? commentSource : null, d.property);
+					isFirst = false;
+				}
+				continue;
+			}
 			state.bailUnsupported(ctx.decl, "Unsupported background shorthand: multiple components cannot be mapped to a single StyleX longhand");
 			if (state.currentDecl === ctx.decl) break;
 			state.bail = true;
@@ -42221,6 +42915,19 @@ function resolveInterpolatedPropertyName(property, ctx) {
 	if (!resolved.startsWith("--")) return null;
 	return resolved;
 }
+/**
+* True when any declaration other than `current` (across all of the component's
+* rules) targets a `background`/`background-*` property. A multi-component
+* background expansion only reproduces reset semantics in isolation, so the
+* presence of a sibling background declaration makes the expansion unsafe.
+*/
+function hasOtherBackgroundDeclaration(allRules, current) {
+	for (const rule of allRules) for (const declaration of rule.declarations) {
+		if (declaration === current) continue;
+		if (declaration.property && /^background(-|$)/.test(declaration.property)) return true;
+	}
+	return false;
+}
 //#endregion
 //#region src/internal/lower-rules/process-rules.ts
 function processDeclRules(ctx) {
@@ -42864,6 +43571,40 @@ function processDeclRules(ctx) {
 			for (const bucket of variantBuckets.values()) if (Object.hasOwn(bucket, prop)) wrapStyleConditionValue(bucket, prop, conditionKey, conditionValue);
 			patchStyleFnConditionValue(prop, conditionKey, conditionValue);
 		};
+		/**
+		* A base-scope declaration later in the CSS overrides any earlier conditional
+		* assignment of the same property — within one styled template the generated
+		* class contains both declarations, and the last one wins regardless of the
+		* runtime condition. Drop the dead base-scope value from earlier variant
+		* buckets so the emitted variant (applied after the base style in
+		* stylex.props) cannot incorrectly win. Condition-scoped values (pseudo/media
+		* maps) only lose their `default` layer.
+		*
+		* Exception: an earlier `!important` conditional value still wins over a later
+		* non-important base declaration in the CSS cascade, so it must be preserved.
+		* (When the later base is itself `!important`, source order decides and the
+		* later one wins, so clearing is correct.)
+		*/
+		const clearEarlierVariantBaseValues = (prop, laterBaseValue) => {
+			const laterBaseIsImportant = cssValueIsImportant(laterBaseValue);
+			for (const [when, bucket] of variantBuckets) {
+				if (!Object.hasOwn(bucket, prop)) continue;
+				const bucketValue = bucket[prop];
+				if (bucketValue !== null && typeof bucketValue === "object" && !isAstNode$1(bucketValue) && "default" in bucketValue) {
+					const conditionDefault = bucketValue.default;
+					if (!laterBaseIsImportant && cssValueIsImportant(conditionDefault)) continue;
+					bucketValue.default = null;
+					continue;
+				}
+				if (!laterBaseIsImportant && cssValueIsImportant(bucketValue)) continue;
+				delete bucket[prop];
+				if (Object.keys(bucket).length === 0) {
+					variantBuckets.delete(when);
+					delete ctx.variantStyleKeys[when];
+					delete ctx.variantSourceOrder[when];
+				}
+			}
+		};
 		const applyResolvedPropValue = (prop, value, commentSource, sourceCssProperty) => {
 			const noteSourceCssProperty = (target) => {
 				if (sourceCssProperty) {
@@ -43078,6 +43819,7 @@ function processDeclRules(ctx) {
 				}
 				return;
 			}
+			clearEarlierVariantBaseValues(prop, value);
 			const target = ctx.getBaseStyleTarget();
 			setStyleObjectValue(target, prop, value);
 			noteSourceCssProperty(target);
@@ -43606,9 +44348,23 @@ function recoverStandaloneInterpolationsInPseudoBlock(rule, decl) {
 		cssProps
 	};
 }
+/**
+* Whether a lowered StyleX value carries `!important`. Values are stored either
+* as plain strings (e.g. `"red !important"`) or as AST string/template literals.
+*/
+function cssValueIsImportant(value) {
+	if (typeof value === "string") return value.includes("!important");
+	if (!value || typeof value !== "object") return false;
+	const node = value;
+	if ((node.type === "StringLiteral" || node.type === "Literal") && typeof node.value === "string") return node.value.includes("!important");
+	if (node.type === "TemplateLiteral" && Array.isArray(node.quasis)) return node.quasis.some((q) => (q?.value?.cooked ?? q?.value?.raw ?? "").includes("!important"));
+	return false;
+}
 /** Negates a `when` condition string (e.g. `$active` → `!$active`, `!$x` → `$x`). */
 function negateWhen(when) {
+	if (when.startsWith("!(") && when.endsWith(")")) return when.slice(2, -1);
 	if (when.startsWith("!")) return when.slice(1);
+	if (when.includes(" || ") || when.includes(" && ")) return `!(${when})`;
 	if (when.includes(" === ")) return when.replace(" === ", " !== ");
 	if (when.includes(" !== ")) return when.replace(" !== ", " === ");
 	return `!${when}`;
@@ -46095,6 +46851,10 @@ function wrappedComponentAcceptsSxProp(ctx, componentLocalName, visiting = /* @_
 		visiting.delete(componentLocalName);
 		return true;
 	}
+	if (localStyledDecl?.needsWrapperComponent && !localStyledDecl.skipTransform && localStyledDecl.supportsExternalStyles) {
+		visiting.delete(componentLocalName);
+		return true;
+	}
 	const componentInterface = wrappedComponentInterfaceFor(ctx, componentLocalName);
 	if (componentInterface !== void 0) {
 		visiting.delete(componentLocalName);
@@ -46342,8 +47102,9 @@ function rewriteJsxStep(ctx) {
 			const mergeArgs = matchedCombinedStyleKey ? void 0 : opening.__promotedMergeArgs;
 			const baseMember = j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(baseStyleKey));
 			const baseExpr = mergeArgs ? j.callExpression(baseMember, mergeArgs) : baseMember;
+			const rendersLocalWrapperBase = decl.base.kind === "component" && decl.base.ident === finalTag && (ctx.styledDecls?.some((d) => d.localName === finalTag && d.needsWrapperComponent && !d.skipTransform) ?? false);
 			const styleArgs = [
-				...decl.extendsStyleKey ? [j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(decl.extendsStyleKey))] : [],
+				...decl.extendsStyleKey && !rendersLocalWrapperBase ? [j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(decl.extendsStyleKey))] : [],
 				...extraMixinArgs,
 				...decl.skipBaseStyleRef ? [] : [baseExpr],
 				...extraAfterBaseArgs