styled-components-to-stylex-codemod 0.0.13 → 0.0.15

package/dist/transform.mjs

@@ -1,6 +1,7 @@
-import { n as assertValidAdapter, t as Logger } from "./logger-D3j-qxgZ.mjs";
-import path, { dirname, resolve } from "node:path";
-import { existsSync, readFileSync } from "node:fs";
+import { n as assertValidAdapter, t as Logger } from "./logger-D-R2KB6I.mjs";
+import { n as parseStyledTemplateLiteral, t as PLACEHOLDER_RE } from "./styled-css-DBryFqQM.mjs";
+import path, { basename, dirname, join, resolve } from "node:path";
+import { existsSync, readFileSync, realpathSync } from "node:fs";
 import { compile } from "stylis";
 import valueParser from "postcss-value-parser";
 import selectorParser from "postcss-selector-parser";
@@ -531,6 +532,19 @@ function isLogicalExpressionNode(node) {
 	return !!node && typeof node === "object" && node.type === "LogicalExpression";
 }
 /**
+* Extracts the left side of a `??` or `||` logical expression when it's a
+* MemberExpression or OptionalMemberExpression. Returns null if the pattern
+* doesn't match.
+*
+* Used to extract the theme access part from fallback patterns like
+* `props.theme.color.labelBase ?? "black"` for resolution. Callers are
+* responsible for re-wrapping the resolved value with the original fallback.
+*/
+function unwrapLogicalFallback(expr) {
+	if (isLogicalExpressionNode(expr) && (expr.operator === "??" || expr.operator === "||") && isMemberOrOptionalMemberExpression(expr.left)) return expr.left;
+	return null;
+}
+/**
 * Type guard for ConditionalExpression nodes.
 */
 function isConditionalExpressionNode(node) {
@@ -569,6 +583,11 @@ function isJsxIdentifierNode(node) {
 	const typed = node;
 	return typed.type === "JSXIdentifier" && typeof typed.name === "string";
 }
+function isMemberOrOptionalMemberExpression(node) {
+	if (!node || typeof node !== "object") return false;
+	const t = node.type;
+	return t === "MemberExpression" || t === "OptionalMemberExpression";
+}
 
 //#endregion
 //#region src/internal/transform-css-vars.ts
@@ -715,6 +734,16 @@ var TransformContext = class {
 	newImportLocalNames;
 	newImportSourcesByLocal;
 	needsReactImport;
+	/** Cross-file selector usages where this file is the consumer */
+	crossFileSelectorUsages;
+	/** Component names in this file that need a global selector bridge className */
+	bridgeComponentNames;
+	/** Marker variable names generated for cross-file parent components (parentStyleKey → markerName) */
+	crossFileMarkers;
+	/** Content for the sidecar .stylex.ts file (defineMarker declarations), populated by emitStylesStep */
+	sidecarStylexContent;
+	/** Bridge components emitted for unconverted consumer selectors. */
+	bridgeResults;
 	/** Inline @keyframes extracted from styled component templates: JS identifier name → frame objects */
 	inlineKeyframes;
 	/** Maps CSS @keyframes names to sanitized JS identifier names (e.g. "fade-in" → "fadeIn") */
@@ -767,6 +796,10 @@ var TransformContext = class {
 		this.styledLocalNames = /* @__PURE__ */ new Set();
 		this.isStyledTag = () => false;
 		this.keyframesNames = /* @__PURE__ */ new Set();
+		if (options.crossFileInfo) {
+			this.crossFileSelectorUsages = options.crossFileInfo.selectorUsages;
+			this.bridgeComponentNames = options.crossFileInfo.bridgeComponentNames;
+		}
 	}
 	markChanged() {
 		this.hasChanges = true;
@@ -1080,6 +1113,42 @@ function hasAttrsAsOverride(attrsInfo) {
 	return !!(attrsInfo?.attrsAsTag || attrsInfo?.staticAttrs?.as && typeof attrsInfo.staticAttrs.as === "string");
 }
 
+//#endregion
+//#region src/internal/utilities/bridge-classname.ts
+/**
+* Utilities for generating deterministic bridge classNames and export names.
+* Used when a converted component needs to remain targetable by unconverted
+* styled-components consumers via CSS selectors.
+*/
+/**
+* Simple FNV-1a hash producing an 8-char hex string.
+* Not cryptographic — just deterministic and collision-resistant enough
+* for generating stable CSS class names. Works in both Node.js and browsers.
+*/
+function fnv1aHex(input) {
+	let hash = 2166136261;
+	for (let i = 0; i < input.length; i++) {
+		hash ^= input.charCodeAt(i);
+		hash = Math.imul(hash, 16777619);
+	}
+	return (hash >>> 0).toString(16).padStart(8, "0");
+}
+/**
+* Generate a deterministic, stable CSS class name for a bridge component.
+* The hash is derived from the file path + component name so it's consistent
+* across runs but unique across different components.
+*/
+function generateBridgeClassName(filePath, componentName) {
+	return `sc2sx-${componentName}-${fnv1aHex(`${filePath}:${componentName}`)}`;
+}
+/**
+* Generate the export variable name for a bridge component's global selector.
+* E.g., "Foo" → "FooGlobalSelector"
+*/
+function bridgeExportName(componentName) {
+	return `${componentName}GlobalSelector`;
+}
+
 //#endregion
 //#region src/internal/transform-steps/analyze-before-emit.ts
 /**
@@ -1163,6 +1232,15 @@ function analyzeBeforeEmitStep(ctx) {
 		if (decl.base.kind === "intrinsic" && decl.withConfig?.componentId) decl.needsWrapperComponent = true;
 		if (extendedBy.has(decl.localName) && componentsWithStaticProps.has(decl.localName)) decl.needsWrapperComponent = true;
 		if (exportedComponents.has(decl.localName)) decl.needsWrapperComponent = true;
+		if (ctx.bridgeComponentNames?.has(decl.localName) || ctx.bridgeComponentNames?.has("default") && exportedComponents.get(decl.localName)?.isDefault) {
+			decl.bridgeClassName = generateBridgeClassName(resolve(file.path), decl.localName);
+			if (!decl.attrsInfo) decl.attrsInfo = {
+				staticAttrs: {},
+				conditionalAttrs: []
+			};
+			const existing = typeof decl.attrsInfo.staticAttrs.className === "string" ? decl.attrsInfo.staticAttrs.className + " " : "";
+			decl.attrsInfo.staticAttrs.className = existing + decl.bridgeClassName;
+		}
 	}
 	const isUsedInJsx = (name) => isComponentUsedInJsx(root, j, name);
 	const canInlineImportedComponentWrapper = (decl) => {
@@ -1776,7 +1854,7 @@ function parseCssValue(valueRaw, slotByPlaceholder) {
 			slotId: directSlot
 		}]
 	};
-	const placeholderPattern = /__SC_EXPR_(\d+)__/g;
+	const placeholderPattern = new RegExp(PLACEHOLDER_RE.source, "g");
 	const parts = [];
 	let lastIndex = 0;
 	let match;
@@ -1897,7 +1975,7 @@ function findSelectorLineOffset(rawCss, selector) {
 		const idx = rawCss.indexOf(pattern);
 		if (idx !== -1) return countNewlinesBefore(rawCss, idx);
 	}
-	const exprMatch = selector.match(/__SC_EXPR_\d+__/);
+	const exprMatch = selector.match(PLACEHOLDER_RE);
 	if (exprMatch) {
 		const idx = rawCss.indexOf(exprMatch[0]);
 		if (idx !== -1) return countNewlinesBefore(rawCss, idx);
@@ -1907,6 +1985,11 @@ function findSelectorLineOffset(rawCss, selector) {
 		const idx = rawCss.indexOf(classMatch[0]);
 		if (idx !== -1) return countNewlinesBefore(rawCss, idx);
 	}
+	const stripped = selector.replace(/^&\s+/, "").replace(/^&\s*>\s*/, "");
+	if (stripped !== selector) {
+		const tagMatch = rawCss.match(new RegExp(`(?:^|\\s)${escapeRegExp(stripped)}\\s*[{,]`, "m"));
+		if (tagMatch) return countNewlinesBefore(rawCss, tagMatch.index + 1);
+	}
 	return 0;
 }
 /**
@@ -1931,39 +2014,6 @@ function escapeRegExp(str) {
 	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-//#endregion
-//#region src/internal/styled-css.ts
-function parseStyledTemplateLiteral(template) {
-	const parts = [];
-	const slots = [];
-	for (let i = 0; i < template.quasis.length; i++) {
-		const quasi = template.quasis[i];
-		parts.push(quasi.value.raw);
-		const expr = template.expressions[i];
-		if (!expr) continue;
-		const placeholder = makeInterpolationPlaceholder(i);
-		const startOffset = parts.join("").length;
-		parts.push(placeholder);
-		const endOffset = parts.join("").length;
-		slots.push({
-			index: i,
-			placeholder,
-			expression: expr,
-			startOffset,
-			endOffset
-		});
-	}
-	const rawCss = parts.join("");
-	return {
-		rawCss,
-		slots,
-		stylisAst: compile(rawCss)
-	};
-}
-function makeInterpolationPlaceholder(index) {
-	return `__SC_EXPR_${index}__`;
-}
-
 //#endregion
 //#region src/internal/transform/css-helpers.ts
 function removeInlinedCssHelperFunctions(args) {
@@ -5952,6 +6002,7 @@ function emitStylesStep(ctx) {
 	const { emptyStyleKeys } = emitStylesAndImports(ctx);
 	ctx.emptyStyleKeys = emptyStyleKeys;
 	ctx.markChanged();
+	if (ctx.crossFileMarkers && ctx.crossFileMarkers.size > 0) emitDefineMarkerDeclarations(ctx, ctx.crossFileMarkers);
 	if (ctx.resolverImportAliases && ctx.resolverImportAliases.size > 0) {
 		const renameIdentifier = (node, parent) => {
 			if (!node || typeof node !== "object") return;
@@ -5992,6 +6043,57 @@ function emitStylesStep(ctx) {
 	}
 	return CONTINUE;
 }
+/**
+* Emit defineMarker declarations into a sidecar `.stylex.ts` file and insert
+* an import for the markers into the main file. StyleX requires defineMarker()
+* to live in `.stylex.ts` files for the babel plugin's `fileNameForHashing`.
+*/
+function emitDefineMarkerDeclarations(ctx, crossFileMarkers) {
+	const j = ctx.j;
+	const markerNames = [...crossFileMarkers.values()];
+	ctx.sidecarStylexContent = `import * as stylex from "@stylexjs/stylex";\n\n${markerNames.map((name) => `export const ${name} = stylex.defineMarker();`).join("\n")}\n`;
+	const sidecarImportPath = `./${basename(ctx.file.path).replace(/\.\w+$/, "")}.stylex`;
+	const importDecl = j.importDeclaration(markerNames.map((name) => j.importSpecifier(j.identifier(name))), j.literal(sidecarImportPath));
+	const programBody = ctx.root.get().node.program.body;
+	const lastImportIdx = programBody.reduce((last, node, i) => node?.type === "ImportDeclaration" ? i : last, -1);
+	const insertAt = lastImportIdx >= 0 ? lastImportIdx + 1 : 0;
+	programBody.splice(insertAt, 0, importDecl);
+}
+
+//#endregion
+//#region src/internal/transform-steps/emit-bridge-exports.ts
+/**
+* Step: emit bridge global selector exports for components targeted by
+* unconverted styled-components consumers.
+*
+* For each styled component with a `bridgeClassName`, emits:
+*   export const FooGlobalSelector = ".sc2sx-Foo-a1b2c3";
+*/
+function emitBridgeExportsStep(ctx) {
+	const styledDecls = ctx.styledDecls;
+	if (!styledDecls) return CONTINUE;
+	const bridgeDecls = styledDecls.filter((d) => !!d.bridgeClassName);
+	if (bridgeDecls.length === 0) return CONTINUE;
+	const { j, root } = ctx;
+	const bridgeResults = [];
+	for (const decl of bridgeDecls) {
+		const varName = bridgeExportName(decl.localName);
+		const className = decl.bridgeClassName;
+		const declaration = j.variableDeclaration("const", [j.variableDeclarator(j.identifier(varName), j.stringLiteral(`.${className}`))]);
+		const exportDecl = j.exportNamedDeclaration(declaration);
+		exportDecl.comments = [j.commentBlock("* @deprecated Migrate consumer to stylex.defineMarker() — bridge className for unconverted styled-components consumers ", true, false)];
+		root.find(j.Program).get().node.body.push(exportDecl);
+		bridgeResults.push({
+			componentName: decl.localName,
+			exportName: ctx.exportedComponents?.get(decl.localName)?.exportName,
+			className,
+			globalSelectorVarName: varName
+		});
+	}
+	ctx.bridgeResults = bridgeResults;
+	ctx.markChanged();
+	return CONTINUE;
+}
 
 //#endregion
 //#region src/internal/emit-wrappers/style-merger.ts
@@ -6011,7 +6113,7 @@ function emitStylesStep(ctx) {
 */
 function emitStyleMerging(args) {
 	const { j, emitter, styleArgs: rawStyleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps = [], staticClassNameExpr } = args;
-	const { styleMerger, emptyStyleKeys, stylesIdentifier, ancestorSelectorParents } = emitter;
+	const { styleMerger, emptyStyleKeys, stylesIdentifier, ancestorSelectorParents, emitTypes } = emitter;
 	const styleArgs = filterEmptyStyleArgs({
 		styleArgs: rawStyleArgs,
 		emptyStyleKeys,
@@ -6019,7 +6121,7 @@ function emitStyleMerging(args) {
 		ancestorSelectorParents
 	});
 	if (ancestorSelectorParents && ancestorSelectorParents.size > 0) {
-		if (styleArgs.some((arg) => arg?.type === "MemberExpression" && arg.object?.type === "Identifier" && arg.object.name === stylesIdentifier && arg.property?.type === "Identifier" && ancestorSelectorParents.has(arg.property.name))) styleArgs.push(j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("defaultMarker")), []));
+		if (styleArgs.some((arg) => hasStyleArgKey(arg, stylesIdentifier, ancestorSelectorParents))) styleArgs.push(j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("defaultMarker")), []));
 	}
 	if (styleArgs.length === 0) return emitWithoutStylex({
 		j,
@@ -6028,7 +6130,8 @@ function emitStyleMerging(args) {
 		allowClassNameProp,
 		allowStyleProp,
 		inlineStyleProps,
-		staticClassNameExpr
+		staticClassNameExpr,
+		emitTypes
 	});
 	if (!allowClassNameProp && !allowStyleProp && inlineStyleProps.length === 0 && !staticClassNameExpr) return {
 		needsSxVar: false,
@@ -6046,7 +6149,8 @@ function emitStyleMerging(args) {
 		styleId,
 		allowClassNameProp,
 		allowStyleProp,
-		inlineStyleProps
+		inlineStyleProps,
+		emitTypes
 	});
 	return emitVerbosePattern({
 		j,
@@ -6056,13 +6160,17 @@ function emitStyleMerging(args) {
 		allowClassNameProp,
 		allowStyleProp,
 		inlineStyleProps,
-		staticClassNameExpr
+		staticClassNameExpr,
+		emitTypes
 	});
 }
 function filterEmptyStyleArgs(args) {
 	const { styleArgs, emptyStyleKeys, stylesIdentifier = "styles", ancestorSelectorParents } = args;
 	if (!emptyStyleKeys || emptyStyleKeys.size === 0) return styleArgs;
-	const isEmptyStyleRef = (node) => !!(node && node.type === "MemberExpression" && node.object?.type === "Identifier" && node.object.name === stylesIdentifier && node.property?.type === "Identifier" && emptyStyleKeys.has(node.property.name) && !ancestorSelectorParents?.has(node.property.name));
+	const isEmptyStyleRef = (node) => {
+		const key = getStyleArgKey(node, stylesIdentifier);
+		return !!(key && emptyStyleKeys.has(key) && !ancestorSelectorParents?.has(key));
+	};
 	const isEmptyStyleArg = (node) => {
 		if (isEmptyStyleRef(node)) return true;
 		if (node?.type === "LogicalExpression" && node.operator === "&&") return isEmptyStyleRef(node.right);
@@ -6071,12 +6179,12 @@ function filterEmptyStyleArgs(args) {
 	return styleArgs.filter((arg) => !isEmptyStyleArg(arg));
 }
 function emitWithoutStylex(args) {
-	const { j, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, staticClassNameExpr } = args;
+	const { j, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, staticClassNameExpr, emitTypes } = args;
 	const classNameAttr = allowClassNameProp ? classNameId : staticClassNameExpr ?? null;
 	let styleAttr = null;
-	if (allowStyleProp) if (inlineStyleProps.length > 0) styleAttr = j.objectExpression([j.spreadElement(styleId), ...inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr))]);
+	if (allowStyleProp) if (inlineStyleProps.length > 0) styleAttr = maybeCastStyleForCustomProps(j, j.objectExpression([j.spreadElement(styleId), ...inlineStyleProps.map((p) => j.property("init", inlineStylePropKey(j, p.prop), p.expr))]), inlineStyleProps, emitTypes);
 	else styleAttr = styleId;
-	else if (inlineStyleProps.length > 0) styleAttr = j.objectExpression(inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr)));
+	else if (inlineStyleProps.length > 0) styleAttr = maybeCastStyleForCustomProps(j, j.objectExpression(inlineStyleProps.map((p) => j.property("init", inlineStylePropKey(j, p.prop), p.expr))), inlineStyleProps, emitTypes);
 	return {
 		needsSxVar: false,
 		sxDecl: null,
@@ -6090,17 +6198,17 @@ function emitWithoutStylex(args) {
 * Generates the merger function call pattern.
 */
 function emitWithMerger(args) {
-	const { j, styleMerger, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps } = args;
+	const { j, styleMerger, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, emitTypes } = args;
 	const firstStyleArg = styleArgs[0];
 	const mergerArgs = [styleArgs.length === 1 && firstStyleArg ? firstStyleArg : j.arrayExpression(styleArgs)];
 	if (allowClassNameProp || allowStyleProp) {
 		if (allowClassNameProp) mergerArgs.push(classNameId);
 		else if (allowStyleProp) mergerArgs.push(j.identifier("undefined"));
-		if (allowStyleProp) if (inlineStyleProps.length > 0) mergerArgs.push(j.objectExpression([j.spreadElement(styleId), ...inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr))]));
+		if (allowStyleProp) if (inlineStyleProps.length > 0) mergerArgs.push(maybeCastStyleForCustomProps(j, j.objectExpression([j.spreadElement(styleId), ...inlineStyleProps.map((p) => j.property("init", inlineStylePropKey(j, p.prop), p.expr))]), inlineStyleProps, emitTypes));
 		else mergerArgs.push(styleId);
 		else if (inlineStyleProps.length > 0) {
 			mergerArgs.push(j.identifier("undefined"));
-			mergerArgs.push(j.objectExpression(inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr))));
+			mergerArgs.push(maybeCastStyleForCustomProps(j, j.objectExpression(inlineStyleProps.map((p) => j.property("init", inlineStylePropKey(j, p.prop), p.expr))), inlineStyleProps, emitTypes));
 		}
 	}
 	return {
@@ -6116,7 +6224,7 @@ function emitWithMerger(args) {
 * Generates the verbose className/style merging pattern.
 */
 function emitVerbosePattern(args) {
-	const { j, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, staticClassNameExpr } = args;
+	const { j, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, staticClassNameExpr, emitTypes } = args;
 	const stylexPropsCall = j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs);
 	const sxDecl = j.variableDeclaration("const", [j.variableDeclarator(j.identifier("sx"), stylexPropsCall)]);
 	let classNameAttr = null;
@@ -6133,9 +6241,9 @@ function emitVerbosePattern(args) {
 		const spreads = [
 			j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))),
 			...allowStyleProp ? [j.spreadElement(styleId)] : [],
-			...inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr))
+			...inlineStyleProps.map((p) => j.property("init", inlineStylePropKey(j, p.prop), p.expr))
 		];
-		styleAttr = j.objectExpression(spreads);
+		styleAttr = maybeCastStyleForCustomProps(j, j.objectExpression(spreads), inlineStyleProps, emitTypes);
 	}
 	return {
 		needsSxVar: true,
@@ -6146,6 +6254,31 @@ function emitVerbosePattern(args) {
 		styleAttr
 	};
 }
+/** Returns a string literal key for CSS custom properties (--foo), identifier otherwise. */
+function inlineStylePropKey(j, prop) {
+	return prop.startsWith("--") ? j.literal(prop) : j.identifier(prop);
+}
+/** Wraps an object expression with `as React.CSSProperties` when it contains CSS custom properties (TypeScript only). */
+function maybeCastStyleForCustomProps(j, styleExpr, inlineStyleProps, emitTypes) {
+	if (!emitTypes || !inlineStyleProps.some((p) => p.prop.startsWith("--"))) return styleExpr;
+	return j.tsAsExpression(styleExpr, j.tsTypeReference(j.tsQualifiedName(j.identifier("React"), j.identifier("CSSProperties"))));
+}
+/**
+* If `node` is `<stylesIdentifier>.<key>`, returns the key name; otherwise `null`.
+* Centralises the MemberExpression pattern check used across the style-merger module.
+*/
+function getStyleArgKey(node, stylesIdentifier) {
+	const n = node;
+	if (n?.type === "MemberExpression" && n.object?.type === "Identifier" && n.object.name === stylesIdentifier && n.property?.type === "Identifier") return n.property.name;
+	return null;
+}
+/**
+* Returns `true` when `node` is `<stylesIdentifier>.<key>` and the key is in the given set.
+*/
+function hasStyleArgKey(node, stylesIdentifier, keys) {
+	const key = getStyleArgKey(node, stylesIdentifier);
+	return !!(key && keys.has(key));
+}
 
 //#endregion
 //#region src/internal/emit-wrappers/comments.ts
@@ -6463,6 +6596,116 @@ function makeConditionalStyleExpr(j, args) {
 	if (isBoolean) return j.logicalExpression("&&", cond, expr);
 	return j.conditionalExpression(cond, expr, j.identifier("undefined"));
 }
+/**
+* Builds style expressions from extraStylexPropsArgs entries, merging
+* complementary boolean condition pairs into single ternary expressions.
+*
+* Two entries with `when: "prop"` and `when: "!prop"` are merged into
+* `prop ? trueExpr : falseExpr` instead of emitting separate conditionals.
+*/
+function buildExtraStylexPropsExprs(j, args) {
+	const { entries, destructureProps } = args;
+	const result = [];
+	const consumed = /* @__PURE__ */ new Set();
+	for (let i = 0; i < entries.length; i++) {
+		if (consumed.has(i)) continue;
+		const entry = entries[i];
+		if (!entry.when) {
+			result.push(entry.expr);
+			continue;
+		}
+		const complementIndex = findComplementaryEntry(entries, i, consumed);
+		if (complementIndex !== null) {
+			consumed.add(complementIndex);
+			const other = entries[complementIndex];
+			const positiveWhenRaw = getPositiveWhen(entry.when, other.when);
+			const { cond } = collectConditionProps(j, {
+				when: positiveWhenRaw,
+				destructureProps
+			});
+			const isEntryPositive = areEquivalentWhen(entry.when, positiveWhenRaw);
+			const trueExpr = isEntryPositive ? entry.expr : other.expr;
+			const falseExpr = isEntryPositive ? other.expr : entry.expr;
+			result.push(j.conditionalExpression(cond, trueExpr, falseExpr));
+			continue;
+		}
+		const { cond, isBoolean } = collectConditionProps(j, {
+			when: entry.when,
+			destructureProps
+		});
+		result.push(makeConditionalStyleExpr(j, {
+			cond,
+			expr: entry.expr,
+			isBoolean
+		}));
+	}
+	return result;
+}
+/**
+* Finds the immediately next unconsumed entry that has a complementary "when"
+* condition to the entry at `index`. Only checks the adjacent unconsumed entry
+* to preserve style precedence ordering — merging non-adjacent pairs would
+* reorder styles relative to entries between them.
+*/
+function findComplementaryEntry(entries, index, consumed) {
+	const when = entries[index]?.when;
+	if (!when) return null;
+	let next = index + 1;
+	while (next < entries.length && consumed.has(next)) next++;
+	if (next >= entries.length) return null;
+	const otherWhen = entries[next]?.when;
+	if (otherWhen && getPositiveWhen(when, otherWhen) !== null) return next;
+	return null;
+}
+/**
+* If two "when" strings represent complementary conditions (e.g., "prop" and
+* "!prop"), returns the positive (non-negated) condition string. Returns null
+* otherwise.
+*/
+function getPositiveWhen(whenA, whenB) {
+	const a = whenA.trim();
+	const b = whenB.trim();
+	if (isNegationOf(b, a)) return a;
+	if (isNegationOf(a, b)) return b;
+	return null;
+}
+function areEquivalentWhen(left, right) {
+	return normalizeWhenForComparison(left) === normalizeWhenForComparison(right);
+}
+function isNegationOf(candidate, base) {
+	const candidateNormalized = normalizeWhenForComparison(candidate);
+	const baseNormalized = normalizeWhenForComparison(base);
+	if (isAtomicWhenExpression(baseNormalized) && candidateNormalized === `!${baseNormalized}`) return true;
+	if (!candidateNormalized.startsWith("!(") || !candidateNormalized.endsWith(")")) return false;
+	if (!hasEnclosingParens(candidateNormalized.slice(1))) return false;
+	return normalizeWhenForComparison(candidateNormalized.slice(2, -1)) === baseNormalized;
+}
+function normalizeWhenForComparison(when) {
+	return stripOuterParens(String(when ?? "").replace(/\s+/g, ""));
+}
+function stripOuterParens(expr) {
+	let current = expr;
+	while (current.startsWith("(") && current.endsWith(")") && hasEnclosingParens(current)) current = current.slice(1, -1);
+	return current;
+}
+function hasEnclosingParens(expr) {
+	let depth = 0;
+	for (let i = 0; i < expr.length; i++) {
+		const ch = expr[i];
+		if (ch === "(") {
+			depth++;
+			continue;
+		}
+		if (ch !== ")") continue;
+		depth--;
+		if (depth < 0) return false;
+		if (depth === 0 && i !== expr.length - 1) return false;
+	}
+	return depth === 0;
+}
+function isAtomicWhenExpression(expr) {
+	return /^[A-Za-z_$][0-9A-Za-z_$]*(?:\.[A-Za-z_$][0-9A-Za-z_$]*)*$/.test(expr);
+}
 
 //#endregion
 //#region src/internal/emit-wrappers/emit-intrinsic-simple.ts
@@ -6785,17 +7028,10 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 		];
 		const destructureProps = [];
 		const propDefaults = /* @__PURE__ */ new Map();
-		if (d.extraStylexPropsArgs) for (const extra of d.extraStylexPropsArgs) if (extra.when) {
-			const { cond, isBoolean } = emitter.collectConditionProps({
-				when: extra.when,
-				destructureProps
-			});
-			styleArgs.push(emitter.makeConditionalStyleExpr({
-				cond,
-				expr: extra.expr,
-				isBoolean
-			}));
-		} else styleArgs.push(extra.expr);
+		if (d.extraStylexPropsArgs) styleArgs.push(...emitter.buildExtraStylexPropsExprs({
+			entries: d.extraStylexPropsArgs,
+			destructureProps
+		}));
 		const needsUseTheme = appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, ctx);
 		for (const gp of appendPseudoAliasStyleArgs(d.pseudoAliasSelectors, styleArgs, j, stylesIdentifier)) if (!destructureProps.includes(gp)) destructureProps.push(gp);
 		const compoundVariantKeys = /* @__PURE__ */ new Set();
@@ -6845,6 +7081,12 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 		if (d.attrsInfo?.invertedBoolAttrs?.length) {
 			for (const inv of d.attrsInfo.invertedBoolAttrs) if (inv?.jsxProp && !destructureProps.includes(inv.jsxProp)) destructureProps.push(inv.jsxProp);
 		}
+		maybeApplySafeTruthyDefaultFromExtraStyleConditionals({
+			j,
+			d,
+			styleArgs,
+			propDefaults
+		});
 		const explicitTransientProps = [];
 		const explicit = d.propsType;
 		if (explicit?.type === "TSTypeLiteral" && explicit.members) {
@@ -6969,6 +7211,115 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 		}), d));
 	}
 }
+function maybeApplySafeTruthyDefaultFromExtraStyleConditionals(args) {
+	const { j, d, styleArgs, propDefaults } = args;
+	if (!d.extraStylexPropsArgs || d.extraStylexPropsArgs.length === 0) return;
+	const blockedProps = collectPropsUsedOutsideExtraStyleConditionals(j, d);
+	const candidateIndicesByProp = /* @__PURE__ */ new Map();
+	for (let i = 0; i < styleArgs.length; i++) {
+		const expr = styleArgs[i];
+		if (!expr || expr.type !== "ConditionalExpression") continue;
+		const propName = extractTruthyUndefinedConditionalProp(expr.test);
+		if (!propName) continue;
+		const existing = candidateIndicesByProp.get(propName) ?? [];
+		existing.push(i);
+		candidateIndicesByProp.set(propName, existing);
+	}
+	for (const [propName, indices] of candidateIndicesByProp.entries()) {
+		if (blockedProps.has(propName)) continue;
+		const existingDefault = propDefaults.get(propName);
+		if (existingDefault !== void 0 && existingDefault !== true) continue;
+		if (isPropUsedOutsideCandidateConditionals(styleArgs, propName, new Set(indices))) continue;
+		propDefaults.set(propName, true);
+		for (const idx of indices) {
+			const expr = styleArgs[idx];
+			if (!expr || expr.type !== "ConditionalExpression") continue;
+			expr.test = j.identifier(propName);
+		}
+	}
+}
+function collectPropsUsedOutsideExtraStyleConditionals(j, d) {
+	const used = /* @__PURE__ */ new Set();
+	const add = (name) => {
+		if (name) used.add(name);
+	};
+	for (const [when] of Object.entries(d.variantStyleKeys ?? {})) {
+		const parsed = parseVariantWhenToAst(j, when);
+		for (const prop of parsed.props) add(prop);
+	}
+	for (const dim of d.variantDimensions ?? []) {
+		add(dim.propName);
+		add(dim.namespaceBooleanProp);
+	}
+	for (const cv of d.compoundVariants ?? []) {
+		add(cv.outerProp);
+		add(cv.innerProp);
+	}
+	for (const pair of d.styleFnFromProps ?? []) if (pair.jsxProp !== "__props") add(pair.jsxProp);
+	for (const prop of collectInlineStylePropNames(d.inlineStyleProps ?? [])) add(prop);
+	for (const inlineProp of d.inlineStyleProps ?? []) {
+		if (!inlineProp.expr || typeof inlineProp.expr !== "object") continue;
+		collectPropsFromPropsMemberAccess(inlineProp.expr, used);
+	}
+	for (const attr of d.attrsInfo?.defaultAttrs ?? []) add(attr.jsxProp);
+	for (const attr of d.attrsInfo?.conditionalAttrs ?? []) add(attr.jsxProp);
+	for (const attr of d.attrsInfo?.invertedBoolAttrs ?? []) add(attr.jsxProp);
+	return used;
+}
+function isPropUsedOutsideCandidateConditionals(styleArgs, propName, candidateIndices) {
+	for (let i = 0; i < styleArgs.length; i++) {
+		if (candidateIndices.has(i)) continue;
+		const expr = styleArgs[i];
+		if (!expr) continue;
+		const identifiers = /* @__PURE__ */ new Set();
+		collectIdentifiers(expr, identifiers);
+		if (identifiers.has(propName)) return true;
+	}
+	return false;
+}
+function extractTruthyUndefinedConditionalProp(test) {
+	if (test.type !== "LogicalExpression" || test.operator !== "||") return null;
+	const leftProp = extractPropEqUndefined(test.left);
+	if (leftProp && isIdentifierNamed(test.right, leftProp)) return leftProp;
+	const rightProp = extractPropEqUndefined(test.right);
+	if (rightProp && isIdentifierNamed(test.left, rightProp)) return rightProp;
+	return null;
+}
+function extractPropEqUndefined(expr) {
+	if (expr.type !== "BinaryExpression" || expr.operator !== "===") return null;
+	if (isIdentifierNamed(expr.left, "undefined")) return identifierName(expr.right);
+	if (isIdentifierNamed(expr.right, "undefined")) return identifierName(expr.left);
+	return null;
+}
+function isIdentifierNamed(expr, name) {
+	return expr.type === "Identifier" && expr.name === name;
+}
+function identifierName(expr) {
+	return expr.type === "Identifier" ? expr.name : null;
+}
+function collectPropsFromPropsMemberAccess(node, out) {
+	const visit = (value) => {
+		if (!value || typeof value !== "object") return;
+		if (Array.isArray(value)) {
+			for (const child of value) visit(child);
+			return;
+		}
+		const typed = value;
+		if ((typed.type === "MemberExpression" || typed.type === "OptionalMemberExpression") && typed.object && typed.property && typed.computed === false) {
+			const object = typed.object;
+			const property = typed.property;
+			if (object.type === "Identifier" && object.name === "props") {
+				if (property.type === "Identifier" && property.name) out.add(property.name);
+			}
+		}
+		const record = value;
+		for (const key of Object.keys(record)) {
+			if (key === "loc" || key === "comments") continue;
+			visit(record[key]);
+		}
+	};
+	visit(node);
+}
 /** Appends theme boolean conditional style args (e.g., `theme.isDark ? styles.boxDark : styles.boxLight`) to `styleArgs`. */
 function appendThemeBooleanStyleArgs(hooks, styleArgs, j, stylesIdentifier, ctx) {
 	if (!hooks || hooks.length === 0) return false;
@@ -7163,17 +7514,10 @@ function emitComponentWrappers(emitter) {
 			propDefaults,
 			namespaceBooleanProps
 		});
-		if (d.extraStylexPropsArgs) for (const extra of d.extraStylexPropsArgs) if (extra.when) {
-			const { cond, isBoolean } = emitter.collectConditionProps({
-				when: extra.when,
-				destructureProps
-			});
-			styleArgs.push(emitter.makeConditionalStyleExpr({
-				cond,
-				expr: extra.expr,
-				isBoolean
-			}));
-		} else styleArgs.push(extra.expr);
+		if (d.extraStylexPropsArgs) styleArgs.push(...emitter.buildExtraStylexPropsExprs({
+			entries: d.extraStylexPropsArgs,
+			destructureProps
+		}));
 		for (const gp of appendPseudoAliasStyleArgs(d.pseudoAliasSelectors, styleArgs, j, stylesIdentifier)) if (!destructureProps.includes(gp)) destructureProps.push(gp);
 		for (const prop of collectInlineStylePropNames(d.inlineStyleProps ?? [])) if (!destructureProps.includes(prop)) destructureProps.push(prop);
 		emitter.buildStyleFnExpressions({
@@ -8110,6 +8454,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 	const intrinsicPolymorphicWrapperDecls = wrapperDecls.filter((d) => {
 		if (d.base.kind !== "intrinsic") return false;
 		if (d.attrWrapper) return false;
+		if (d.shouldForwardProp) return false;
 		if (propsTypeHasExistingPolymorphicAs(d)) return false;
 		return wrapperNames.has(d.localName) || (d.supportsAsProp ?? false);
 	});
@@ -8172,17 +8517,10 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			propDefaults
 		});
 		if (d.compoundVariants) buildCompoundVariantExpressions(d.compoundVariants, styleArgs, destructureProps);
-		if (d.extraStylexPropsArgs) for (const extra of d.extraStylexPropsArgs) if (extra.when) {
-			const { cond, isBoolean } = emitter.collectConditionProps({
-				when: extra.when,
-				destructureProps
-			});
-			styleArgs.push(emitter.makeConditionalStyleExpr({
-				cond,
-				expr: extra.expr,
-				isBoolean
-			}));
-		} else styleArgs.push(extra.expr);
+		if (d.extraStylexPropsArgs) styleArgs.push(...emitter.buildExtraStylexPropsExprs({
+			entries: d.extraStylexPropsArgs,
+			destructureProps
+		}));
 		for (const gp of appendPseudoAliasStyleArgs(d.pseudoAliasSelectors, styleArgs, j, stylesIdentifier)) if (!destructureProps.includes(gp)) destructureProps.push(gp);
 		for (const prop of collectInlineStylePropNames(d.inlineStyleProps ?? [])) if (!destructureProps.includes(prop)) destructureProps.push(prop);
 		emitter.buildStyleFnExpressions({
@@ -8263,12 +8601,12 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 		if (merging.sxDecl) fnBodyStmts.push(merging.sxDecl);
 		fnBodyStmts.push(j.returnStatement(jsx));
 		const polymorphicFnTypeParams = emitTypes && allowAsProp ? j(`function _<C extends React.ElementType = "${tagName}">() { return null }`).get().node.program.body[0].typeParameters : void 0;
-		emitted.push(emitter.buildWrapperFunction({
+		emitted.push(withLeadingComments(emitter.buildWrapperFunction({
 			localName: d.localName,
 			params: [propsParamId],
 			bodyStmts: fnBodyStmts,
 			typeParameters: polymorphicFnTypeParams
-		}));
+		}), d));
 	}
 }
 
@@ -8388,14 +8726,8 @@ function emitShouldForwardPropWrappers(ctx) {
 			j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.styleKey)),
 			...extraStyleArgsAfterBase
 		];
-		if (d.extraStylexPropsArgs) for (const extra of d.extraStylexPropsArgs) if (extra.when) {
-			const { cond, isBoolean } = emitter.collectConditionProps({ when: extra.when });
-			styleArgs.push(emitter.makeConditionalStyleExpr({
-				cond,
-				expr: extra.expr,
-				isBoolean
-			}));
-		} else styleArgs.push(extra.expr);
+		const propDefaults = /* @__PURE__ */ new Map();
+		if (d.extraStylexPropsArgs) styleArgs.push(...emitter.buildExtraStylexPropsExprs({ entries: d.extraStylexPropsArgs }));
 		const pseudoGuardProps = appendPseudoAliasStyleArgs(d.pseudoAliasSelectors, styleArgs, j, stylesIdentifier);
 		const compoundVariantKeys = /* @__PURE__ */ new Set();
 		for (const cv of d.compoundVariants ?? []) {
@@ -8424,7 +8756,6 @@ function emitShouldForwardPropWrappers(ctx) {
 		}
 		const dropPrefix = d.shouldForwardProp?.dropPrefix;
 		const destructureParts = [];
-		const propDefaults = /* @__PURE__ */ new Map();
 		for (const p of dropProps) destructureParts.push(p);
 		if (d.extraStylexPropsArgs) {
 			for (const extra of d.extraStylexPropsArgs) if (extra.when) {
@@ -9689,7 +10020,7 @@ var WrapperEmitter = class {
 		const collectCondIdentifiers = (node) => {
 			if (!node) return;
 			if (isIdentifierNode(node)) {
-				expandedDestructureProps.add(node.name);
+				if (node.name !== "undefined") expandedDestructureProps.add(node.name);
 				return;
 			}
 			if (node.type === "MemberExpression" && !node.computed && node.object.type === "Identifier" && node.object.name === "props" && node.property.type === "Identifier") {
@@ -9817,6 +10148,9 @@ var WrapperEmitter = class {
 	makeConditionalStyleExpr(args) {
 		return makeConditionalStyleExpr(this.j, args);
 	}
+	buildExtraStylexPropsExprs(args) {
+		return buildExtraStylexPropsExprs(this.j, args);
+	}
 	literalExpr(value) {
 		return literalExpr(this.j, value);
 	}
@@ -10069,7 +10403,9 @@ function finalize(ctx) {
 	}
 	return {
 		code,
-		warnings: ctx.warnings
+		warnings: ctx.warnings,
+		sidecarContent: ctx.sidecarStylexContent,
+		bridgeResults: ctx.bridgeResults
 	};
 }
 
@@ -10080,6 +10416,16 @@ function finalize(ctx) {
 * Core concepts: pseudo/attribute parsing and selector normalization.
 */
 /**
+* CSS2 pseudo-elements that browsers accept with single-colon syntax.
+* These must be normalized to double-colon for StyleX compatibility.
+*/
+const CSS2_PSEUDO_ELEMENTS = new Set([
+	":before",
+	":after",
+	":first-line",
+	":first-letter"
+]);
+/**
 * Parse a CSS selector using postcss-selector-parser and determine
 * if it's compatible with StyleX (only pseudo-classes/elements on &).
 */
@@ -10096,14 +10442,26 @@ function parseSelector(selector) {
 		if (selectors.length === 0) return { kind: "base" };
 		if (selectors.length > 1) {
 			const pseudos = [];
+			const pseudoElementValues = [];
 			for (const sel of selectors) {
 				const result = parseSingleSelector(sel);
-				const firstPseudo = result.kind === "pseudo" ? result.pseudos[0] : void 0;
-				if (result.kind !== "pseudo" || result.pseudos.length !== 1 || !firstPseudo) return {
+				if (result.kind === "pseudo" && result.pseudos.length === 1 && result.pseudos[0]) pseudos.push(result.pseudos[0]);
+				else if (result.kind === "pseudoElement") pseudoElementValues.push(result.element);
+				else return {
 					kind: "unsupported",
-					reason: "comma-separated selectors must all be simple pseudos"
+					reason: "comma-separated selectors must all be simple pseudos or pseudo-elements"
+				};
+			}
+			if (pseudos.length > 0 && pseudoElementValues.length > 0) return {
+				kind: "unsupported",
+				reason: "mixed pseudo-classes and pseudo-elements in comma-separated selector"
+			};
+			if (pseudoElementValues.length > 0) {
+				pseudoElementValues.sort();
+				return {
+					kind: "pseudoElements",
+					elements: pseudoElementValues
 				};
-				pseudos.push(firstPseudo);
 			}
 			return {
 				kind: "pseudo",
@@ -10155,7 +10513,7 @@ function parseSingleSelector(selector) {
 			hasUniversal = true;
 			break;
 		case "pseudo":
-			if (node.value.startsWith("::")) pseudoElements.push(node);
+			if (node.value.startsWith("::") || CSS2_PSEUDO_ELEMENTS.has(node.value)) pseudoElements.push(node);
 			else pseudoClasses.push(node);
 			break;
 		case "attribute":
@@ -10213,7 +10571,7 @@ function parseSingleSelector(selector) {
 		};
 		return {
 			kind: "pseudoElement",
-			element: firstPseudoEl.value
+			element: normalizePseudoElementColon(firstPseudoEl.value)
 		};
 	}
 	if (pseudoClasses.length > 0) return {
@@ -10287,50 +10645,116 @@ function parseAttributeSelectorInternal(selector) {
 	};
 	return null;
 }
+/** Tags on which `[disabled]` is equivalent to `:disabled`. */
+const DISABLEABLE_TAGS = new Set([
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"fieldset"
+]);
+/** Tags on which `[checked]` is equivalent to `:checked`. */
+const CHECKABLE_TAGS = new Set(["input"]);
+/** Tags on which `[required]` is equivalent to `:required`. */
+const REQUIRABLE_TAGS = new Set([
+	"input",
+	"select",
+	"textarea"
+]);
+/**
+* Maps an HTML boolean attribute selector to its CSS pseudo-class equivalent,
+* restricted to tags where the mapping is provably equivalent.
+*
+* `[readonly]` is intentionally excluded — CSS `:read-only` matches much more
+* broadly (disabled inputs, checkbox/radio, inherently non-editable elements),
+* so the mapping would be a behavioral change.
+*
+* Returns null if the attribute has no safe pseudo-class mapping for this tag.
+*/
+function mapAttributeToPseudo(attr, tagName) {
+	const normalized = attr.replace(/\s+/g, "").toLowerCase();
+	const tag = tagName.toLowerCase();
+	if (normalized === "disabled" && DISABLEABLE_TAGS.has(tag)) return ":disabled";
+	if (normalized === "checked" && CHECKABLE_TAGS.has(tag)) return ":checked";
+	if (normalized === "required" && REQUIRABLE_TAGS.has(tag)) return ":required";
+	return null;
+}
 /**
 * Parses selectors like "& svg", "& > button", "&:hover svg", "& svg:hover",
-* "&:focus > button:disabled".
+* "&:focus > button:disabled", "& > button[disabled]".
 *
 * Both descendant (space) and child (>) combinators are mapped the same way
 * because `stylex.when.ancestor()` matches ANY ancestor, not just a direct parent.
 * The child combinator is therefore less strict in the output than the original CSS.
 *
+* Attribute selectors on child elements (e.g., `button[disabled]`) are mapped to
+* their pseudo-class equivalents (`:disabled`) for StyleX compatibility.
+*
 * Returns null if the selector doesn't match an element selector pattern.
 */
 function parseElementSelectorPattern(selector) {
 	const trimmed = selector.trim();
-	const m = trimmed.match(/^&((?::[\w-]+(?:\([^)]*\))?)*)\s*(>?\s*)([a-zA-Z][a-zA-Z0-9]*)((?::[\w-]+(?:\([^)]*\))?)*)$/);
+	const m = trimmed.match(/^&((?::[\w-]+(?:\([^)]*\))?)*)\s*(>?\s*)([a-zA-Z][a-zA-Z0-9]*)((?:\[[^\]]+\])?)((?::[\w-]+(?:\([^)]*\))?)*)$/);
 	if (m) {
 		const ancestorPseudoRaw = m[1] ?? "";
 		const tagName = m[3];
-		const childPseudoRaw = m[4] ?? "";
+		const attrRaw = m[4] ?? "";
+		const childPseudo = resolveChildPseudoWithAttr(m[5] ?? "", attrRaw, tagName);
+		if (childPseudo === void 0) return null;
 		return {
 			tagName,
 			ancestorPseudo: ancestorPseudoRaw || null,
-			childPseudo: childPseudoRaw || null
+			childPseudo
 		};
 	}
-	const bareM = trimmed.match(/^([a-zA-Z][a-zA-Z0-9]*)((?::[\w-]+(?:\([^)]*\))?)*)$/);
+	const bareM = trimmed.match(/^([a-zA-Z][a-zA-Z0-9]*)((?:\[[^\]]+\])?)((?::[\w-]+(?:\([^)]*\))?)*)$/);
 	if (bareM) {
-		const childPseudoRaw = bareM[2] ?? "";
+		const bareTagName = bareM[1];
+		const attrRaw = bareM[2] ?? "";
+		const childPseudo = resolveChildPseudoWithAttr(bareM[3] ?? "", attrRaw, bareTagName);
+		if (childPseudo === void 0) return null;
 		return {
-			tagName: bareM[1],
+			tagName: bareTagName,
 			ancestorPseudo: null,
-			childPseudo: childPseudoRaw || null
+			childPseudo
 		};
 	}
-	const childCombM = trimmed.match(/^>\s*([a-zA-Z][a-zA-Z0-9]*)((?::[\w-]+(?:\([^)]*\))?)*)$/);
+	const childCombM = trimmed.match(/^>\s*([a-zA-Z][a-zA-Z0-9]*)((?:\[[^\]]+\])?)((?::[\w-]+(?:\([^)]*\))?)*)$/);
 	if (childCombM) {
-		const childPseudoRaw = childCombM[2] ?? "";
+		const combTagName = childCombM[1];
+		const attrRaw = childCombM[2] ?? "";
+		const childPseudo = resolveChildPseudoWithAttr(childCombM[3] ?? "", attrRaw, combTagName);
+		if (childPseudo === void 0) return null;
 		return {
-			tagName: childCombM[1],
+			tagName: combTagName,
 			ancestorPseudo: null,
-			childPseudo: childPseudoRaw || null
+			childPseudo
 		};
 	}
 	return null;
 }
 /**
+* Combines an explicit pseudo-class string with an optional attribute selector.
+* Returns the combined pseudo string, null if neither is present,
+* or undefined if the attribute can't be safely mapped for this tag.
+*/
+function resolveChildPseudoWithAttr(pseudoRaw, attrRaw, tagName) {
+	const pseudo = pseudoRaw || null;
+	if (!attrRaw) return pseudo;
+	const attrPseudo = mapAttributeToPseudo(attrRaw.slice(1, -1), tagName);
+	if (!attrPseudo) return;
+	return pseudo ? `${attrPseudo}${pseudo}` : attrPseudo;
+}
+/**
+* Normalize CSS2 single-colon pseudo-element values to double-colon.
+* E.g., ":before" → "::before", ":after" → "::after".
+* Already-double-colon values pass through unchanged.
+*/
+function normalizePseudoElementColon(value) {
+	if (CSS2_PSEUDO_ELEMENTS.has(value)) return `:${value}`;
+	return value;
+}
+/**
 * Normalize double-ampersand specificity hacks (`&&`) by collapsing to a single `&`.
 * Only handles `&&` (exactly two). Higher tiers (`&&&`, `&&&&`) are flagged as
 * `hasHigherTier` because flattening them can change cascade precedence.
@@ -10361,8 +10785,8 @@ function normalizeSpecificityHacks(selector) {
 	};
 }
 function normalizeInterpolatedSelector(selectorRaw) {
-	if (!/__SC_EXPR_\d+__/.test(selectorRaw)) return selectorRaw;
-	return selectorRaw.replace(/__SC_EXPR_\d+__/g, "&").replace(/\s+/g, " ").trim().replace(/&\s*&:/g, "&:").replace(/&\s*:/g, "&:");
+	if (!PLACEHOLDER_RE.test(selectorRaw)) return selectorRaw;
+	return selectorRaw.replace(new RegExp(PLACEHOLDER_RE.source, "g"), "&").replace(/\s+/g, " ").trim().replace(/&\s*&:/g, "&:").replace(/&\s*:/g, "&:");
 }
 function normalizeSelectorForInputAttributePseudos(selector, isInput) {
 	if (!isInput) return selector;
@@ -10791,11 +11215,11 @@ function createCssHelperResolver(args) {
 		return null;
 	};
 	const resolveCssHelperTemplate = (template, paramName, loc) => {
-		const bail = (type, context) => {
+		const bail = (type, context, exprLoc) => {
 			warnings.push({
 				severity: "warning",
 				type,
-				loc,
+				loc: exprLoc ?? loc,
 				context
 			});
 			return null;
@@ -10805,36 +11229,33 @@ function createCssHelperResolver(args) {
 		const dynamicProps = [];
 		const dynamicPropKeys = /* @__PURE__ */ new Set();
 		const conditionalVariants = [];
-		const normalizePseudoElement = (pseudo) => {
-			if (!pseudo) return null;
-			if (pseudo === ":before" || pseudo === ":after") return `::${pseudo.slice(1)}`;
-			return pseudo.startsWith("::") ? pseudo : null;
-		};
 		for (const rule of rules) {
 			if (rule.atRuleStack.length > 0) return bail("Conditional `css` block: @-rules (e.g., @media, @supports) are not supported");
 			const selector = (rule.selector ?? "").trim();
 			const allowDynamicValues = selector === "&";
 			let target = out;
 			let currentPseudoClass = null;
+			let pseudoElementTargets = null;
 			if (selector !== "&") {
 				const parsed = parseSelector(selector);
 				if (parsed.kind === "pseudoElement") {
-					const normalizedPseudoElement = normalizePseudoElement(parsed.element);
-					if (normalizedPseudoElement) {
-						const nested = out[normalizedPseudoElement] ?? {};
-						out[normalizedPseudoElement] = nested;
-						target = nested;
-					} else return bail("Conditional `css` block: unsupported selector");
-				} else if (parsed.kind === "pseudo" && parsed.pseudos.length === 1) {
-					const simplePseudo = parsed.pseudos[0];
-					const normalizedPseudoElement = normalizePseudoElement(simplePseudo === ":before" || simplePseudo === ":after" ? simplePseudo : null);
-					if (normalizedPseudoElement) {
-						const nested = out[normalizedPseudoElement] ?? {};
-						out[normalizedPseudoElement] = nested;
-						target = nested;
-					} else currentPseudoClass = simplePseudo;
-				} else return bail("Conditional `css` block: unsupported selector");
+					const nested = out[parsed.element] ?? {};
+					out[parsed.element] = nested;
+					target = nested;
+				} else if (parsed.kind === "pseudoElements") {
+					pseudoElementTargets = parsed.elements.map((el) => {
+						const nested = out[el] ?? {};
+						out[el] = nested;
+						return {
+							key: el,
+							obj: nested
+						};
+					});
+					target = pseudoElementTargets[0]?.obj ?? out;
+				} else if (parsed.kind === "pseudo" && parsed.pseudos.length === 1) currentPseudoClass = parsed.pseudos[0];
+				else return bail("Conditional `css` block: unsupported selector");
 			}
+			const preRuleKeys = pseudoElementTargets && pseudoElementTargets.length > 1 ? new Set(Object.keys(pseudoElementTargets[0].obj)) : null;
 			for (const d of rule.declarations) {
 				if (!d.property) return bail("Conditional `css` block: missing CSS property name");
 				if (d.value.kind === "static") {
@@ -10857,9 +11278,10 @@ function createCssHelperResolver(args) {
 				const slotId = slotParts[0].slotId;
 				const expr = slotExprById.get(slotId);
 				if (!expr) return bail("Conditional `css` block: missing interpolation expression", { property: d.property });
-				if (hasCallExpressionInExpr(expr)) return bail("Conditional `css` block: failed to parse expression", { property: d.property });
+				const exprLoc = expr.loc?.start;
+				if (hasCallExpressionInExpr(expr)) return bail("Conditional `css` block: failed to parse expression", { property: d.property }, exprLoc);
 				const resolved = resolveHelperExprToAst(expr, paramName);
-				if (!resolved && hasThemeAccessInExpr(expr, paramName)) return bail("Conditional `css` block: failed to parse expression", { property: d.property });
+				if (!resolved && hasThemeAccessInExpr(expr, paramName)) return bail("Conditional `css` block: failed to parse expression", { property: d.property }, exprLoc);
 				if (resolved) if (hasStaticParts) {
 					const { prefix, suffix } = extractPrefixSuffix(parts);
 					const templateAst = parseExpr(wrapExprWithStaticParts(resolved.exprString, prefix, suffix));
@@ -10867,7 +11289,7 @@ function createCssHelperResolver(args) {
 						for (const mapped of cssDeclarationToStylexDeclarations(d)) target[mapped.prop] = mergeIntoPseudoContext(templateAst, currentPseudoClass, target[mapped.prop]);
 						continue;
 					}
-					return bail("Conditional `css` block: failed to parse expression", { property: d.property });
+					return bail("Conditional `css` block: failed to parse expression", { property: d.property }, exprLoc);
 				} else {
 					for (const mapped of cssDeclarationToStylexDeclarations(d)) target[mapped.prop] = mergeIntoPseudoContext(resolved.ast, currentPseudoClass, target[mapped.prop]);
 					continue;
@@ -10911,6 +11333,10 @@ function createCssHelperResolver(args) {
 					}
 				}
 			}
+			if (pseudoElementTargets && pseudoElementTargets.length > 1 && preRuleKeys) {
+				const source = pseudoElementTargets[0].obj;
+				for (const key of Object.keys(source)) if (!preRuleKeys.has(key)) for (let i = 1; i < pseudoElementTargets.length; i++) pseudoElementTargets[i].obj[key] = source[key];
+			}
 		}
 		return {
 			style: out,
@@ -10998,8 +11424,9 @@ function createThemeResolvers(args) {
 		if (!expr || expr.type !== "ArrowFunctionExpression" && expr.type !== "FunctionExpression") return null;
 		const bodyExpr = getFunctionBodyExpr(expr);
 		if (!bodyExpr) return null;
-		const direct = resolveThemeValue(bodyExpr);
-		if (direct) return direct;
+		const themeAccessExpr = unwrapLogicalFallback(bodyExpr) ?? bodyExpr;
+		const direct = resolveThemeValue(themeAccessExpr);
+		if (direct) return wrapWithLogicalFallback(direct, bodyExpr, j);
 		const paramName = expr.params?.[0]?.type === "Identifier" ? expr.params[0].name : null;
 		const unwrap = (node) => {
 			let cur = node;
@@ -11020,7 +11447,7 @@ function createThemeResolvers(args) {
 			}
 			return cur;
 		};
-		const unwrapped = unwrap(bodyExpr);
+		const unwrapped = unwrap(themeAccessExpr);
 		if (!unwrapped || unwrapped.type !== "MemberExpression" && unwrapped.type !== "OptionalMemberExpression") return null;
 		let themePath = null;
 		const directPath = getMemberPathFromIdentifier(unwrapped, "theme");
@@ -11038,7 +11465,7 @@ function createThemeResolvers(args) {
 		});
 		if (!resolved) return null;
 		for (const imp of resolved.imports ?? []) resolverImports.set(JSON.stringify(imp), imp);
-		return parseExpr(resolved.expr);
+		return wrapWithLogicalFallback(parseExpr(resolved.expr), bodyExpr, j);
 	};
 	return {
 		hasLocalThemeBinding,
@@ -11046,6 +11473,20 @@ function createThemeResolvers(args) {
 		resolveThemeValueFromFn
 	};
 }
+/**
+* If `originalExpr` was a logical fallback (`X ?? "default"` / `X || "default"`),
+* wraps the resolved AST node in a LogicalExpression preserving the original
+* operator and fallback value.
+*
+* Returns null if the fallback (RHS) is not a static literal, because dynamic
+* references (e.g., `props.fallbackColor`) would be invalid in a static
+* `stylex.create()` context where `props` is not in scope.
+*/
+function wrapWithLogicalFallback(resolved, originalExpr, j) {
+	if (!isLogicalExpressionNode(originalExpr) || originalExpr.operator !== "??" && originalExpr.operator !== "||") return resolved;
+	if (literalToStaticValue(originalExpr.right) === null) return null;
+	return j.logicalExpression(originalExpr.operator, resolved, originalExpr.right);
+}
 
 //#endregion
 //#region src/internal/lower-rules/precompute.ts
@@ -11443,6 +11884,7 @@ function createLowerRulesState(ctx) {
 	const filePath = file.path;
 	const resolveValue = ctx.resolveValueSafe;
 	const resolveCall = ctx.resolveCallSafe;
+	const resolveCallOptional = ctx.adapter.resolveCall.bind(ctx.adapter);
 	const resolveSelector = ctx.resolveSelectorSafe;
 	const importMap = ctx.importMap ?? /* @__PURE__ */ new Map();
 	const styledDecls = ctx.styledDecls;
@@ -11552,6 +11994,8 @@ function createLowerRulesState(ctx) {
 		j,
 		importMap
 	});
+	const crossFileSelectorsByLocal = /* @__PURE__ */ new Map();
+	if (ctx.crossFileSelectorUsages) for (const usage of ctx.crossFileSelectorUsages) crossFileSelectorsByLocal.set(usage.localName, usage);
 	const state = {
 		api,
 		j,
@@ -11565,6 +12009,7 @@ function createLowerRulesState(ctx) {
 		rewriteCssVarsInStyleObject,
 		resolveValue,
 		resolveCall,
+		resolveCallOptional,
 		resolveSelector,
 		importMap,
 		styledDecls,
@@ -11591,6 +12036,7 @@ function createLowerRulesState(ctx) {
 		resolveCssHelperTemplate,
 		resolveImportInScope,
 		resolveImportForExpr,
+		crossFileSelectorsByLocal,
 		bail: false,
 		markBail: () => {
 			state.bail = true;
@@ -12581,23 +13027,23 @@ function extractIndexedThemeLookupInfo(node, paramName) {
 		indexPropName
 	};
 }
-function resolveImportedHelperCall(callExpr, ctx, propsParamName, cssProperty) {
+function resolveImportedHelperCall(callExpr, ctx, propsParamName, cssProperty, themeBindingName) {
 	const callee = callExpr.callee;
 	if (!callee || typeof callee !== "object") return { kind: "keepOriginal" };
-	if (callee.type !== "Identifier") return { kind: "keepOriginal" };
-	const calleeIdent = callee.name;
-	if (typeof calleeIdent !== "string") return { kind: "keepOriginal" };
-	const imp = ctx.resolveImport(calleeIdent, callee);
+	const calleeInfo = extractRootAndPath(callee);
+	if (!calleeInfo) return { kind: "keepOriginal" };
+	const imp = ctx.resolveImport(calleeInfo.rootName, calleeInfo.rootNode);
 	const calleeImportedName = imp?.importedName;
 	const calleeSource = imp?.source;
 	if (!calleeImportedName || !calleeSource) return { kind: "keepOriginal" };
-	const args = callArgsFromNode(callExpr.arguments, propsParamName);
+	const args = callArgsFromNode(callExpr.arguments, propsParamName, themeBindingName);
 	const loc = callExpr.loc?.start;
 	const resolveCallContext = {
 		callSiteFilePath: ctx.filePath,
 		calleeImportedName,
 		calleeSource,
 		args,
+		...calleeInfo.path.length > 0 ? { calleeMemberPath: calleeInfo.path } : {},
 		...loc ? { loc: {
 			line: loc.line,
 			column: loc.column
@@ -12657,15 +13103,24 @@ function getCalleeIdentName(callee) {
 	if (callee.type !== "Identifier") return null;
 	return callee.name ?? null;
 }
-function callArgFromNode(node, propsParamName) {
+function callArgFromNode(node, propsParamName, themeBindingName) {
 	if (!node || typeof node !== "object") return { kind: "unknown" };
 	const type = node.type;
-	if (type === "MemberExpression" && typeof propsParamName === "string" && propsParamName) {
-		const parts = getMemberPathFromIdentifier(node, propsParamName);
-		if (parts && parts[0] === "theme" && parts.length > 1) return {
-			kind: "theme",
-			path: parts.slice(1).join(".")
-		};
+	if (type === "MemberExpression") {
+		if (typeof propsParamName === "string" && propsParamName) {
+			const parts = getMemberPathFromIdentifier(node, propsParamName);
+			if (parts && parts[0] === "theme" && parts.length > 1) return {
+				kind: "theme",
+				path: parts.slice(1).join(".")
+			};
+		}
+		if (typeof themeBindingName === "string" && themeBindingName) {
+			const parts = getMemberPathFromIdentifier(node, themeBindingName);
+			if (parts && parts.length > 0) return {
+				kind: "theme",
+				path: parts.join(".")
+			};
+		}
 	}
 	if (type === "StringLiteral") return {
 		kind: "literal",
@@ -12692,9 +13147,9 @@ function callArgFromNode(node, propsParamName) {
 	}
 	return { kind: "unknown" };
 }
-function callArgsFromNode(args, propsParamName) {
+function callArgsFromNode(args, propsParamName, themeBindingName) {
 	if (!Array.isArray(args)) return [];
-	return args.map((arg) => callArgFromNode(arg, propsParamName));
+	return args.map((arg) => callArgFromNode(arg, propsParamName, themeBindingName));
 }
 
 //#endregion
@@ -13526,62 +13981,95 @@ function replaceThemeRefsWithHookVar(expr, paramName, info) {
 //#endregion
 //#region src/internal/builtin-handlers.ts
 /**
-* Built-in resolution handlers for dynamic interpolations.
-* Core concepts: adapter hooks, conditional splitting, and StyleX emission.
-*/
-/**
 * Internal dynamic resolution pipeline.
 * Order matters: more-specific transforms first, then fall back to prop-access emission.
 */
 function resolveDynamicNode(node, ctx) {
-	return tryResolveThemeAccess(node, ctx) ?? tryResolveCallExpression(node, ctx) ?? tryResolveArrowFnHelperCallWithThemeArg(node, ctx) ?? tryResolveConditionalValue(node, ctx) ?? tryResolveIndexedThemeWithPropFallback(node, ctx) ?? tryResolveConditionalCssBlockTernary(node, ctx) ?? tryResolveConditionalCssBlock(node, ctx) ?? tryResolveArrowFnCallWithSinglePropArg(node) ?? tryResolveThemeDependentTemplateLiteral(node) ?? tryResolveStyleFunctionFromTemplateLiteral(node) ?? tryResolveInlineStyleValueForNestedPropAccess(node) ?? tryResolvePropAccess(node) ?? tryResolveInlineStyleValueForConditionalExpression(node) ?? tryResolveInlineStyleValueForLogicalExpression(node) ?? tryResolveInlineStyleValueFromArrowFn(node);
+	return tryResolveThemeAccess(node, ctx) ?? tryResolveCallExpression(node, ctx) ?? tryResolveArrowFnHelperCallWithThemeArg(node, ctx) ?? tryResolveArrowFnCallWithConditionalArgs(node, ctx) ?? tryResolveConditionalValue(node, ctx) ?? tryResolveIndexedThemeWithPropFallback(node, ctx) ?? tryResolveConditionalCssBlockTernary(node, ctx) ?? tryResolveConditionalCssBlock(node, ctx) ?? tryResolveArrowFnCallWithSinglePropArg(node, ctx) ?? tryResolveThemeDependentTemplateLiteral(node, ctx) ?? tryResolveStyleFunctionFromTemplateLiteral(node) ?? tryResolveInlineStyleValueForNestedPropAccess(node) ?? tryResolvePropAccess(node) ?? tryResolveInlineStyleValueForConditionalExpression(node) ?? tryResolveInlineStyleValueForLogicalExpression(node) ?? tryResolveInlineStyleValueFromArrowFn(node);
 }
 function tryResolveThemeAccess(node, ctx) {
 	const expr = node.expr;
 	if (!isArrowFunctionExpression(expr)) return null;
 	const info = getArrowFnThemeParamInfo(expr);
 	if (!info) return null;
-	const body = expr.body;
-	if (body.type !== "MemberExpression") return null;
-	const path = (() => {
-		if (info.kind === "propsParam") {
-			const parts = getMemberPathFromIdentifier(body, info.propsName);
-			if (!parts || parts[0] !== "theme") return null;
-			return parts.slice(1).join(".");
-		}
-		const parts = getMemberPathFromIdentifier(body, info.themeName);
-		if (!parts) return null;
-		return parts.join(".");
-	})();
+	const themeExpr = extractThemeMemberExpression(expr.body);
+	if (!themeExpr) return null;
+	const path = extractThemePath(themeExpr, info);
 	if (!path) return null;
 	const res = ctx.resolveValue({
 		kind: "theme",
 		path,
 		filePath: ctx.filePath,
-		loc: getNodeLocStart(body) ?? void 0
+		loc: getNodeLocStart(themeExpr) ?? void 0
 	});
 	if (!res) return null;
+	const resultExpr = appendLogicalFallback(expr.body, res.expr);
+	if (resultExpr === null) return null;
 	return {
 		type: "resolvedValue",
-		expr: res.expr,
+		expr: resultExpr,
 		imports: res.imports
 	};
 }
+/**
+* Extracts the theme member expression from an arrow function body.
+*
+* Supports:
+* - Direct: `props.theme.color.labelBase` (MemberExpression)
+* - Logical fallback: `props.theme.color.labelBase ?? "black"` or `|| "default"`
+*   (LogicalExpression with `??` or `||` and theme access on the left)
+*
+* Returns the MemberExpression node, or null if the pattern doesn't match.
+* The fallback (right side of `??`/`||`) is preserved by the caller via
+* `appendLogicalFallback` so users can review and delete it.
+*/
+function extractThemeMemberExpression(body) {
+	if (!body || typeof body !== "object") return null;
+	const unwrapped = unwrapLogicalFallback(body);
+	if (unwrapped && unwrapped.type === "MemberExpression") return unwrapped;
+	if (body.type === "MemberExpression") return body;
+	return null;
+}
+/**
+* Extracts the theme path (e.g., "color.labelBase") from a member expression,
+* accounting for whether the arrow function uses `props.theme.X` or `{ theme }` destructuring.
+*/
+function extractThemePath(memberExpr, info) {
+	const exprAsAny = memberExpr;
+	if (info.kind === "propsParam") {
+		const parts = getMemberPathFromIdentifier(exprAsAny, info.propsName);
+		if (!parts || parts[0] !== "theme") return null;
+		return parts.slice(1).join(".");
+	}
+	const parts = getMemberPathFromIdentifier(exprAsAny, info.themeName);
+	if (!parts) return null;
+	return parts.join(".");
+}
 function tryResolveArrowFnHelperCallWithThemeArg(node, ctx) {
 	if (!node.css.property) return null;
 	const expr = node.expr;
 	if (!isArrowFunctionExpression(expr)) return null;
-	const propsParamName = getArrowFnSingleParamName(expr);
-	if (!propsParamName) return null;
-	const body = expr.body;
+	const info = getArrowFnThemeParamInfo(expr);
+	if (!info) return null;
+	const body = getFunctionBodyExpr(expr);
 	if (!isCallExpressionNode(body)) return null;
 	const args = body.arguments ?? [];
-	if (args.length !== 1) return null;
-	const arg0 = args[0];
-	if (!arg0 || arg0.type !== "MemberExpression") return null;
-	const parts = getMemberPathFromIdentifier(arg0, propsParamName);
-	if (!parts || parts[0] !== "theme" || parts.length <= 1) return null;
-	const simple = resolveImportedHelperCall(body, ctx, propsParamName, node.css.property);
+	if (args.length === 0) return null;
+	const propsParamName = info.kind === "propsParam" ? info.propsName : void 0;
+	const themeBindingName = info.kind === "themeBinding" ? info.themeName : void 0;
+	if (!args.some((arg) => {
+		if (!arg || arg.type !== "MemberExpression") return false;
+		if (propsParamName) {
+			const parts = getMemberPathFromIdentifier(arg, propsParamName);
+			return parts !== null && parts[0] === "theme" && parts.length > 1;
+		}
+		if (themeBindingName) {
+			const parts = getMemberPathFromIdentifier(arg, themeBindingName);
+			return parts !== null && parts.length > 0;
+		}
+		return false;
+	})) return null;
+	const simple = resolveImportedHelperCall(body, ctx, propsParamName, node.css.property, themeBindingName);
 	if (simple.kind === "resolved") return buildResolvedHandlerResult(simple.result, node.css.property, {
 		resolveCallContext: simple.resolveCallContext,
 		resolveCallResult: simple.resolveCallResult
@@ -13589,7 +14077,145 @@ function tryResolveArrowFnHelperCallWithThemeArg(node, ctx) {
 	if (simple.kind === "unresolved") return buildUnresolvedHelperResult(body.callee, ctx);
 	return null;
 }
-function tryResolveArrowFnCallWithSinglePropArg(node) {
+/**
+* Handles arrow functions whose body is a call expression with one conditional argument.
+*
+* Pattern: `({ $oneLine }) => truncateMultiline($oneLine ? 1 : 2)`
+*
+* The conditional argument must have a prop-based test and literal branches.
+* All other arguments must be literals. Each branch is resolved independently
+* via the adapter's resolveCall, and the result is split into conditional variants.
+*/
+function tryResolveArrowFnCallWithConditionalArgs(node, ctx) {
+	const expr = node.expr;
+	if (!isArrowFunctionExpression(expr)) return null;
+	const body = getFunctionBodyExpr(expr);
+	if (!isCallExpressionNode(body)) return null;
+	const callee = body.callee;
+	if (!callee || callee.type !== "Identifier" || typeof callee.name !== "string") return null;
+	const calleeIdent = callee.name;
+	const bindings = getArrowFnParamBindings(expr);
+	if (!bindings) return null;
+	const args = body.arguments ?? [];
+	if (args.length === 0) return null;
+	let conditionalArgIndex = -1;
+	let propName = null;
+	let consequentValue;
+	let alternateValue;
+	let conditionalDefaultTruthy = null;
+	const staticArgValues = /* @__PURE__ */ new Map();
+	for (let i = 0; i < args.length; i++) {
+		const arg = args[i];
+		if (!arg) continue;
+		if (arg.type === "ConditionalExpression") {
+			if (conditionalArgIndex !== -1) return null;
+			conditionalArgIndex = i;
+			propName = extractPropNameFromCondTest(arg.test, bindings);
+			if (!propName) return null;
+			if (propName === "theme") return null;
+			if (bindings.kind === "destructured" && bindings.defaults && bindings.defaults.has(propName)) {
+				const defaultValue = extractStaticLiteralValue(bindings.defaults.get(propName));
+				if (defaultValue === void 0) return null;
+				conditionalDefaultTruthy = Boolean(defaultValue);
+			}
+			consequentValue = extractStaticLiteralValue(arg.consequent);
+			alternateValue = extractStaticLiteralValue(arg.alternate);
+			if (consequentValue === void 0 || alternateValue === void 0) return null;
+		} else {
+			const v = extractStaticLiteralValue(arg);
+			if (v === void 0) return null;
+			staticArgValues.set(i, v);
+		}
+	}
+	if (conditionalArgIndex === -1 || !propName || consequentValue === void 0 || alternateValue === void 0) return null;
+	const imp = ctx.resolveImport(calleeIdent, callee);
+	if (!imp) return null;
+	const consValue = consequentValue;
+	const altValue = alternateValue;
+	const buildBranchContext = (branchValue) => {
+		const syntheticArgs = args.map((_arg, i) => {
+			if (i === conditionalArgIndex) return {
+				kind: "literal",
+				value: branchValue
+			};
+			const v = staticArgValues.get(i);
+			return v !== void 0 ? {
+				kind: "literal",
+				value: v
+			} : { kind: "unknown" };
+		});
+		const loc = body.loc?.start;
+		return {
+			callSiteFilePath: ctx.filePath,
+			calleeImportedName: imp.importedName,
+			calleeSource: imp.source,
+			args: syntheticArgs,
+			...loc ? { loc: {
+				line: loc.line,
+				column: loc.column
+			} } : {},
+			...node.css.property ? { cssProperty: node.css.property } : {}
+		};
+	};
+	const consResult = ctx.resolveCall(buildBranchContext(consValue));
+	if (!consResult) return null;
+	const altResult = ctx.resolveCall(buildBranchContext(altValue));
+	if (!altResult) return null;
+	const consIsCss = isAdapterResultCssValue(consResult, node.css.property);
+	if (consIsCss !== isAdapterResultCssValue(altResult, node.css.property)) return null;
+	const truthyWhen = conditionalDefaultTruthy === true ? `${propName} === undefined || ${propName}` : propName;
+	const falsyWhen = conditionalDefaultTruthy === true ? `!(${truthyWhen})` : `!${propName}`;
+	const variants = [{
+		nameHint: "truthy",
+		when: truthyWhen,
+		expr: consResult.expr,
+		imports: consResult.imports
+	}, {
+		nameHint: "falsy",
+		when: falsyWhen,
+		expr: altResult.expr,
+		imports: altResult.imports
+	}];
+	return consIsCss ? {
+		type: "splitVariantsResolvedValue",
+		variants
+	} : {
+		type: "splitVariantsResolvedStyles",
+		variants
+	};
+}
+/**
+* Extracts a static literal value from an AST node, distinguishing null literals
+* from extraction failure. Returns `undefined` when the node is not a recognized
+* static literal, and the actual value (including `null`) otherwise.
+*/
+function extractStaticLiteralValue(node) {
+	if (!node || typeof node !== "object") return;
+	const type = node.type;
+	if (type === "ArrowFunctionExpression" || type === "FunctionExpression") return;
+	if (type === "NullLiteral") return null;
+	if (type === "Literal" && node.value === null) return null;
+	const v = literalToStaticValue(node);
+	return v !== null ? v : void 0;
+}
+/**
+* Extracts the prop name from a conditional expression's test node.
+*
+* Supports:
+* - Simple param: `props.$oneLine` → `$oneLine`
+* - Destructured param: `$oneLine` (identifier) → `$oneLine`
+*/
+function extractPropNameFromCondTest(test, bindings) {
+	if (!test || typeof test !== "object" || !bindings) return null;
+	const resolved = resolveIdentifierToPropName(test, bindings);
+	if (resolved !== null) return resolved;
+	if (bindings.kind === "simple" && test.type === "MemberExpression") {
+		const path = getMemberPathFromIdentifier(test, bindings.paramName);
+		if (path && path.length === 1 && path[0]) return path[0];
+	}
+	return null;
+}
+function tryResolveArrowFnCallWithSinglePropArg(node, ctx) {
 	if (!node.css.property) return null;
 	const expr = node.expr;
 	if (!isArrowFunctionExpression(expr)) return null;
@@ -13606,6 +14232,7 @@ function tryResolveArrowFnCallWithSinglePropArg(node) {
 	const path = getMemberPathFromIdentifier(arg0, paramName);
 	const propName = path?.[0];
 	if (!path || path.length !== 1 || !propName) return null;
+	const adapterResolution = tryResolveCalleeViaAdapter(calleeIdent, body.callee, node, ctx);
 	return {
 		type: "emitStyleFunction",
 		nameHint: `${sanitizeIdentifier(node.css.property)}FromProp`,
@@ -13614,10 +14241,39 @@ function tryResolveArrowFnCallWithSinglePropArg(node) {
 		call: propName,
 		valueTransform: {
 			kind: "call",
-			calleeIdent
+			calleeIdent,
+			...adapterResolution
 		}
 	};
 }
+/**
+* Attempts to resolve a callee identifier through the adapter's resolveCall hook.
+* Uses `resolveCallOptional` (non-bailing) so that an unhandled helper does NOT
+* trigger the global bail flag — the caller falls back to preserving the original call.
+* Returns resolved expression and imports if the adapter handles it,
+* or an empty object to fall back to preserving the original helper call.
+*/
+function tryResolveCalleeViaAdapter(calleeIdent, calleeNode, node, ctx) {
+	const resolveCall = ctx.resolveCallOptional;
+	if (!resolveCall) return {};
+	const imp = ctx.resolveImport(calleeIdent, calleeNode);
+	if (!imp) return {};
+	try {
+		const result = resolveCall({
+			callSiteFilePath: ctx.filePath,
+			calleeImportedName: imp.importedName,
+			calleeSource: imp.source,
+			args: [{ kind: "unknown" }],
+			cssProperty: node.css.property
+		});
+		if (result) return {
+			resolvedExpr: result.expr,
+			resolvedImports: result.imports,
+			...result.dynamicArgUsage ? { resolvedUsage: result.dynamicArgUsage } : {}
+		};
+	} catch {}
+	return {};
+}
 function tryResolveInlineStyleValueForConditionalExpression(node) {
 	if (!node.css.property) return null;
 	const expr = node.expr;
@@ -13662,17 +14318,26 @@ function tryResolveInlineStyleValueForLogicalExpression(node) {
 	};
 	return { type: "emitInlineStyleValueFromProps" };
 }
-function tryResolveThemeDependentTemplateLiteral(node) {
+function tryResolveThemeDependentTemplateLiteral(node, ctx) {
 	if (!node.css.property) return null;
 	const expr = node.expr;
 	if (!isArrowFunctionExpression(expr)) return null;
 	const body = getFunctionBodyExpr(expr);
 	if (!body || body.type !== "TemplateLiteral") return null;
-	if (hasThemeAccessInArrowFn(expr)) return {
+	if (!hasThemeAccessInArrowFn(expr)) return null;
+	const paramName = getArrowFnSingleParamName(expr);
+	if (paramName) {
+		const resolved = resolveTemplateLiteralWithTheme(body, paramName, ctx);
+		if (resolved) return {
+			type: "resolvedValue",
+			expr: resolved.expr,
+			imports: resolved.imports
+		};
+	}
+	return {
 		type: "keepOriginal",
 		reason: "Theme-dependent template literals require a project-specific theme source (e.g. useTheme())"
 	};
-	return null;
 }
 function tryResolveStyleFunctionFromTemplateLiteral(node) {
 	if (!node.css.property) return null;
@@ -13797,6 +14462,23 @@ function tryResolvePropAccess(node) {
 		call: propName
 	};
 }
+/**
+* If `body` is a logical fallback expression (`X ?? "default"` / `X || "default"`),
+* appends the operator and fallback literal to the resolved expression string.
+*
+* Returns `null` when the body IS a logical expression but the fallback is non-literal
+* (e.g., `props.fallbackColor`, `null`, `undefined`), signalling to the caller that
+* it's unsafe to drop the fallback — the caller should bail instead of resolving.
+*
+* Returns `resolvedExpr` unchanged when the body is NOT a logical expression (no
+* fallback to preserve).
+*/
+function appendLogicalFallback(body, resolvedExpr) {
+	if (!isLogicalExpressionNode(body) || body.operator !== "??" && body.operator !== "||") return resolvedExpr;
+	const fallback = literalToStaticValue(body.right);
+	if (fallback === null) return null;
+	return `${resolvedExpr} ${body.operator} ${JSON.stringify(fallback)}`;
+}
 
 //#endregion
 //#region src/internal/lower-rules/template-literals.ts
@@ -15697,7 +16379,7 @@ const createValuePatternHandlers = (ctx) => {
 * Core concepts: per-component style buckets, helper factories, and resolver wiring.
 */
 function createDeclProcessingState(state, decl) {
-	const { api, j, root, filePath, warnings, resolverImports, parseExpr, resolveValue, resolveCall, importMap, cssHelperFunctions, stringMappingFns, hasLocalThemeBinding, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveImportInScope, usedCssHelperFunctions, markBail } = state;
+	const { api, j, root, filePath, warnings, resolverImports, parseExpr, resolveValue, resolveCall, resolveCallOptional, importMap, cssHelperFunctions, stringMappingFns, hasLocalThemeBinding, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveImportInScope, usedCssHelperFunctions, markBail } = state;
 	const styleObj = {};
 	const perPropPseudo = {};
 	const perPropMedia = {};
@@ -15771,6 +16453,7 @@ function createDeclProcessingState(state, decl) {
 		filePath,
 		resolveValue,
 		resolveCall,
+		resolveCallOptional,
 		resolveImport: resolveImportInScope,
 		hasImportIgnoringShadowing: (localName) => importMap.has(localName)
 	};
@@ -15979,7 +16662,88 @@ function tryHandleInterpolatedBorder(ctx, args) {
 	const direction = directionRaw ? directionRaw.slice(1).charAt(0).toUpperCase() + directionRaw.slice(2) : "";
 	if (d.value.kind !== "interpolated") return false;
 	if (typeof d.valueRaw !== "string") return false;
-	const slotTok = d.valueRaw.trim().split(/\s+/).filter(Boolean).find((t) => /^__SC_EXPR_(\d+)__$/.test(t));
+	const tokens = d.valueRaw.trim().split(/\s+/).filter(Boolean);
+	const callResolveDynamicNode = (slotId, expr, loc) => {
+		return resolveDynamicNode({
+			slotId,
+			expr,
+			css: {
+				kind: "declaration",
+				selector: "&",
+				atRuleStack: [],
+				property: prop,
+				valueRaw: d.valueRaw
+			},
+			component: decl.base.kind === "intrinsic" ? {
+				localName: decl.localName,
+				base: "intrinsic",
+				tagOrIdent: decl.base.tagName
+			} : {
+				localName: decl.localName,
+				base: "component",
+				tagOrIdent: decl.base.ident
+			},
+			usage: {
+				jsxUsages: 0,
+				hasPropsSpread: false
+			},
+			...loc ? { loc } : {}
+		}, {
+			api,
+			filePath,
+			resolveValue,
+			resolveCall,
+			resolveImport: (localName) => importMap.get(localName) ?? null
+		});
+	};
+	{
+		const slotIndices = [];
+		for (let i = 0; i < tokens.length; i++) {
+			const m = tokens[i].match(/^__SC_EXPR_(\d+)__$/);
+			if (m?.[1]) slotIndices.push({
+				idx: i,
+				slotId: Number(m[1])
+			});
+		}
+		if (slotIndices.length === 2 && tokens.length === 3) {
+			const [slot0, slot1] = slotIndices;
+			if (slot0.idx === 0 && slot1.idx === 2) {
+				const middleStyle = tokens[1].trim();
+				if (BORDER_STYLES.has(middleStyle)) {
+					const widthProp = `border${direction}Width`;
+					const styleProp = `border${direction}Style`;
+					const colorProp = `border${direction}Color`;
+					const slot0Expr = decl.templateExpressions[slot0.slotId];
+					const slot1Expr = decl.templateExpressions[slot1.slotId];
+					const slot0Res = callResolveDynamicNode(slot0.slotId, slot0Expr);
+					const slot1Res = callResolveDynamicNode(slot1.slotId, slot1Expr);
+					if (slot0Res?.type === "resolvedValue" && slot1Res?.type === "resolvedValue") {
+						for (const imp of [...slot0Res.imports ?? [], ...slot1Res.imports ?? []]) resolverImports.set(JSON.stringify(imp), imp);
+						const slot0Ast = parseExpr(slot0Res.expr);
+						const slot1Ast = parseExpr(slot1Res.expr);
+						if (slot0Ast && slot1Ast) {
+							const slot0Role = classifyBorderSlotRole(slot0Ast);
+							const slot1Role = classifyBorderSlotRole(slot1Ast);
+							if (slot0Role && slot1Role && slot0Role === slot1Role) {
+								bailUnsupportedWithContext("Multi-slot border interpolation could not be resolved", { property: prop }, getNodeLocStart(slot0Expr) ?? getNodeLocStart(slot1Expr));
+								return true;
+							}
+							const shouldSwap = slot0Role === "color" || slot1Role === "width";
+							const widthAst = shouldSwap ? slot1Ast : slot0Ast;
+							const colorAst = shouldSwap ? slot0Ast : slot1Ast;
+							applyResolvedPropValue(widthProp, widthAst);
+							applyResolvedPropValue(styleProp, middleStyle);
+							applyResolvedPropValue(colorProp, colorAst);
+							return true;
+						}
+					}
+					bailUnsupportedWithContext("Multi-slot border interpolation could not be resolved", { property: prop }, getNodeLocStart(slot0Expr) ?? getNodeLocStart(slot1Expr));
+					return true;
+				}
+			}
+		}
+	}
+	const slotTok = tokens.find((t) => /^__SC_EXPR_(\d+)__$/.test(t));
 	if (!slotTok) return false;
 	const slotMatch = slotTok.match(/^__SC_EXPR_(\d+)__$/);
 	if (!slotMatch || !slotMatch[1]) return false;
@@ -16083,40 +16847,7 @@ function tryHandleInterpolatedBorder(ctx, args) {
 		const unresolvedCallWarning = (callIdent ? importMap.has(callIdent) : false) ? "Adapter helper call in border interpolation did not resolve to a single CSS value" : "Unsupported call expression (expected imported helper(...) or imported helper(...)(...))";
 		const resolveBorderExpr = (node) => {
 			const loc = getNodeLocStart(node);
-			const res = resolveDynamicNode({
-				slotId,
-				expr: node,
-				css: {
-					kind: "declaration",
-					selector: "&",
-					atRuleStack: [],
-					property: prop,
-					valueRaw: d.valueRaw
-				},
-				component: decl.base.kind === "intrinsic" ? {
-					localName: decl.localName,
-					base: "intrinsic",
-					tagOrIdent: decl.base.tagName
-				} : {
-					localName: decl.localName,
-					base: "component",
-					tagOrIdent: decl.base.ident
-				},
-				usage: {
-					jsxUsages: 0,
-					hasPropsSpread: false
-				},
-				...loc ? { loc } : {}
-			}, {
-				api,
-				filePath,
-				resolveValue,
-				resolveCall,
-				resolveImport: (localName, _identNode) => {
-					const v = importMap.get(localName);
-					return v ? v : null;
-				}
-			});
+			const res = callResolveDynamicNode(slotId, node, loc);
 			if (!res) return {
 				kind: "warn",
 				warning: unresolvedCallWarning
@@ -16333,6 +17064,17 @@ function tryHandleInterpolatedBorder(ctx, args) {
 	}
 	return false;
 }
+/**
+* Classify a resolved border slot expression as "width" or "color" when possible.
+* Only string literals can be reliably classified: `looksLikeLength("0.5px")` → "width",
+* anything else → "color". Returns null for opaque expressions (variables, member
+* expressions) that cannot be classified at compile time.
+*/
+function classifyBorderSlotRole(ast) {
+	const node = ast;
+	if ((node.type === "StringLiteral" || node.type === "Literal") && typeof node.value === "string") return looksLikeLength(node.value) ? "width" : "color";
+	return null;
+}
 
 //#endregion
 //#region src/internal/lower-rules/interpolated-variant-resolvers.ts
@@ -16829,7 +17571,8 @@ function handleInterpolatedDeclaration(args) {
 			keyframesNames,
 			styleObj
 		})) continue;
-		if (isUnsupportedDynamicPseudoElement(pseudoElement)) {
+		if (isPseudoElementSelector(pseudoElement)) {
+			if (tryHandleDynamicPseudoElementViaCustomProperty(args)) continue;
 			warnings.push({
 				severity: "error",
 				type: "Dynamic styles inside pseudo elements (::before/::after) are not supported by StyleX. See https://github.com/facebook/stylex/issues/1396",
@@ -17620,7 +18363,15 @@ function handleInterpolatedDeclaration(args) {
 						const buildValueExpr = () => {
 							const transformed = (() => {
 								const vt = res.valueTransform;
-								if (vt?.kind === "call" && typeof vt.calleeIdent === "string") return j.callExpression(j.identifier(vt.calleeIdent), [valueId]);
+								if (vt?.kind === "call" && typeof vt.calleeIdent === "string") {
+									if (vt.resolvedImports) for (const imp of vt.resolvedImports) resolverImports.set(JSON.stringify(imp), imp);
+									if (vt.resolvedExpr) {
+										const resolvedCallee = parseExpr(vt.resolvedExpr);
+										if (vt.resolvedUsage === "memberAccess") return j.memberExpression(resolvedCallee, valueId, true);
+										return j.callExpression(resolvedCallee, [valueId]);
+									}
+									return j.callExpression(j.identifier(vt.calleeIdent), [valueId]);
+								}
 								return valueId;
 							})();
 							const transformedValue = !!res.wrapValueInTemplateLiteral ? j.templateLiteral([j.templateElement({
@@ -17838,9 +18589,69 @@ function handleInterpolatedDeclaration(args) {
 	if (state.bail) bail = true;
 	if (bail) state.markBail();
 }
-function isUnsupportedDynamicPseudoElement(pseudoElement) {
-	return pseudoElement === "::before" || pseudoElement === "::after" || pseudoElement === ":before" || pseudoElement === ":after";
+function isPseudoElementSelector(pseudoElement) {
+	return pseudoElement === "::before" || pseudoElement === "::after";
 }
+/**
+* Handles dynamic interpolations inside ::before/::after pseudo-elements by emitting
+* CSS custom properties on the parent element and referencing them with var() in the
+* pseudo-element's static StyleX styles.
+*
+* Example transform:
+*   Input:  `&::after { background-color: ${(props) => props.$badgeColor}; }`
+*   Output: StyleX  → `"::after": { backgroundColor: "var(--Badge-after-backgroundColor)" }`
+*           Inline  → `style={{ "--Badge-after-backgroundColor": $badgeColor }}`
+*
+* Bails (returns false) for unsupported shapes: multi-slot interpolations or CSS shorthands.
+*/
+function tryHandleDynamicPseudoElementViaCustomProperty(args) {
+	const { ctx, d, pseudoElement, applyResolvedPropValue } = args;
+	const { state, decl, inlineStyleProps } = ctx;
+	const { j } = state;
+	if (!d.property || d.value.kind !== "interpolated") return false;
+	const slotParts = (d.value.parts ?? []).filter((p) => p.kind === "slot");
+	if (slotParts.length !== 1) return false;
+	const slotPart = slotParts[0];
+	const expr = decl.templateExpressions[slotPart.slotId];
+	if (!expr || expr.type !== "ArrowFunctionExpression" && expr.type !== "FunctionExpression") return false;
+	if (hasThemeAccessInArrowFn(expr)) return false;
+	const unwrapped = unwrapArrowFunctionToPropsExpr(j, expr);
+	if (!unwrapped) return false;
+	const { expr: inlineExpr, propsUsed } = unwrapped;
+	const { prefix, suffix } = extractStaticParts(d.value);
+	const valueExpr = prefix || suffix ? buildTemplateWithStaticParts(j, inlineExpr, prefix, suffix) : inlineExpr;
+	const stylexDecls = cssDeclarationToStylexDeclarations(d);
+	if (stylexDecls.some((out) => UNSUPPORTED_CUSTOM_PROP_SHORTHANDS.has(out.prop))) return false;
+	const pseudoLabel = pseudoElement ? pseudoElement.replace(/^:+/, "") : "";
+	const existingPropNames = new Set(inlineStyleProps.map((p) => p.prop));
+	for (const out of stylexDecls) {
+		if (!out.prop) continue;
+		const customPropName = pseudoLabel ? `--${decl.localName}-${pseudoLabel}-${out.prop}` : `--${decl.localName}-${out.prop}`;
+		if (existingPropNames.has(customPropName)) return false;
+		applyResolvedPropValue(out.prop, `var(${customPropName})`, null);
+		inlineStyleProps.push({
+			prop: customPropName,
+			expr: valueExpr
+		});
+	}
+	for (const propName of propsUsed) ensureShouldForwardPropDrop(decl, propName);
+	decl.needsWrapperComponent = true;
+	return true;
+}
+/** CSS shorthand properties that cannot be represented as a single var() custom property. */
+const UNSUPPORTED_CUSTOM_PROP_SHORTHANDS = new Set([
+	"border",
+	"margin",
+	"padding",
+	"background",
+	"flex",
+	"overflow",
+	"outline",
+	"borderTop",
+	"borderRight",
+	"borderBottom",
+	"borderLeft"
+]);
 
 //#endregion
 //#region src/internal/lower-rules/process-rule-declarations.ts
@@ -17899,7 +18710,7 @@ function processRuleDeclarations(args) {
 //#endregion
 //#region src/internal/lower-rules/process-rules.ts
 function processDeclRules(ctx) {
-	const { state, decl, styleObj, perPropPseudo, perPropMedia, perPropComputedMedia, nestedSelectors, attrBuckets, localVarValues, cssHelperPropValues, getComposedDefaultValue } = ctx;
+	const { state, decl, styleObj, perPropPseudo, perPropMedia, nestedSelectors, attrBuckets, localVarValues, cssHelperPropValues, getComposedDefaultValue } = ctx;
 	const { j, root, warnings, resolverImports, resolveSelector, parseExpr, cssHelperNames, declByLocalName, styledDecls, relationOverridePseudoBuckets, relationOverrides, ancestorSelectorParents, childPseudoMarkers, resolveThemeValue, resolveThemeValueFromFn, resolveImportInScope } = state;
 	/**
 	* Attempts to resolve an element selector (e.g., `& svg`, `& > button`) to a
@@ -18003,7 +18814,7 @@ function processDeclRules(ctx) {
 				continue;
 			}
 			const selectorTrimmed = selectorForAnalysis.trim();
-			const isHandledComponentPattern = hasComponentExpr && (/^__SC_EXPR_\d+__:[a-z][a-z0-9()-]*\s+&\s*$/.test(selectorTrimmed) || selectorTrimmed.startsWith("&") || /^__SC_EXPR_\d+__\s*\{/.test(selectorTrimmed));
+			const isHandledComponentPattern = hasComponentExpr && (/^__SC_EXPR_\d+__:[a-z][a-z0-9()-]*\s+&\s*$/.test(selectorTrimmed) || isCommaGroupedReverseSelectorPattern(selectorTrimmed) || selectorTrimmed.startsWith("&") || /^__SC_EXPR_\d+__\s*\{/.test(selectorTrimmed));
 			if (/&\s+:/.test(rule.selector)) {
 				state.markBail();
 				warnings.push({
@@ -18014,11 +18825,12 @@ function processDeclRules(ctx) {
 				break;
 			}
 			if (s.includes(",") && !isHandledComponentPattern) {
-				if (parseSelector(s).kind !== "pseudo") {
+				const parsed = parseSelector(s);
+				if (parsed.kind !== "pseudo" && parsed.kind !== "pseudoElements") {
 					state.markBail();
 					warnings.push({
 						severity: "warning",
-						type: "Unsupported selector: comma-separated selectors must all be simple pseudos",
+						type: "Unsupported selector: comma-separated selectors must all be simple pseudos or pseudo-elements",
 						loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
 					});
 					break;
@@ -18032,6 +18844,10 @@ function processDeclRules(ctx) {
 				});
 				break;
 			} else if (/[+~]/.test(s) && !isHandledComponentPattern) {
+				if (/^&\s*[+~]\s*&$/.test(s)) {
+					if (handleSiblingSelector(s, rule, ctx) === "break") break;
+					continue;
+				}
 				state.markBail();
 				warnings.push({
 					severity: "warning",
@@ -18053,17 +18869,43 @@ function processDeclRules(ctx) {
 			}
 		}
 		if (typeof rule.selector === "string" && rule.selector.includes("__SC_EXPR_")) {
-			const slotMatch = rule.selector.match(/__SC_EXPR_(\d+)__/);
+			const slotMatch = rule.selector.match(PLACEHOLDER_RE);
 			const slotId = slotMatch ? Number(slotMatch[1]) : null;
 			const slotExpr = slotId !== null ? decl.templateExpressions[slotId] : null;
 			const otherLocal = slotExpr?.type === "Identifier" ? slotExpr.name : null;
 			const isCssHelperPlaceholder = !!otherLocal && cssHelperNames.has(otherLocal);
 			const selTrim2 = rule.selector.trim();
-			const isReverseSelectorPattern = selTrim2.startsWith("__SC_EXPR_") && !selTrim2.includes(",") && /^__SC_EXPR_\d+__:[a-z][a-z0-9()-]*\s+&\s*$/.test(selTrim2);
-			if (otherLocal && !isCssHelperPlaceholder && isReverseSelectorPattern) {
-				const ancestorPseudo = rule.selector.match(/__SC_EXPR_\d+__(:[a-z-]+(?:\([^)]*\))?)/i)?.[1] ?? null;
+			const isReverseSelectorPattern = selTrim2.startsWith("__SC_EXPR_") && /^__SC_EXPR_\d+__:[a-z][a-z0-9()-]*\s+&\s*$/.test(selTrim2);
+			const isGroupedReverseSelectorPattern = !isReverseSelectorPattern && selTrim2.startsWith("__SC_EXPR_") && isCommaGroupedReverseSelectorPattern(selTrim2);
+			if (otherLocal && !isCssHelperPlaceholder && (isReverseSelectorPattern || isGroupedReverseSelectorPattern)) {
+				if (isGroupedReverseSelectorPattern) {
+					if ([...selTrim2.matchAll(new RegExp(PLACEHOLDER_RE.source, "g"))].map((m) => {
+						const id = Number(m[1]);
+						const expr = decl.templateExpressions[id];
+						return expr?.type === "Identifier" ? expr.name : null;
+					}).some((name) => name !== otherLocal)) {
+						state.markBail();
+						warnings.push({
+							severity: "warning",
+							type: "Unsupported selector: grouped reverse selector references different components",
+							loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+						});
+						break;
+					}
+				}
 				const parentDecl = declByLocalName.get(otherLocal);
-				if (!parentDecl) {
+				const crossFileParent = !parentDecl ? state.crossFileSelectorsByLocal.get(otherLocal) : void 0;
+				if (!parentDecl && !crossFileParent) {
+					state.markBail();
+					warnings.push({
+						severity: "warning",
+						type: "Unsupported selector: unknown component selector",
+						loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+					});
+					break;
+				}
+				const ancestorPseudos = extractReverseSelectorPseudos(rule.selector);
+				if (ancestorPseudos.length === 0) {
 					state.markBail();
 					warnings.push({
 						severity: "warning",
@@ -18072,9 +18914,16 @@ function processDeclRules(ctx) {
 					});
 					break;
 				}
-				const overrideStyleKey = `${toStyleKey(decl.localName)}In${otherLocal}`;
-				ancestorSelectorParents.add(parentDecl.styleKey);
-				if (processDeclarationsIntoBucket(rule, getOrCreateRelationOverrideBucket(overrideStyleKey, parentDecl.styleKey, decl.styleKey, ancestorPseudo, relationOverrides, relationOverridePseudoBuckets, decl.extraStyleKeys), j, decl, resolveThemeValue, resolveThemeValueFromFn, { bailOnUnresolved: true }) === "bail") {
+				const jsxParentName = crossFileParent?.bridgeComponentLocalName ?? otherLocal;
+				const parentStyleKey = parentDecl ? parentDecl.styleKey : toStyleKey(jsxParentName);
+				const overrideStyleKey = `${toStyleKey(decl.localName)}In${jsxParentName}`;
+				ancestorSelectorParents.add(parentStyleKey);
+				const reverseMarkerVarName = crossFileParent ? `${jsxParentName}Marker` : void 0;
+				const overrideCountBeforeReverse = relationOverrides.length;
+				const firstBucket = getOrCreateRelationOverrideBucket(overrideStyleKey, parentStyleKey, decl.styleKey, ancestorPseudos[0], relationOverrides, relationOverridePseudoBuckets, decl.extraStyleKeys);
+				tagCrossFileOverride(relationOverrides, overrideCountBeforeReverse, reverseMarkerVarName, jsxParentName);
+				const result = processDeclarationsIntoBucket(rule, firstBucket, j, decl, resolveThemeValue, resolveThemeValueFromFn, { bailOnUnresolved: true });
+				if (result === "bail") {
 					state.markBail();
 					warnings.push({
 						severity: "warning",
@@ -18083,13 +18932,19 @@ function processDeclRules(ctx) {
 					});
 					break;
 				}
+				const writtenProps = result;
+				for (let i = 1; i < ancestorPseudos.length; i++) {
+					const bucket = getOrCreateRelationOverrideBucket(overrideStyleKey, parentStyleKey, decl.styleKey, ancestorPseudos[i], relationOverrides, relationOverridePseudoBuckets, decl.extraStyleKeys);
+					for (const key of writtenProps) bucket[key] = firstBucket[key];
+				}
 				continue;
 			}
 			const isComponentSelectorPattern = selTrim2.startsWith("&") || /^__SC_EXPR_\d+__$/.test(selTrim2);
 			if (otherLocal && !isCssHelperPlaceholder && isComponentSelectorPattern) {
 				const childDecl = declByLocalName.get(otherLocal);
+				const crossFileUsage = !childDecl ? state.crossFileSelectorsByLocal.get(otherLocal) : void 0;
 				const ancestorPseudo = rule.selector.match(/&(:[a-z-]+(?:\([^)]*\))?)/i)?.[1] ?? null;
-				if (!childDecl) {
+				if (!childDecl && !crossFileUsage) {
 					state.markBail();
 					warnings.push({
 						severity: "warning",
@@ -18098,18 +18953,22 @@ function processDeclRules(ctx) {
 					});
 					break;
 				}
-				if (childDecl) {
-					const overrideStyleKey = `${toStyleKey(otherLocal)}In${decl.localName}`;
-					ancestorSelectorParents.add(decl.styleKey);
-					if (processDeclarationsIntoBucket(rule, getOrCreateRelationOverrideBucket(overrideStyleKey, decl.styleKey, childDecl.styleKey, ancestorPseudo, relationOverrides, relationOverridePseudoBuckets), j, decl, resolveThemeValue, resolveThemeValueFromFn, { bailOnUnresolved: true }) === "bail") {
-						state.markBail();
-						warnings.push({
-							severity: "warning",
-							type: "Unsupported selector: unresolved interpolation in descendant component selector",
-							loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
-						});
-						break;
-					}
+				const jsxLocalName = crossFileUsage?.bridgeComponentLocalName ?? otherLocal;
+				const childStyleKey = childDecl ? childDecl.styleKey : toStyleKey(jsxLocalName);
+				const overrideStyleKey = `${toStyleKey(jsxLocalName)}In${decl.localName}`;
+				ancestorSelectorParents.add(decl.styleKey);
+				const markerVarName = crossFileUsage ? `${decl.localName}Marker` : void 0;
+				const overrideCountBefore = relationOverrides.length;
+				const bucket = getOrCreateRelationOverrideBucket(overrideStyleKey, decl.styleKey, childStyleKey, ancestorPseudo, relationOverrides, relationOverridePseudoBuckets);
+				tagCrossFileOverride(relationOverrides, overrideCountBefore, markerVarName, jsxLocalName);
+				if (processDeclarationsIntoBucket(rule, bucket, j, decl, resolveThemeValue, resolveThemeValueFromFn, { bailOnUnresolved: true }) === "bail") {
+					state.markBail();
+					warnings.push({
+						severity: "warning",
+						type: crossFileUsage ? "Unsupported selector: unresolved interpolation in cross-file component selector" : "Unsupported selector: unresolved interpolation in descendant component selector",
+						loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+					});
+					break;
 				}
 				continue;
 			}
@@ -18188,6 +19047,7 @@ function processDeclRules(ctx) {
 		}
 		const pseudos = parsedSelector.kind === "pseudo" ? parsedSelector.pseudos : null;
 		const pseudoElement = parsedSelector.kind === "pseudoElement" ? parsedSelector.element : null;
+		const pseudoElementsList = parsedSelector.kind === "pseudoElements" ? parsedSelector.elements : null;
 		const attrSel = parsedSelector.kind === "attribute" ? {
 			kind: parsedSelector.attr.type,
 			suffix: parsedSelector.attr.suffix,
@@ -18276,16 +19136,7 @@ function processDeclRules(ctx) {
 				return;
 			}
 			if (resolvedSelectorMedia) {
-				let entry = perPropComputedMedia.get(prop);
-				if (!entry) {
-					const existingVal = styleObj[prop];
-					entry = {
-						defaultValue: existingVal !== void 0 ? existingVal : cssHelperPropValues.has(prop) ? getComposedDefaultValue(prop) : null,
-						entries: []
-					};
-					perPropComputedMedia.set(prop, entry);
-				}
-				entry.entries.push({
+				getOrCreateComputedMediaEntry(prop, ctx).entries.push({
 					keyExpr: resolvedSelectorMedia.keyExpr,
 					value
 				});
@@ -18303,15 +19154,18 @@ function processDeclRules(ctx) {
 				for (const ps of pseudos) existing[ps] = value;
 				return;
 			}
-			if (pseudoElement) {
-				nestedSelectors[pseudoElement] ??= {};
-				const pseudoSelector = nestedSelectors[pseudoElement];
-				if (pseudoSelector) {
-					pseudoSelector[prop] = value;
-					if (commentSource) addPropComments(pseudoSelector, prop, {
-						leading: commentSource.leading,
-						trailingLine: commentSource.trailingLine
-					});
+			const pseudoElementsToApply = pseudoElement ? [pseudoElement] : pseudoElementsList;
+			if (pseudoElementsToApply) {
+				for (const pe of pseudoElementsToApply) {
+					nestedSelectors[pe] ??= {};
+					const pseudoSelector = nestedSelectors[pe];
+					if (pseudoSelector) {
+						pseudoSelector[prop] = value;
+						if (commentSource) addPropComments(pseudoSelector, prop, {
+							leading: commentSource.leading,
+							trailingLine: commentSource.trailingLine
+						});
+					}
 				}
 				return;
 			}
@@ -18326,7 +19180,7 @@ function processDeclRules(ctx) {
 			rule,
 			media,
 			pseudos,
-			pseudoElement,
+			pseudoElement: pseudoElement ?? (pseudoElementsList ? pseudoElementsList[0] ?? null : null),
 			attrTarget,
 			resolvedSelectorMedia,
 			applyResolvedPropValue
@@ -18580,6 +19434,18 @@ function handlePseudoAlias(result, rule, ctx) {
 	decl.needsWrapperComponent = true;
 }
 /**
+* If a new relation override was created (array grew), tag it with cross-file metadata.
+* Used for both forward and reverse cross-file selector patterns.
+*/
+function tagCrossFileOverride(relationOverrides, countBefore, markerVarName, componentLocalName) {
+	if (!markerVarName || relationOverrides.length <= countBefore) return;
+	const created = relationOverrides.at(-1);
+	if (!created) return;
+	created.crossFile = true;
+	created.markerVarName = markerVarName;
+	created.crossFileComponentLocalName = componentLocalName;
+}
+/**
 * Recovers standalone conditional interpolations from inside a pseudo-alias block.
 *
 * When Stylis drops standalone placeholders at brace depth > 0, the pseudo-alias
@@ -18589,13 +19455,13 @@ function handlePseudoAlias(result, rule, ctx) {
 function recoverStandaloneInterpolationsInPseudoBlock(rule, decl) {
 	const { rawCss, templateExpressions } = decl;
 	if (!rawCss) return null;
-	const pseudoSlotMatch = rule.selector.match(/__SC_EXPR_(\d+)__/);
+	const pseudoSlotMatch = rule.selector.match(PLACEHOLDER_RE);
 	if (!pseudoSlotMatch) return null;
 	const pseudoSlotId = pseudoSlotMatch[1];
 	const blockRegex = new RegExp(`&&?:\\s*__SC_EXPR_${pseudoSlotId}__\\s*\\{([^}]*)\\}`);
 	const blockMatch = rawCss.match(blockRegex);
 	if (!blockMatch?.[1]) return null;
-	const standaloneSlotRegex = /__SC_EXPR_(\d+)__/g;
+	const standaloneSlotRegex = new RegExp(PLACEHOLDER_RE.source, "g");
 	const slots = [];
 	let slotMatch;
 	while ((slotMatch = standaloneSlotRegex.exec(blockMatch[1])) !== null) slots.push(Number(slotMatch[1]));
@@ -18651,6 +19517,113 @@ function extractCssTextFromNode(node) {
 	if (n.type === "TemplateLiteral" && (!n.expressions || n.expressions.length === 0)) return (n.quasis ?? []).map((q) => q.value?.raw ?? "").join("");
 	return null;
 }
+/** Reverse selector pattern for a single part: `__SC_EXPR_N__:pseudo &` */
+const REVERSE_SELECTOR_PART_RE = /^__SC_EXPR_\d+__:[a-z][a-z0-9()-]*\s+&$/;
+/**
+* Checks if a comma-separated selector has all parts matching the reverse
+* component selector pattern (`__SC_EXPR_N__:pseudo &`). Different slot IDs
+* are allowed since Stylis assigns each `${Component}` reference its own slot.
+*
+* Example: `__SC_EXPR_0__:focus-visible &, __SC_EXPR_1__:active &`
+*/
+function isCommaGroupedReverseSelectorPattern(selector) {
+	if (!selector.includes(",")) return false;
+	const parts = selector.split(",").map((p) => p.trim());
+	if (parts.length < 2) return false;
+	for (const part of parts) if (!REVERSE_SELECTOR_PART_RE.test(part)) return false;
+	return true;
+}
+/**
+* Extracts all pseudo-classes from a (possibly comma-separated) reverse
+* component selector. Each part is expected to match `__SC_EXPR_N__:pseudo &`.
+*
+* Returns e.g. [":focus-visible", ":active"] for
+* `__SC_EXPR_0__:focus-visible &, __SC_EXPR_0__:active &`.
+*/
+function extractReverseSelectorPseudos(selector) {
+	const parts = selector.split(",").map((p) => p.trim());
+	const pseudos = [];
+	for (const part of parts) {
+		const match = part.match(/__SC_EXPR_\d+__(:[a-z-]+(?:\([^)]*\))?)/i);
+		if (match?.[1]) pseudos.push(match[1]);
+	}
+	return pseudos;
+}
+/**
+* Returns the computed-media entry for `prop`, creating it on first access.
+* Centralises the get-or-create + default-value logic that both
+* resolvedSelectorMedia handling and sibling-selector handling need.
+*/
+function getOrCreateComputedMediaEntry(prop, ctx) {
+	const { perPropComputedMedia, styleObj, cssHelperPropValues, getComposedDefaultValue } = ctx;
+	let entry = perPropComputedMedia.get(prop);
+	if (!entry) {
+		const existingVal = styleObj[prop];
+		entry = {
+			defaultValue: existingVal !== void 0 ? existingVal : cssHelperPropValues.has(prop) ? getComposedDefaultValue(prop) : null,
+			entries: []
+		};
+		perPropComputedMedia.set(prop, entry);
+	}
+	return entry;
+}
+/**
+* Handles a self-referencing sibling selector (`& + &` or `& ~ &`) by processing
+* declarations and storing them as computed keys using `stylex.when.siblingBefore(':is(*)')`.
+*
+* **Semantic approximation:** CSS `& + &` targets only the *immediately adjacent*
+* sibling, while `stylex.when.siblingBefore()` generates a general sibling rule
+* (`~`) which matches *any* preceding sibling. This means the styles may apply
+* even when a non-matching element sits between two instances of the component.
+* In practice this rarely matters because `& + &` is almost always used with
+* consecutive homogeneous lists. For `& ~ &`, the mapping is semantically exact.
+*
+* Uses `defaultMarker()` (via `ancestorSelectorParents`) instead of per-component
+* `defineMarker()`, avoiding the `.stylex` file requirement. Because the marker
+* is file-global rather than component-scoped, styles from one component could
+* theoretically leak to another if both use sibling selectors and appear as
+* siblings in the same render tree.
+*
+* **`:is(*)` workaround:** The StyleX Babel plugin mandates a pseudo argument
+* starting with `:` for `siblingBefore()`. `:is(*)` is a universal match with
+* no effect on specificity or matching.
+* TODO: Remove the `:is(*)` workaround if the StyleX Babel plugin adds support
+* for no-arg `siblingBefore()` calls (currently crashes in `validatePseudoSelector`).
+*
+* Returns "break" on error to bail, otherwise the caller should `continue`.
+*/
+function handleSiblingSelector(selector, rule, ctx) {
+	const { state, decl } = ctx;
+	const { j, warnings, resolveThemeValue, resolveThemeValueFromFn, ancestorSelectorParents } = state;
+	if (/\+/.test(selector)) warnings.push({
+		severity: "info",
+		type: "Sibling selector broadened: & + & (adjacent) becomes general sibling (~) in StyleX — interleaved non-matching elements will no longer block the match",
+		loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+	});
+	ancestorSelectorParents.add(decl.styleKey);
+	const bucket = {};
+	if (processDeclarationsIntoBucket(rule, bucket, j, decl, resolveThemeValue, resolveThemeValueFromFn, { bailOnUnresolved: true }) === "bail") {
+		state.markBail();
+		warnings.push({
+			severity: "warning",
+			type: "Unsupported selector: unresolved interpolation in sibling selector",
+			loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+		});
+		return "break";
+	}
+	const makeSiblingKeyExpr = () => j.callExpression(j.memberExpression(j.memberExpression(j.identifier("stylex"), j.identifier("when")), j.identifier("siblingBefore")), [j.literal(":is(*)")]);
+	const media = rule.atRuleStack.find((a) => a.startsWith("@media"));
+	for (const [prop, value] of Object.entries(bucket)) {
+		const siblingValue = media ? {
+			default: null,
+			[media]: value
+		} : value;
+		getOrCreateComputedMediaEntry(prop, ctx).entries.push({
+			keyExpr: makeSiblingKeyExpr(),
+			value: siblingValue
+		});
+	}
+}
 
 //#endregion
 //#region src/internal/lower-rules/variants.ts
@@ -18920,7 +19893,7 @@ function finalizeDeclProcessing(ctx) {
 				if (!m || !m[1] || !m[2]) continue;
 				const prop = m[1].trim();
 				const value = m[2].trim();
-				if (/__SC_EXPR_\d+__/.test(value)) continue;
+				if (PLACEHOLDER_RE.test(value)) continue;
 				const outProp = cssPropertyToStylexProp(prop === "background" ? resolveBackgroundStylexProp(value) : prop);
 				bucket[outProp] = cssValueToJs({
 					kind: "static",
@@ -19344,15 +20317,21 @@ const finalizeRelationOverrides = (args) => {
 	const { j, relationOverridePseudoBuckets, relationOverrides, resolvedStyleObjects, makeCssPropKey, childPseudoMarkers } = args;
 	if (relationOverridePseudoBuckets.size === 0) return;
 	const overrideToChildKeys = /* @__PURE__ */ new Map();
+	const overrideToMarker = /* @__PURE__ */ new Map();
 	for (const o of relationOverrides) {
-		const keys = [o.childStyleKey, ...o.childExtraStyleKeys ?? []];
-		overrideToChildKeys.set(o.overrideStyleKey, keys);
+		overrideToChildKeys.set(o.overrideStyleKey, [o.childStyleKey, ...o.childExtraStyleKeys ?? []]);
+		if (o.crossFile && o.markerVarName) overrideToMarker.set(o.overrideStyleKey, o.markerVarName);
 	}
-	const makeAncestorKey = (pseudo) => j.callExpression(j.memberExpression(j.memberExpression(j.identifier("stylex"), j.identifier("when")), j.identifier("ancestor")), [j.literal(pseudo)]);
+	const makeAncestorKey = (pseudo, markerVarName) => {
+		const callArgs = [j.literal(pseudo)];
+		if (markerVarName) callArgs.push(j.identifier(markerVarName));
+		return j.callExpression(j.memberExpression(j.memberExpression(j.identifier("stylex"), j.identifier("when")), j.identifier("ancestor")), callArgs);
+	};
 	const isExpressionNode = (v) => isAstNode(v);
 	for (const [overrideKey, pseudoBuckets] of relationOverridePseudoBuckets.entries()) {
 		const baseBucket = pseudoBuckets.get(null) ?? {};
 		const props = [];
+		const markerVarName = overrideToMarker.get(overrideKey);
 		const childKeys = overrideToChildKeys.get(overrideKey) ?? [];
 		const childStyleObjects = [];
 		for (const key of childKeys) {
@@ -19387,7 +20366,7 @@ const finalizeRelationOverrides = (args) => {
 					const valExpr = isExpressionNode(value) ? value : literalToAst(j, value);
 					if (childPseudos?.has(pseudo)) objProps.push(j.property("init", j.literal(pseudo), valExpr));
 					else {
-						const ancestorKey = makeAncestorKey(pseudo);
+						const ancestorKey = makeAncestorKey(pseudo, markerVarName);
 						const propNode = Object.assign(j.property("init", ancestorKey, valExpr), { computed: true });
 						objProps.push(propNode);
 					}
@@ -19448,11 +20427,14 @@ function lowerRules(ctx) {
 		makeCssPropKey,
 		childPseudoMarkers: state.childPseudoMarkers
 	});
+	const crossFileMarkers = /* @__PURE__ */ new Map();
+	for (const o of state.relationOverrides) if (o.crossFile && o.markerVarName) crossFileMarkers.set(o.parentStyleKey, o.markerVarName);
 	return {
 		resolvedStyleObjects: state.resolvedStyleObjects,
 		relationOverrides: state.relationOverrides,
 		ancestorSelectorParents: state.ancestorSelectorParents,
 		usedCssHelperFunctions: state.usedCssHelperFunctions,
+		crossFileMarkers,
 		bail: state.bail
 	};
 }
@@ -19472,6 +20454,7 @@ function lowerRulesStep(ctx) {
 	ctx.resolvedStyleObjects = lowered.resolvedStyleObjects;
 	ctx.relationOverrides = lowered.relationOverrides;
 	ctx.ancestorSelectorParents = lowered.ancestorSelectorParents;
+	ctx.crossFileMarkers = lowered.crossFileMarkers;
 	if (lowered.bail || ctx.resolveValueBailRef.value) return returnResult({
 		code: null,
 		warnings: ctx.warnings
@@ -19488,7 +20471,7 @@ function lowerRulesStep(ctx) {
 //#endregion
 //#region src/internal/rewrite-jsx.ts
 function postProcessTransformedAst(args) {
-	const { root, j, relationOverrides, ancestorSelectorParents, componentNameToStyleKey, emptyStyleKeys, preserveReactImport, newImportLocalNames, newImportSourcesByLocal } = args;
+	const { root, j, relationOverrides, ancestorSelectorParents, componentNameToStyleKey, emptyStyleKeys, preserveReactImport, newImportLocalNames, newImportSourcesByLocal, stylesIdentifier = "styles", crossFileMarkers } = args;
 	let changed = false;
 	root.find(j.VariableDeclaration).forEach((p) => {
 		if (p.node.declarations.length === 0) {
@@ -19498,6 +20481,12 @@ function postProcessTransformedAst(args) {
 	});
 	if (relationOverrides.length > 0 || ancestorSelectorParents.size > 0) {
 		const makeDefaultMarkerCall = () => j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("defaultMarker")), []);
+		const crossFileChildOverrides = /* @__PURE__ */ new Map();
+		const crossFileParentMarkers = /* @__PURE__ */ new Map();
+		for (const o of relationOverrides) {
+			if (!o.crossFile || !o.crossFileComponentLocalName) continue;
+			appendToMapList(componentNameToStyleKey?.get(o.crossFileComponentLocalName) === o.parentStyleKey || o.parentStyleKey === toStyleKey(o.crossFileComponentLocalName) ? crossFileParentMarkers : crossFileChildOverrides, o.crossFileComponentLocalName, o);
+		}
 		const isStylexPropsCall = (n) => n?.type === "CallExpression" && n.callee?.type === "MemberExpression" && n.callee.object?.type === "Identifier" && n.callee.object.name === "stylex" && n.callee.property?.type === "Identifier" && n.callee.property.name === "props";
 		const getStylexPropsCallFromAttrs = (attrs) => {
 			for (const a of attrs ?? []) {
@@ -19506,13 +20495,19 @@ function postProcessTransformedAst(args) {
 			}
 		};
 		const hasStyleKeyArg = (call, key) => {
-			return (call.arguments ?? []).some((a) => a?.type === "MemberExpression" && a.object?.type === "Identifier" && a.object.name === "styles" && a.property?.type === "Identifier" && a.property.name === key);
+			return (call.arguments ?? []).some((a) => a?.type === "MemberExpression" && a.object?.type === "Identifier" && a.object.name === stylesIdentifier && a.property?.type === "Identifier" && a.property.name === key);
 		};
+		const hasIdentifierArg = (call, name) => (call.arguments ?? []).some((a) => a?.type === "Identifier" && a.name === name);
 		const hasDefaultMarker = (call) => {
 			return (call.arguments ?? []).some((a) => a?.type === "CallExpression" && a.callee?.type === "MemberExpression" && a.callee.object?.type === "Identifier" && a.callee.object.name === "stylex" && a.callee.property?.type === "Identifier" && a.callee.property.name === "defaultMarker");
 		};
 		const overridesByChild = /* @__PURE__ */ new Map();
 		for (const o of relationOverrides) overridesByChild.set(o.childStyleKey, [...overridesByChild.get(o.childStyleKey) ?? [], o]);
+		/** Check if any ancestor in the JSX tree contains the given parent style key. */
+		const ancestorHasParentKey = (ancestors, parentStyleKey) => {
+			const markerVarName = crossFileMarkers?.get(parentStyleKey);
+			return ancestors.some((a) => a?.call && hasStyleKeyArg(a.call, parentStyleKey) || a?.elementStyleKey && a.elementStyleKey === parentStyleKey || markerVarName && a?.markerVarName === markerVarName);
+		};
 		const pendingEmptyKeyRemovals = [];
 		const visit = (node, ancestors) => {
 			if (!node || node.type !== "JSXElement") return;
@@ -19526,7 +20521,13 @@ function postProcessTransformedAst(args) {
 						call,
 						key: parentKey
 					});
-					if (!hasDefaultMarker(call)) {
+					const markerVarName = crossFileMarkers?.get(parentKey);
+					if (markerVarName) {
+						if (!hasIdentifierArg(call, markerVarName)) {
+							call.arguments = [...call.arguments ?? [], j.identifier(markerVarName)];
+							changed = true;
+						}
+					} else if (!hasDefaultMarker(call)) {
 						call.arguments = [...call.arguments ?? [], makeDefaultMarkerCall()];
 						changed = true;
 					}
@@ -19535,26 +20536,61 @@ function postProcessTransformedAst(args) {
 			if (call) for (const [childKey, list] of overridesByChild.entries()) {
 				if (!hasStyleKeyArg(call, childKey)) continue;
 				for (const o of list) {
-					if (!ancestors.some((a) => a?.call && hasStyleKeyArg(a.call, o.parentStyleKey) || a?.elementStyleKey && a.elementStyleKey === o.parentStyleKey)) continue;
+					if (!ancestorHasParentKey(ancestors, o.parentStyleKey)) continue;
 					if (hasStyleKeyArg(call, o.overrideStyleKey)) continue;
-					const overrideArg = j.memberExpression(j.identifier("styles"), j.identifier(o.overrideStyleKey));
+					const overrideArg = j.memberExpression(j.identifier(stylesIdentifier), j.identifier(o.overrideStyleKey));
 					call.arguments = [...call.arguments ?? [], overrideArg];
 					changed = true;
 				}
 			}
+			const childOverrides = elementName ? crossFileChildOverrides.get(elementName) : void 0;
+			if (childOverrides) {
+				const overrideArgs = [];
+				for (const o of childOverrides) {
+					if (!ancestorHasParentKey(ancestors, o.parentStyleKey)) continue;
+					overrideArgs.push(j.memberExpression(j.identifier(stylesIdentifier), j.identifier(o.overrideStyleKey)));
+				}
+				if (overrideArgs.length > 0) {
+					const existingCall = getStylexPropsCallFromAttrs(opening.attributes ?? []);
+					if (existingCall) existingCall.arguments = [...existingCall.arguments ?? [], ...overrideArgs];
+					else {
+						const newCall = j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), overrideArgs);
+						opening.attributes = [...opening.attributes ?? [], j.jsxSpreadAttribute(newCall)];
+					}
+					changed = true;
+				}
+			}
+			let addedMarkerVarName;
+			const parentMarkers = elementName ? crossFileParentMarkers.get(elementName) : void 0;
+			if (parentMarkers) for (const o of parentMarkers) {
+				if (!o.markerVarName) continue;
+				addedMarkerVarName = o.markerVarName;
+				const markerIdent = j.identifier(o.markerVarName);
+				if (call) {
+					if (!hasIdentifierArg(call, o.markerVarName)) {
+						call.arguments = [...call.arguments ?? [], markerIdent];
+						changed = true;
+					}
+				} else {
+					const markerCall = j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), [markerIdent]);
+					opening.attributes = [...opening.attributes ?? [], j.jsxSpreadAttribute(markerCall)];
+					changed = true;
+				}
+			}
 			const nextAncestors = [...ancestors, {
 				call,
-				elementStyleKey
+				elementStyleKey,
+				markerVarName: addedMarkerVarName
 			}];
 			for (const c of node.children ?? []) if (c?.type === "JSXElement") visit(c, nextAncestors);
 		};
 		root.find(j.JSXElement).forEach((p) => {
-			if (j(p).closest(j.JSXElement).size() > 1) return;
+			if (j(p).closest(j.JSXElement).size() > 0) return;
 			visit(p.node, []);
 		});
 		for (const { call, key } of pendingEmptyKeyRemovals) {
 			const originalLength = (call.arguments ?? []).length;
-			call.arguments = (call.arguments ?? []).filter((a) => !(a?.type === "MemberExpression" && a.object?.type === "Identifier" && a.object.name === "styles" && a.property?.type === "Identifier" && a.property.name === key));
+			call.arguments = (call.arguments ?? []).filter((a) => !(a?.type === "MemberExpression" && a.object?.type === "Identifier" && a.object.name === stylesIdentifier && a.property?.type === "Identifier" && a.property.name === key));
 			if ((call.arguments ?? []).length !== originalLength) changed = true;
 		}
 	}
@@ -19643,6 +20679,11 @@ function postProcessTransformedAst(args) {
 		needsReactImport: usesReactIdent && !hasReactImport
 	};
 }
+function appendToMapList(map, key, value) {
+	const list = map.get(key);
+	if (list) list.push(value);
+	else map.set(key, [value]);
+}
 
 //#endregion
 //#region src/internal/transform-steps/post-process.ts
@@ -19692,7 +20733,9 @@ function postProcessStep(ctx) {
 		emptyStyleKeys: ctx.emptyStyleKeys ?? /* @__PURE__ */ new Set(),
 		preserveReactImport: ctx.preserveReactImport,
 		newImportLocalNames,
-		newImportSourcesByLocal
+		newImportSourcesByLocal,
+		stylesIdentifier: ctx.stylesIdentifier,
+		crossFileMarkers: ctx.crossFileMarkers
 	});
 	if (post.changed) ctx.markChanged();
 	ctx.needsReactImport = post.needsReactImport;
@@ -20147,10 +21190,24 @@ function transform(file, api, options) {
 	try {
 		const result = transformWithWarnings(file, api, options);
 		Logger.logWarnings(result.warnings, file.path);
+		if (result.sidecarContent) {
+			const sidecarFiles = options.sidecarFiles;
+			if (sidecarFiles) {
+				const dir = dirname(file.path);
+				const fileBase = basename(file.path).replace(/\.\w+$/, "");
+				sidecarFiles.set(join(dir, `${fileBase}.stylex.ts`), result.sidecarContent);
+			}
+		}
+		if (result.bridgeResults && result.bridgeResults.length > 0) {
+			const bridgeResultsMap = options.bridgeResults;
+			if (bridgeResultsMap) bridgeResultsMap.set(toRealPath(file.path), result.bridgeResults);
+		}
 		return result.code;
 	} catch (e) {
-		const msg = `Transform failed: ${e instanceof Error ? e.message : String(e)}`;
-		Logger.logError(msg, file.path);
+		if (!Logger.isErrorLogged(e)) {
+			const msg = `Transform failed: ${e instanceof Error ? e.message : String(e)}`;
+			Logger.logError(msg, file.path);
+		}
 		throw e;
 	}
 }
@@ -20158,7 +21215,7 @@ function transform(file, api, options) {
 * Transform with detailed warnings returned (for testing)
 */
 function transformWithWarnings(file, api, options) {
-	const ctx = new TransformContext(file, api, options);
+	const ctx = new TransformContext(file, api, extractCrossFileInfoForFile(file.path, options));
 	const pipeline = [
 		preflight,
 		applyPolicyGates,
@@ -20176,6 +21233,7 @@ function transformWithWarnings(file, api, options) {
 		collectStaticPropsStep,
 		rewriteJsxStep,
 		emitWrappersStep,
+		emitBridgeExportsStep,
 		upgradePolymorphicAsPropTypesStep,
 		ensureMergerImportStep,
 		reinsertStaticPropsStep,
@@ -20189,6 +21247,52 @@ function transformWithWarnings(file, api, options) {
 	}
 	return finalize(ctx);
 }
+/**
+* Extract per-file cross-file info from the global prepass result stored in jscodeshift options.
+* The prepass result (if any) is passed via `options.crossFilePrepassResult` from runTransform.
+*/
+function extractCrossFileInfoForFile(filePath, options) {
+	const prepass = options.crossFilePrepassResult;
+	if (!prepass) return options;
+	const absPath = resolveToPrepassKey(filePath, prepass);
+	const selectorUsages = prepass.selectorUsages.get(absPath);
+	const bridgeComponentNames = prepass.componentsNeedingGlobalSelectorBridge?.get(absPath);
+	if ((!selectorUsages || selectorUsages.length === 0) && !bridgeComponentNames) return options;
+	const crossFileInfo = {
+		selectorUsages: selectorUsages ?? [],
+		bridgeComponentNames
+	};
+	return {
+		...options,
+		crossFileInfo
+	};
+}
+/**
+* Resolve a file path to the key form used by the prepass maps.
+* Tries pathResolve first; falls back to realpathSync if the key isn't found
+* (handles macOS /var → /private/var and similar symlink divergences).
+*/
+function resolveToPrepassKey(filePath, prepass) {
+	const resolved = resolve(filePath);
+	if (prepass.selectorUsages.has(resolved) || prepass.componentsNeedingGlobalSelectorBridge?.has(resolved)) return resolved;
+	try {
+		const real = realpathSync(resolved);
+		if (real !== resolved) return real;
+	} catch {}
+	return resolved;
+}
+/**
+* Resolve a file path to its real (symlink-resolved) absolute path.
+* Falls back to pathResolve if realpathSync fails.
+*/
+function toRealPath(filePath) {
+	const resolved = resolve(filePath);
+	try {
+		return realpathSync(resolved);
+	} catch {
+		return resolved;
+	}
+}
 
 //#endregion
 export { transform as default, transformWithWarnings };