styled-components-to-stylex-codemod 0.0.20 → 0.0.22

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-DSmZSMxN.mjs";
+import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-nDTvuKsY.mjs";
 
 //#region src/run.d.ts
 interface RunTransformOptions {

package/dist/index.mjs

@@ -143,7 +143,7 @@ async function runTransform(options) {
 	].join("\n"));
 	const { createModuleResolver } = await import("./resolve-imports-4bFqrkrQ.mjs");
 	const sharedResolver = createModuleResolver();
-	const { runPrepass } = await import("./run-prepass-BuYfEK4M.mjs");
+	const { runPrepass } = await import("./run-prepass-DtSt5v9e.mjs");
 	const absoluteFiles = filePaths.map((f) => resolve(f));
 	const absoluteConsumers = consumerFilePaths.map((f) => resolve(f));
 	let prepassResult;

package/dist/{logger-DSmZSMxN.d.mts → logger-nDTvuKsY.d.mts}

@@ -613,7 +613,7 @@ declare function defineAdapter<T extends AdapterInput>(adapter: T): T;
 //#endregion
 //#region src/internal/logger.d.ts
 type Severity = "info" | "warning" | "error";
-type WarningType = "`css` helper function switch must return css templates in all branches" | "`css` helper usage as a function call (css(...)) is not supported" | "`css` helper used outside of a styled component template cannot be statically transformed" | "Adapter helper call in border interpolation did not resolve to a single CSS value" | "Adapter resolveCall returned an unparseable styles expression" | "Adapter resolveCall returned an unparseable value expression" | "Adapter resolveCall returned StyleX styles for helper call where a CSS value was expected" | "Adapter resolveCall returned undefined for helper call" | "Adapter resolveBaseComponent threw an error" | "Adapter resolved StyleX styles cannot be applied under nested selectors/at-rules" | "Adapter resolved StyleX styles inside pseudo selector but did not provide cssText for property expansion — add cssText to resolveCall result to enable pseudo-wrapping" | 'Adapter resolveCall cssText could not be parsed as CSS declarations — expected semicolon-separated property: value pairs (e.g. "white-space: nowrap; overflow: hidden;")' | "Adapter resolveValue returned an unparseable value expression" | "Adapter resolveValue returned undefined for imported value" | "Arrow function: body is not a recognized pattern (expected ternary, logical, call, or member expression)" | "Arrow function: conditional branches could not be resolved to static or theme values" | "Arrow function: helper call body is not supported" | "Arrow function: indexed theme lookup pattern not matched" | "Arrow function: logical expression pattern not supported" | "Arrow function: prop access cannot be converted to style function for this CSS property" | "Arrow function: theme access path could not be resolved" | "Component selectors like `${OtherComponent}:hover &` are not directly representable in StyleX. Manual refactor is required" | "Conditional `css` block: !important is not supported in StyleX" | "Conditional `css` block: @-rules (e.g., @media, @supports) are not supported" | "CSS block contains unsupported at-rule (only @media and @container are supported; @supports, etc. require manual handling)" | "Conditional `css` block: dynamic interpolation could not be resolved to a single component prop" | "Conditional `css` block: failed to parse expression" | "Conditional `css` block: missing CSS property name" | "Conditional `css` block: missing interpolation expression" | "Conditional `css` block: mixed static/dynamic values with non-theme expressions cannot be safely transformed" | "Conditional `css` block: multiple interpolation slots in a single property value" | "Conditional `css` block: ternary branch value could not be resolved (imported values require adapter support)" | "Conditional `css` block: ternary expressions inside pseudo selectors are not supported" | "Conditional `css` block: unsupported selector" | "Directional border helper styles are not supported" | "Multi-slot border interpolation could not be resolved" | "createGlobalStyle is not supported in StyleX. Global styles should be handled separately (e.g., in a CSS file or using CSS reset libraries)" | "Dynamic styles inside pseudo elements (::before/::after) are not supported by StyleX. See https://github.com/facebook/stylex/issues/1396" | "Failed to parse theme expressions" | "Heterogeneous background values (mix of gradients and colors) not currently supported" | "Higher-order styled factory wrappers (e.g. hoc(styled)) are not supported" | "Imported CSS helper mixins: cannot determine inherited properties for correct pseudo selector handling" | "Local helper function returns CSS that cannot be decomposed into individual properties" | "Local helper function computes CSS values that cannot be statically traced to the component prop" | "Styled-components specificity hacks like `&&` / `&&&` are not representable in StyleX" | "Theme-dependent block-level conditional could not be fully resolved (branches may contain dynamic interpolations)" | "Theme-dependant call expression could not be resolved (e.g. theme helper calls like theme.highlight() are not supported)" | "Theme value with fallback (props.theme.X ?? / || default) cannot be resolved statically — use adapter.resolveValue to map theme paths to StyleX tokens" | "Theme-dependent nested prop access requires a project-specific theme source (e.g. useTheme())" | "Theme-dependent template literals require a project-specific theme source (e.g. useTheme())" | "Theme prop overrides on styled components are not supported" | "Universal selectors (`*`) are currently unsupported" | "Unsupported call expression (expected imported helper(...) or imported helper(...)(...))" | "Unsupported conditional test in shouldForwardProp" | "Unsupported shouldForwardProp pattern (only !prop.startsWith(), ![].includes(prop), and prop !== are supported)" | "Unsupported interpolation: arrow function" | "Unsupported interpolation: call expression" | "Unsupported interpolation: identifier" | "Unsupported interpolation: member expression" | "Unsupported interpolation: property" | "Unsupported interpolation: unknown" | "Unsupported nested conditional interpolation" | "Unsupported prop-based inline style expression cannot be safely inlined" | "Unsupported prop-based inline style props.theme access is not supported" | "Unsupported selector interpolation: imported value in selector position" | "Unsupported selector: class selector" | "Unsupported selector: comma-separated selectors must all be simple pseudos or pseudo-elements" | "Unsupported selector: descendant pseudo selector (space before pseudo)" | "Unsupported selector: descendant/child/sibling selector" | "Unsupported selector: interpolated pseudo selector" | "Unsupported selector: sibling combinator" | "Unsupported selector: unresolved interpolation in sibling selector" | "Unsupported selector: ambiguous element selector" | "Unsupported selector: attribute selector on unsupported element" | "Unsupported selector: element selector on exported component" | "Unsupported selector: element selector with combined ancestor and child pseudos" | "Unsupported selector: element selector with dynamic children" | "Unsupported selector: element selector with plain intrinsic children" | "Unsupported selector: element selector pseudo collision" | "Unsupported selector: unresolved interpolation in cross-file component selector" | "Unsupported selector: unresolved interpolation in descendant component selector" | "Unsupported selector: unresolved interpolation in element selector" | "Unsupported selector: unresolved interpolation in reverse component selector" | "Unsupported selector: grouped reverse selector references different components" | "Unsupported selector: unknown component selector" | "Unsupported css`` mixin: after-base mixin style is not a plain object" | "Unsupported css`` mixin: nested contextual conditions in after-base mixin" | "Unsupported css`` mixin: cannot infer base default for after-base contextual override (base value is non-literal)" | "css`` helper function interpolation references closure variable that cannot be hoisted" | "Sibling selector broadened: & + & (adjacent) becomes general sibling (~) in StyleX — interleaved non-matching elements will no longer block the match" | "Using styled-components components as mixins is not supported; use css`` mixins or strings instead" | "styled(ImportedComponent) wraps a component whose file contains internal styled-components — convert the base component's file first to avoid CSS cascade conflicts";
+type WarningType = "`css` helper function switch must return css templates in all branches" | "`css` helper usage as a function call (css(...)) is not supported" | "`css` helper used outside of a styled component template cannot be statically transformed" | "Adapter helper call in border interpolation did not resolve to a single CSS value" | "Adapter resolveCall returned an unparseable styles expression" | "Adapter resolveCall returned an unparseable value expression" | "Adapter resolveCall returned StyleX styles for helper call where a CSS value was expected" | "Adapter resolveCall returned undefined for helper call" | "Adapter resolveBaseComponent threw an error" | "Adapter resolved StyleX styles cannot be applied under nested selectors/at-rules" | "Adapter resolved StyleX styles inside pseudo selector but did not provide cssText for property expansion — add cssText to resolveCall result to enable pseudo-wrapping" | 'Adapter resolveCall cssText could not be parsed as CSS declarations — expected semicolon-separated property: value pairs (e.g. "white-space: nowrap; overflow: hidden;")' | "Adapter resolveValue returned an unparseable value expression" | "Adapter resolveValue returned undefined for imported value" | "Arrow function: body is not a recognized pattern (expected ternary, logical, call, or member expression)" | "Arrow function: conditional branches could not be resolved to static or theme values" | "Arrow function: helper call body is not supported" | "Arrow function: indexed theme lookup pattern not matched" | "Arrow function: logical expression pattern not supported" | "Arrow function: prop access cannot be converted to style function for this CSS property" | "Arrow function: theme access path could not be resolved" | "Component selectors like `${OtherComponent}:hover &` are not directly representable in StyleX. Manual refactor is required" | "Conditional `css` block: !important is not supported in StyleX" | "Conditional `css` block: @-rules (e.g., @media, @supports) are not supported" | "CSS block contains unsupported at-rule (only @media and @container are supported; @supports, etc. require manual handling)" | "Conditional `css` block: dynamic interpolation could not be resolved to a single component prop" | "Conditional `css` block: failed to parse expression" | "Conditional `css` block: missing CSS property name" | "Conditional `css` block: missing interpolation expression" | "Conditional `css` block: mixed static/dynamic values with non-theme expressions cannot be safely transformed" | "Conditional `css` block: multiple interpolation slots in a single property value" | "Conditional `css` block: ternary branch value could not be resolved (imported values require adapter support)" | "Conditional `css` block: ternary expressions inside pseudo selectors are not supported" | "Conditional `css` block: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)" | "Conditional `css` block: unsupported selector" | "Directional border helper styles are not supported" | "Multi-slot border interpolation could not be resolved" | "Resolved border helper value could not be expanded to longhand properties" | "createGlobalStyle is not supported in StyleX. Global styles should be handled separately (e.g., in a CSS file or using CSS reset libraries)" | "Dynamic styles inside pseudo elements (::before/::after) are not supported by StyleX. See https://github.com/facebook/stylex/issues/1396" | "Failed to parse theme expressions" | "Heterogeneous background values (mix of gradients and colors) not currently supported" | "Higher-order styled factory wrappers (e.g. hoc(styled)) are not supported" | "Imported CSS helper mixins: cannot determine inherited properties for correct pseudo selector handling" | "Local helper function returns CSS that cannot be decomposed into individual properties" | "Local helper function computes CSS values that cannot be statically traced to the component prop" | "Styled-components specificity hacks like `&&` / `&&&` are not representable in StyleX" | "Theme-dependent block-level conditional could not be fully resolved (branches may contain dynamic interpolations)" | "Theme-dependant call expression could not be resolved (e.g. theme helper calls like theme.highlight() are not supported)" | "Theme value with fallback (props.theme.X ?? / || default) cannot be resolved statically — use adapter.resolveValue to map theme paths to StyleX tokens" | "Theme-dependent nested prop access requires a project-specific theme source (e.g. useTheme())" | "Theme-dependent template literals require a project-specific theme source (e.g. useTheme())" | "Theme prop overrides on styled components are not supported" | "Universal selectors (`*`) are currently unsupported" | "Unsupported call expression (expected imported helper(...) or imported helper(...)(...))" | "Unsupported conditional test in shouldForwardProp" | "Unsupported shouldForwardProp pattern (only !prop.startsWith(), ![].includes(prop), and prop !== are supported)" | "Unsupported interpolation: arrow function" | "Unsupported interpolation: call expression" | "Unsupported interpolation: identifier" | "Unsupported interpolation: member expression" | "Unsupported interpolation: property" | "Unsupported interpolation: unknown" | "Unsupported nested conditional interpolation" | "Unsupported prop-based inline style expression cannot be safely inlined" | "Unsupported prop-based inline style props.theme access is not supported" | "Unsupported selector interpolation: imported value in selector position" | "Unsupported: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)" | "Unsupported selector: class selector" | "Unsupported selector: comma-separated selectors must all be simple pseudos or pseudo-elements" | "Unsupported selector: descendant pseudo selector (space before pseudo)" | "Unsupported selector: descendant/child/sibling selector" | "Unsupported selector: interpolated pseudo selector" | "Unsupported selector: sibling combinator" | "Unsupported selector: unresolved interpolation in sibling selector" | "Unsupported selector: ambiguous element selector" | "Unsupported selector: attribute selector on unsupported element" | "Unsupported selector: element selector on exported component" | "Unsupported selector: element selector with combined ancestor and child pseudos" | "Unsupported selector: element selector with dynamic children" | "Unsupported selector: element selector with plain intrinsic children" | "Unsupported selector: element selector pseudo collision" | "Unsupported selector: unresolved interpolation in cross-file component selector" | "Unsupported selector: unresolved interpolation in descendant component selector" | "Unsupported selector: unresolved interpolation in element selector" | "Unsupported selector: unresolved interpolation in reverse component selector" | "Unsupported selector: grouped reverse selector references different components" | "Unsupported selector: unknown component selector" | "Unsupported css`` mixin: after-base mixin style is not a plain object" | "Unsupported css`` mixin: nested contextual conditions in after-base mixin" | "Unsupported css`` mixin: cannot infer base default for after-base contextual override (base value is non-literal)" | "css`` helper function interpolation references closure variable that cannot be hoisted" | "Sibling selector broadened: & + & (adjacent) becomes general sibling (~) in StyleX — interleaved non-matching elements will no longer block the match" | "Using styled-components components as mixins is not supported; use css`` mixins or strings instead" | "styled(ImportedComponent) wraps a component whose file contains internal styled-components — convert the base component's file first to avoid CSS cascade conflicts";
 interface WarningLog {
   severity: Severity;
   type: WarningType;

package/dist/{run-prepass-BuYfEK4M.mjs → run-prepass-DtSt5v9e.mjs}

@@ -575,13 +575,20 @@ async function runPrepass(options) {
 				wrappedName: m[2]
 			});
 		}
-		if (hasAsProp) {
-			JSX_AS_COMPONENT_RE.lastIndex = 0;
-			for (const m of source.matchAll(JSX_AS_COMPONENT_RE)) if (m[1]) addToSetMap(asUsages, m[1], filePath);
-		}
-		if (hasRefProp) {
-			JSX_REF_COMPONENT_RE.lastIndex = 0;
-			for (const m of source.matchAll(JSX_REF_COMPONENT_RE)) if (m[1]) addToSetMap(refUsages, m[1], filePath);
+		if (hasAsProp || hasRefProp) {
+			let aliasMap;
+			const resolveTagName = (tagName) => {
+				aliasMap ??= buildLocalToImportedMap(source);
+				return aliasMap.get(tagName) ?? tagName;
+			};
+			if (hasAsProp) {
+				JSX_AS_COMPONENT_RE.lastIndex = 0;
+				for (const m of source.matchAll(JSX_AS_COMPONENT_RE)) if (m[1]) addToSetMap(asUsages, resolveTagName(m[1]), filePath);
+			}
+			if (hasRefProp) {
+				JSX_REF_COMPONENT_RE.lastIndex = 0;
+				for (const m of source.matchAll(JSX_REF_COMPONENT_RE)) if (m[1]) addToSetMap(refUsages, resolveTagName(m[1]), filePath);
+			}
 		}
 	}
 	const styledFileCount = fileContents.size;
@@ -746,11 +753,14 @@ const IMPORT_ALIAS_ENTRY_RE = /\b(\w+)\s+as\s+(\w+)/g;
 /**
 * Build a mapping from local alias names to original imported names for a source file.
 * Only includes PascalCase names that differ from their original (actual aliases).
+* Scans only import declarations to avoid false positives from TypeScript `as` casts
+* (e.g., `foo as Button` would incorrectly map `Button → foo`).
 */
 function buildLocalToImportedMap(source) {
+	const importText = collectImportDeclarationText(source);
 	const map = /* @__PURE__ */ new Map();
 	IMPORT_ALIAS_ENTRY_RE.lastIndex = 0;
-	for (const m of source.matchAll(IMPORT_ALIAS_ENTRY_RE)) {
+	for (const m of importText.matchAll(IMPORT_ALIAS_ENTRY_RE)) {
 		const original = m[1];
 		const local = m[2];
 		if (original !== local && /^[A-Z]/.test(local)) map.set(local, original);

package/dist/transform.d.mts

@@ -1,4 +1,4 @@
-import { n as WarningLog, r as Adapter } from "./logger-DSmZSMxN.mjs";
+import { n as WarningLog, r as Adapter } from "./logger-nDTvuKsY.mjs";
 import "stylis";
 import { API, FileInfo, Options } from "jscodeshift";
 

package/dist/transform.mjs

@@ -1600,12 +1600,12 @@ function analyzeBeforeEmitStep(ctx) {
 	};
 	if (!ctx.stylesInsertPosition && isUsedAtModuleLevel()) ctx.stylesInsertPosition = "afterImports";
 	if (ctx.resolvedStyleObjects) for (const decl of styledDecls) {
-		if (!decl.staticBooleanVariants?.length) continue;
-		for (const { propName, styleKey, styles } of decl.staticBooleanVariants) {
+		if (decl.staticBooleanVariants?.length) for (const { propName, styleKey, styles } of decl.staticBooleanVariants) {
 			ctx.resolvedStyleObjects.set(styleKey, styles);
 			if (!decl.variantStyleKeys) decl.variantStyleKeys = {};
 			decl.variantStyleKeys[propName] = styleKey;
 		}
+		if (decl.callSiteCombinedStyles?.length) for (const { styleKey, styles } of decl.callSiteCombinedStyles) ctx.resolvedStyleObjects.set(styleKey, styles);
 	}
 	return CONTINUE;
 }
@@ -5933,6 +5933,61 @@ function expandStaticAnimationShorthand(value, inlineKeyframeNames, j, styleObj,
 	if (classified.iteration) styleObj.animationIterationCount = classified.iteration;
 	return true;
 }
+/**
+* Resolves an interpolated animation declaration whose slot expressions
+* reference keyframes identifiers.
+*
+* Supports both the `animation` shorthand and `animation-name` longhand.
+* For shorthands, replaces each `__SC_EXPR_N__` placeholder with the
+* corresponding keyframes name, then delegates to
+* `expandStaticAnimationShorthand`.  For `animation-name`, resolves the
+* single slot directly to a JS identifier.
+*
+* Bails (returns null) on comma-separated multi-animation shorthands,
+* which the single-tuple parser cannot correctly model.
+*/
+function expandInterpolatedAnimationShorthand(args) {
+	const { property = "animation", valueRaw, slotExprById, keyframesNames, j, inlineKeyframeNameMap } = args;
+	if (property === "animation-name") return resolveAnimationNameSlot(valueRaw, slotExprById, keyframesNames, j);
+	if (valueRaw.includes(",")) return null;
+	return resolveAnimationShorthandSlots(valueRaw, slotExprById, keyframesNames, j, inlineKeyframeNameMap);
+}
+/** Resolves `animation-name: ${kf}` where the sole slot is a keyframes identifier. */
+function resolveAnimationNameSlot(valueRaw, slotExprById, keyframesNames, j) {
+	const kfName = extractKeyframesIdentifierFromSlot(valueRaw, slotExprById, keyframesNames);
+	if (!kfName) return null;
+	return { animationName: j.identifier(kfName) };
+}
+/** Resolves `animation: ${kf} 1.6s ease-in-out infinite` by replacing placeholders and expanding. */
+function resolveAnimationShorthandSlots(valueRaw, slotExprById, keyframesNames, j, inlineKeyframeNameMap) {
+	let modifiedValue = valueRaw;
+	const usedKeyframeNames = /* @__PURE__ */ new Set();
+	const placeholderRe = /__SC_EXPR_(\d+)__/g;
+	let match;
+	while (match = placeholderRe.exec(valueRaw)) {
+		const slotId = Number(match[1]);
+		const expr = slotExprById.get(slotId);
+		if (!expr || expr.type !== "Identifier" || !expr.name || !keyframesNames.has(expr.name)) return null;
+		modifiedValue = modifiedValue.replace(match[0], expr.name);
+		usedKeyframeNames.add(expr.name);
+	}
+	if (usedKeyframeNames.size === 0) return null;
+	const expanded = {};
+	if (expandStaticAnimationShorthand(modifiedValue, usedKeyframeNames, j, expanded, inlineKeyframeNameMap)) return expanded;
+	return null;
+}
+/**
+* If `valueRaw` is exactly a single `__SC_EXPR_N__` placeholder whose slot
+* expression is a keyframes identifier, returns the identifier name.
+*/
+function extractKeyframesIdentifierFromSlot(valueRaw, slotExprById, keyframesNames) {
+	const m = valueRaw.match(/^__SC_EXPR_(\d+)__$/);
+	if (!m) return null;
+	const slotId = Number(m[1]);
+	const expr = slotExprById.get(slotId);
+	if (!expr || expr.type !== "Identifier" || !expr.name || !keyframesNames.has(expr.name)) return null;
+	return expr.name;
+}
 
 //#endregion
 //#region src/internal/transform-steps/convert-keyframes.ts
@@ -6439,7 +6494,8 @@ function emptyOkVariantOutcome(hasLocalCallsites, usedConsumedPropsAtCallSites)
 		usedConsumedPropsAtCallSites,
 		foldedBaseSx: {},
 		bakedInConsumedProps: [],
-		staticBooleanVariants: []
+		staticBooleanVariants: [],
+		callSiteCombinedStyles: []
 	};
 }
 function applyBaseComponentResolution(ctx, styledDecls) {
@@ -6490,7 +6546,8 @@ function applyBaseComponentResolution(ctx, styledDecls) {
 			usedConsumedPropsAtCallSites: variantOutcome.usedConsumedPropsAtCallSites,
 			foldedBaseSx: variantOutcome.foldedBaseSx,
 			bakedInConsumedProps: variantOutcome.bakedInConsumedProps,
-			staticBooleanVariants: variantOutcome.staticBooleanVariants
+			staticBooleanVariants: variantOutcome.staticBooleanVariants,
+			callSiteCombinedStyles: variantOutcome.callSiteCombinedStyles
 		});
 	}
 }
@@ -6644,7 +6701,7 @@ function buildInlineResolverVariantDimensions(args) {
 				continue;
 			}
 			const [singleKey, singleVariantStyles] = Object.entries(variants)[0];
-			if (singleKey === "true" && booleanOnlyProps.has(propName)) {
+			if (isSingleVariantKeyTruthy(singleKey, booleanOnlyProps.has(propName))) {
 				staticBooleanVariants.push({
 					propName,
 					styleKey: `${decl.styleKey}${toSuffixFromProp(propName)}`,
@@ -6661,6 +6718,31 @@ function buildInlineResolverVariantDimensions(args) {
 			propTypeFromKeyof: true
 		});
 	}
+	const callSiteCombinedStyles = buildCallSiteCombinedStyles({
+		decl,
+		staticBooleanVariants,
+		dimensions,
+		baseSx: {
+			...baseResult.sx,
+			...foldedBaseSx
+		},
+		propsByUsage: usageResult.propsByUsage,
+		hasCompleteCallsiteVisibility: !willHaveExternalInterface(ctx, decl, styledDecls) && !decl.usedAsValue,
+		hasPropReferencingTemplateExpressions: (decl.templateExpressions ?? []).some((expr) => {
+			const type = expr?.type;
+			return type === "ArrowFunctionExpression" || type === "FunctionExpression";
+		})
+	});
+	if (callSiteCombinedStyles) return {
+		kind: "ok",
+		variantDimensions: dimensions,
+		hasLocalCallsites,
+		usedConsumedPropsAtCallSites,
+		foldedBaseSx,
+		bakedInConsumedProps,
+		staticBooleanVariants: [],
+		callSiteCombinedStyles
+	};
 	return {
 		kind: "ok",
 		variantDimensions: dimensions,
@@ -6668,7 +6750,8 @@ function buildInlineResolverVariantDimensions(args) {
 		usedConsumedPropsAtCallSites,
 		foldedBaseSx,
 		bakedInConsumedProps,
-		staticBooleanVariants
+		staticBooleanVariants,
+		callSiteCombinedStyles: []
 	};
 }
 /**
@@ -6804,12 +6887,59 @@ function diffSx(baseSx, siteSx) {
 	for (const [prop, value] of Object.entries(siteSx)) if (!(prop in baseSx)) out[prop] = value;
 	return out;
 }
+/**
+* For direct JSX resolution, merges individual single-key variant styles into
+* combined per-call-site entries. Returns the combined styles, or null if
+* combining is not applicable (e.g., multi-key variants, wrapper components).
+*/
+function buildCallSiteCombinedStyles(args) {
+	const { decl, staticBooleanVariants, dimensions, baseSx, propsByUsage, hasCompleteCallsiteVisibility, hasPropReferencingTemplateExpressions } = args;
+	if (!decl.isDirectJsxResolution || !hasCompleteCallsiteVisibility || hasPropReferencingTemplateExpressions || staticBooleanVariants.length < 2 || dimensions.length > 0) return null;
+	const variantsByProp = new Map(staticBooleanVariants.map((v) => [v.propName, v]));
+	const combinationGroups = /* @__PURE__ */ new Map();
+	for (const siteProps of propsByUsage) {
+		const matchingPropNames = Object.keys(siteProps).filter((p) => variantsByProp.has(p)).sort();
+		if (matchingPropNames.length === 0) continue;
+		const groupKey = matchingPropNames.join(",");
+		if (combinationGroups.has(groupKey)) continue;
+		const mergedStyles = { ...baseSx };
+		for (const propName of matchingPropNames) {
+			const variant = variantsByProp.get(propName);
+			Object.assign(mergedStyles, variant.styles);
+		}
+		combinationGroups.set(groupKey, {
+			propNames: matchingPropNames,
+			styles: mergedStyles
+		});
+	}
+	if (combinationGroups.size === 0 || combinationGroups.size >= staticBooleanVariants.length) return null;
+	const result = [];
+	for (const [, { propNames, styles }] of combinationGroups) {
+		const suffix = propNames.map((p) => toSuffixFromProp(p)).join("");
+		result.push({
+			propNames,
+			styleKey: `${decl.styleKey}${suffix}`,
+			styles
+		});
+	}
+	return result;
+}
+/**
+* Checks whether a single variant key represents a value that is truthy at runtime.
+* For boolean props, only `"true"` is truthy (`false` is falsy).
+* For non-boolean props (numbers, strings), "0" and "" are falsy; everything else is truthy.
+* Falsy values cannot use the truthy-guard pattern (`prop && styles.key`) safely.
+*/
+function isSingleVariantKeyTruthy(key, isBooleanProp) {
+	if (isBooleanProp) return key === "true";
+	return key !== "0" && key !== "";
+}
 function serializeRecord(record) {
 	const ordered = Object.keys(record).sort().map((key) => [key, record[key]]);
 	return JSON.stringify(ordered);
 }
 function inlineResolvedBaseComponent(args) {
-	const { ctx, decl, baseStaticProps, importSource, importedName, baseResult, consumedProps, variantDimensions, hasLocalCallsites, usedConsumedPropsAtCallSites, foldedBaseSx, bakedInConsumedProps, staticBooleanVariants } = args;
+	const { ctx, decl, baseStaticProps, importSource, importedName, baseResult, consumedProps, variantDimensions, hasLocalCallsites, usedConsumedPropsAtCallSites, foldedBaseSx, bakedInConsumedProps, staticBooleanVariants, callSiteCombinedStyles } = args;
 	const sxRule = createRuleFromStylexDeclarations(Object.keys(foldedBaseSx).length > 0 ? {
 		...baseResult.sx,
 		...foldedBaseSx
@@ -6853,6 +6983,7 @@ function inlineResolvedBaseComponent(args) {
 	};
 	if (variantDimensions.length > 0) decl.variantDimensions = [...decl.variantDimensions ?? [], ...variantDimensions];
 	if (staticBooleanVariants.length > 0) decl.staticBooleanVariants = [...decl.staticBooleanVariants ?? [], ...staticBooleanVariants];
+	if (callSiteCombinedStyles.length > 0) decl.callSiteCombinedStyles = [...decl.callSiteCombinedStyles ?? [], ...callSiteCombinedStyles];
 	decl.inlinedBaseComponent = {
 		importSource,
 		importedName,
@@ -6986,7 +7117,8 @@ function resolveDirectJsxUsages(ctx, styledDecls) {
 			usedConsumedPropsAtCallSites: variantOutcome.usedConsumedPropsAtCallSites,
 			foldedBaseSx: variantOutcome.foldedBaseSx,
 			bakedInConsumedProps: variantOutcome.bakedInConsumedProps,
-			staticBooleanVariants: variantOutcome.staticBooleanVariants
+			staticBooleanVariants: variantOutcome.staticBooleanVariants,
+			callSiteCombinedStyles: variantOutcome.callSiteCombinedStyles
 		});
 		usedStyleKeys.add(syntheticDecl.styleKey);
 		styledDecls.push(syntheticDecl);
@@ -10273,7 +10405,7 @@ function emitSimpleWithConfigWrappers(ctx) {
 				allowAsProp,
 				allowClassNameProp: false,
 				allowStyleProp: false,
-				includeRefProp: d.supportsRefProp ?? false,
+				includeRefProp: (d.supportsRefProp ?? false) || !includeRest && willForwardRef,
 				includeRest,
 				defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
 				conditionalAttrs: d.attrsInfo?.conditionalAttrs ?? [],
@@ -10680,7 +10812,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 					...allowClassNameProp ? [ctx.patternProp("className", classNameId)] : [],
 					...includeChildren ? [ctx.patternProp("children", childrenId)] : [],
 					...allowStyleProp ? [ctx.patternProp("style", styleId)] : [],
-					...d.supportsRefProp ?? false ? [ctx.patternProp("ref", refId)] : [],
+					...(d.supportsRefProp ?? false) || !restId && willForwardRef ? [ctx.patternProp("ref", refId)] : [],
 					...allowSxProp ? [ctx.patternProp("sx", sxId)] : []
 				],
 				destructureProps,
@@ -10712,7 +10844,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 					attrsInfo: attrsInfoWithoutForwardedAsStatic,
 					propExprFor: (prop) => j.identifier(prop)
 				}),
-				...d.supportsRefProp ?? false ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))] : [],
+				...(d.supportsRefProp ?? false) || !restId && willForwardRef ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))] : [],
 				...restId ? [j.jsxSpreadAttribute(restId)] : [],
 				...includesForwardedAs ? [j.jsxAttribute(j.jsxIdentifier("as"), j.jsxExpressionContainer(buildForwardedAsValueExpr(forwardedAsId, forwardedAsStaticFallback)))] : []
 			];
@@ -10748,7 +10880,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			allowAsProp,
 			allowClassNameProp: false,
 			allowStyleProp: false,
-			includeRefProp: d.supportsRefProp ?? false,
+			includeRefProp: (d.supportsRefProp ?? false) || !shouldIncludeRest && willForwardRef,
 			includeRest: shouldIncludeRest,
 			defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
 			conditionalAttrs: d.attrsInfo?.conditionalAttrs ?? [],
@@ -13672,6 +13804,149 @@ function buildInterpolatedTemplate(args) {
 	return j.templateLiteral(quasis, exprs);
 }
 
+//#endregion
+//#region src/internal/lower-rules/utils.ts
+/**
+* Shared lower-rules helpers for merging and formatting style objects.
+* Core concepts: deep merge semantics, AST node detection, and media query resolution.
+*/
+/** Returns true for at-rules the codemod can transform (`@media`, `@container`). */
+function isSupportedAtRule(atRule) {
+	return atRule.startsWith("@media") || atRule.startsWith("@container");
+}
+/** Finds the first supported at-rule (`@media` or `@container`) in the stack, if any. */
+function findSupportedAtRule(atRuleStack) {
+	return atRuleStack.find(isSupportedAtRule);
+}
+/**
+* Resolves a media/container at-rule string that may contain `__SC_EXPR_N__` placeholders.
+*
+* First tries `resolveSelector` (when available) to produce a computed key like
+* `[breakpoints.phone]`. Falls back to static value substitution.
+*
+* Returns null if the placeholder cannot be resolved at all.
+*/
+function resolveMediaAtRulePlaceholders(media, getSlotExpr, ctx) {
+	if (!media.includes("__SC_EXPR_")) return {
+		kind: "static",
+		value: media
+	};
+	const globalRe = new RegExp(PLACEHOLDER_RE.source, "g");
+	const matches = [...media.matchAll(globalRe)];
+	if (matches.length === 1 && ctx.resolveSelector && ctx.parseExpr) {
+		const expr = getSlotExpr(Number(matches[0][1]));
+		if (expr && typeof expr === "object") {
+			const info = extractRootAndPath(expr);
+			if (info) {
+				const imp = ctx.lookupImport(info.rootName, info.rootNode);
+				if (imp) {
+					const result = ctx.resolveSelector({
+						kind: "selectorInterpolation",
+						importedName: imp.importedName,
+						source: imp.source,
+						path: info.path.length > 0 ? info.path.join(".") : void 0,
+						filePath: ctx.filePath
+					});
+					if (result?.kind === "media") {
+						const keyExpr = ctx.parseExpr(result.expr);
+						if (keyExpr) {
+							for (const impSpec of result.imports ?? []) ctx.resolverImports.set(JSON.stringify(impSpec), impSpec);
+							return {
+								kind: "computed",
+								keyExpr,
+								imports: result.imports ?? []
+							};
+						}
+					}
+				}
+			}
+		}
+	}
+	const resolved = resolveMediaQueryPlaceholders(media, (slotId) => resolveSlotExprToStaticValue(getSlotExpr(slotId), ctx.lookupImport, ctx.resolveValue, ctx.filePath, ctx.resolverImports));
+	if (resolved === null) return null;
+	return {
+		kind: "static",
+		value: resolved
+	};
+}
+/** Returns true if the key looks like a StyleX style condition (pseudo, media, container). */
+function isStyleConditionKey(key) {
+	return key.startsWith(":") || key.startsWith("::") || key.startsWith("@media") || key.startsWith("@container");
+}
+/**
+* Merges tracked @media values into a base style object as nested StyleX objects.
+* Each property that has media-scoped values is wrapped in:
+* `{ default: baseValue, "@media (...)": mediaValue }`
+*/
+function mergeMediaIntoStyles(base, mediaStyles) {
+	for (const [mediaQuery, mediaStyle] of mediaStyles) for (const [prop, mediaValue] of Object.entries(mediaStyle)) base[prop] = {
+		default: base[prop] ?? null,
+		[mediaQuery]: mediaValue
+	};
+}
+/**
+* Recursively merges style objects, combining nested objects rather than overwriting.
+*
+* Note: Security scanners may flag this as prototype pollution, but this is a false positive.
+* This is a codemod that runs locally on the developer's own source code - there is no
+* untrusted input that could exploit prototype pollution. The source objects are style
+* declarations extracted from the developer's own styled-components code.
+*/
+function mergeStyleObjects(target, source) {
+	for (const [key, value] of Object.entries(source)) {
+		const existing = target[key];
+		if (existing && value && typeof existing === "object" && typeof value === "object" && !Array.isArray(existing) && !Array.isArray(value) && !isAstNode(existing) && !isAstNode(value)) mergeStyleObjects(existing, value);
+		else target[key] = value;
+	}
+}
+/** Resolves `__SC_EXPR_N__` placeholders in a string to static values via a callback. */
+function resolveMediaQueryPlaceholders(mediaQuery, resolveSlot) {
+	if (!mediaQuery.includes("__SC_EXPR_")) return mediaQuery;
+	const globalRe = new RegExp(PLACEHOLDER_RE.source, "g");
+	const matches = [];
+	let match;
+	while ((match = globalRe.exec(mediaQuery)) !== null) matches.push({
+		full: match[0],
+		slotId: Number(match[1])
+	});
+	let resolved = mediaQuery;
+	for (const m of matches) {
+		const staticVal = resolveSlot(m.slotId);
+		if (staticVal === null) return null;
+		resolved = resolved.replace(m.full, String(staticVal));
+	}
+	return resolved;
+}
+/** Resolves a slot expression AST node to a static string or number via the adapter. */
+function resolveSlotExprToStaticValue(expr, lookupImport, resolveValue, filePath, resolverImports) {
+	if (!expr || typeof expr !== "object") return null;
+	const staticVal = literalToStaticValue(expr);
+	if (typeof staticVal === "string" || typeof staticVal === "number") return staticVal;
+	const info = extractRootAndPath(expr);
+	if (!info) return null;
+	const imp = lookupImport(info.rootName, info.rootNode);
+	if (!imp) return null;
+	const result = resolveValue({
+		kind: "importedValue",
+		importedName: imp.importedName,
+		source: imp.source,
+		...info.path.length > 0 ? { path: info.path.join(".") } : {},
+		filePath
+	});
+	if (!result || !("expr" in result)) return null;
+	for (const impSpec of result.imports ?? []) resolverImports.set(JSON.stringify(impSpec), impSpec);
+	return parseStaticExprString(result.expr);
+}
+/** Parses a JS expression string as a static numeric or quoted string value. */
+function parseStaticExprString(expr) {
+	const trimmed = expr.trim();
+	if (!trimmed) return null;
+	const num = Number(trimmed);
+	if (!isNaN(num) && trimmed !== "") return num;
+	if (trimmed.startsWith("\"") && trimmed.endsWith("\"") || trimmed.startsWith("'") && trimmed.endsWith("'")) return trimmed.slice(1, -1);
+	return null;
+}
+
 //#endregion
 //#region src/internal/lower-rules/css-helper.ts
 /**
@@ -13816,14 +14091,15 @@ function createCssHelperResolver(args) {
 				exprString: JSON.stringify(v)
 			};
 		}
-		if (branch.type === "Identifier" && typeof branch.name === "string") {
-			const name = branch.name;
-			const imp = importMap.get(name);
+		const info = extractRootAndPath(branch);
+		if (info) {
+			const imp = importMap.get(info.rootName);
 			if (imp) {
 				const res = resolveValue({
 					kind: "importedValue",
 					importedName: imp.importedName,
 					source: imp.source,
+					...info.path.length > 0 ? { path: info.path.join(".") } : {},
 					filePath,
 					loc: getNodeLocStart(branch) ?? void 0
 				});
@@ -13835,9 +14111,9 @@ function createCssHelperResolver(args) {
 					exprString: res.expr
 				} : null;
 			}
-			return {
+			if (branch.type === "Identifier") return {
 				ast: branch,
-				exprString: name
+				exprString: info.rootName
 			};
 		}
 		return null;
@@ -13872,9 +14148,28 @@ function createCssHelperResolver(args) {
 		const dynamicProps = [];
 		const dynamicPropKeys = /* @__PURE__ */ new Set();
 		const conditionalVariants = [];
+		const lookupImport = (localName) => importMap.get(localName) ?? null;
 		for (const rule of rules) {
-			const media = rule.atRuleStack.find((a) => a.startsWith("@media"));
-			if (rule.atRuleStack.length > 0 && !media) return bail("Conditional `css` block: @-rules (e.g., @media, @supports) are not supported");
+			const rawMedia = findSupportedAtRule(rule.atRuleStack);
+			if (rule.atRuleStack.length > 0 && !rawMedia) return bail("Conditional `css` block: @-rules (e.g., @media, @supports) are not supported");
+			let media = rawMedia;
+			let computedMediaKey = null;
+			if (rawMedia) {
+				const resolved = resolveMediaAtRulePlaceholders(rawMedia, (slotId) => slotExprById.get(slotId), {
+					lookupImport,
+					resolveValue,
+					resolveSelector: args.resolveSelector,
+					parseExpr,
+					filePath,
+					resolverImports
+				});
+				if (resolved === null) return bail("Conditional `css` block: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)");
+				if (resolved.kind === "static") media = resolved.value;
+				else {
+					computedMediaKey = resolved;
+					media = void 0;
+				}
+			}
 			const selector = (rule.selector ?? "").trim();
 			const allowDynamicValues = selector === "&";
 			let target = out;
@@ -13906,7 +14201,19 @@ function createCssHelperResolver(args) {
 			}
 			const mergeIntoContext = (value, prop, targetObj) => {
 				const existing = targetObj[prop];
-				if (media && currentPseudoClass) return mergeIntoPseudoContext(mergeIntoPseudoContext(value, media, existing && typeof existing === "object" && !Array.isArray(existing) && !isAstNode(existing) ? existing[currentPseudoClass] : void 0), currentPseudoClass, existing);
+				if (computedMediaKey) {
+					const nested = existing && typeof existing === "object" && !Array.isArray(existing) && !isAstNode(existing) ? existing : { default: existing ?? null };
+					if (!("default" in nested)) nested.default = null;
+					nested.__computedKeys = [...nested.__computedKeys ?? [], {
+						keyExpr: computedMediaKey.keyExpr,
+						value
+					}];
+					return nested;
+				}
+				if (media && currentPseudoClass) {
+					const pseudoExisting = existing && typeof existing === "object" && !Array.isArray(existing) && !isAstNode(existing) ? existing[currentPseudoClass] : void 0;
+					return mergeIntoPseudoContext(mergeIntoPseudoContext(value, media, pseudoExisting), currentPseudoClass, existing);
+				}
 				if (media) return mergeIntoPseudoContext(value, media, existing);
 				return mergeIntoPseudoContext(value, currentPseudoClass, existing);
 			};
@@ -13933,6 +14240,20 @@ function createCssHelperResolver(args) {
 					continue;
 				}
 				if (d.important) return bail("Conditional `css` block: !important is not supported in StyleX", { property: d.property });
+				if ((d.property === "animation" || d.property === "animation-name") && args.keyframesNames && args.keyframesNames.size > 0 && args.j) {
+					const expanded = expandInterpolatedAnimationShorthand({
+						property: d.property,
+						valueRaw: d.valueRaw,
+						slotExprById,
+						keyframesNames: args.keyframesNames,
+						j: args.j,
+						inlineKeyframeNameMap: args.inlineKeyframeNameMap
+					});
+					if (expanded) {
+						for (const [prop, value] of Object.entries(expanded)) target[prop] = mergeIntoContext(value, prop, target);
+						continue;
+					}
+				}
 				const parts = d.value.parts ?? [];
 				const slotParts = parts.filter((p) => p.kind === "slot");
 				if (slotParts.length !== 1) return bail("Conditional `css` block: multiple interpolation slots in a single property value", { property: d.property });
@@ -14484,6 +14805,7 @@ function createLowerRulesState(ctx) {
 		importMap,
 		filePath,
 		resolveValue,
+		resolveSelector,
 		parseExpr,
 		resolverImports,
 		warnings,
@@ -14556,39 +14878,6 @@ function createLowerRulesState(ctx) {
 	return state;
 }
 
-//#endregion
-//#region src/internal/lower-rules/utils.ts
-/**
-* Shared lower-rules helpers for merging and formatting style objects.
-* Core concepts: deep merge semantics and AST node detection.
-*/
-/**
-* Merges tracked @media values into a base style object as nested StyleX objects.
-* Each property that has media-scoped values is wrapped in:
-* `{ default: baseValue, "@media (...)": mediaValue }`
-*/
-function mergeMediaIntoStyles(base, mediaStyles) {
-	for (const [mediaQuery, mediaStyle] of mediaStyles) for (const [prop, mediaValue] of Object.entries(mediaStyle)) base[prop] = {
-		default: base[prop] ?? null,
-		[mediaQuery]: mediaValue
-	};
-}
-/**
-* Recursively merges style objects, combining nested objects rather than overwriting.
-*
-* Note: Security scanners may flag this as prototype pollution, but this is a false positive.
-* This is a codemod that runs locally on the developer's own source code - there is no
-* untrusted input that could exploit prototype pollution. The source objects are style
-* declarations extracted from the developer's own styled-components code.
-*/
-function mergeStyleObjects(target, source) {
-	for (const [key, value] of Object.entries(source)) {
-		const existing = target[key];
-		if (existing && value && typeof existing === "object" && typeof value === "object" && !Array.isArray(existing) && !Array.isArray(value) && !isAstNode(existing) && !isAstNode(value)) mergeStyleObjects(existing, value);
-		else target[key] = value;
-	}
-}
-
 //#endregion
 //#region src/internal/lower-rules/variant-utils.ts
 /**
@@ -16933,8 +17222,8 @@ function tryResolveInlineStyleValueForNestedPropAccess(node) {
 }
 function tryResolveInlineStyleValueFromArrowFn(node) {
 	if (!node.css.property) return null;
-	const hasMediaAtRule = (node.css.atRuleStack ?? []).some((rule) => rule.startsWith("@media"));
-	const isMediaSelector = (node.css.selector ?? "").trim().startsWith("@media");
+	const hasMediaAtRule = (node.css.atRuleStack ?? []).some(isSupportedAtRule);
+	const isMediaSelector = isSupportedAtRule((node.css.selector ?? "").trim());
 	if (!hasMediaAtRule && !isMediaSelector) return null;
 	const expr = node.expr;
 	if (!isArrowFunctionExpression(expr)) return null;
@@ -17032,7 +17321,7 @@ function resolveTemplateLiteralBranch(ctx, args) {
 	const inlineEntries = [];
 	const mediaStyles = /* @__PURE__ */ new Map();
 	for (const rule of rules) {
-		const media = rule.atRuleStack.find((a) => a.startsWith("@media") || a.startsWith("@container"));
+		let media = findSupportedAtRule(rule.atRuleStack);
 		if (rule.atRuleStack.length > 0 && !media) {
 			ctx.warnings?.push({
 				severity: "warning",
@@ -17041,8 +17330,36 @@ function resolveTemplateLiteralBranch(ctx, args) {
 			});
 			return null;
 		}
+		let computedMediaKeyExpr;
+		if (media) {
+			const resolved = resolveMediaAtRulePlaceholders(media, (slotId) => slotExprById.get(slotId), {
+				lookupImport: resolveImportInScope,
+				resolveValue,
+				resolveSelector: ctx.resolveSelector,
+				parseExpr,
+				filePath,
+				resolverImports
+			});
+			if (resolved === null) return null;
+			if (resolved.kind === "static") media = resolved.value;
+			else {
+				computedMediaKeyExpr = resolved.keyExpr;
+				media = void 0;
+			}
+		}
 		if ((rule.selector ?? "").trim() !== "&") return null;
 		const setStyleValue = (prop, value) => {
+			if (computedMediaKeyExpr) {
+				const existing = style[prop];
+				const nested = existing && typeof existing === "object" && !Array.isArray(existing) ? existing : { default: existing ?? null };
+				if (!("default" in nested)) nested.default = null;
+				nested.__computedKeys = [...nested.__computedKeys ?? [], {
+					keyExpr: computedMediaKeyExpr,
+					value
+				}];
+				style[prop] = nested;
+				return;
+			}
 			if (media) {
 				const target = mediaStyles.get(media) ?? {};
 				mediaStyles.set(media, target);
@@ -17072,6 +17389,20 @@ function resolveTemplateLiteralBranch(ctx, args) {
 				continue;
 			}
 			if (d.value.kind !== "interpolated") return null;
+			if ((d.property === "animation" || d.property === "animation-name") && ctx.keyframesNames && ctx.keyframesNames.size > 0) {
+				const expanded = expandInterpolatedAnimationShorthand({
+					property: d.property,
+					valueRaw: d.valueRaw,
+					slotExprById,
+					keyframesNames: ctx.keyframesNames,
+					j,
+					inlineKeyframeNameMap: ctx.inlineKeyframeNameMap
+				});
+				if (expanded) {
+					for (const [prop, value] of Object.entries(expanded)) setStyleValue(prop, value);
+					continue;
+				}
+			}
 			const parts = d.value.parts ?? [];
 			const slotParts = parts.filter((p) => p.kind === "slot");
 			if (slotParts.length === 0) return null;
@@ -17741,7 +18072,7 @@ const createCssHelperHandlers = (ctx) => {
 //#endregion
 //#region src/internal/lower-rules/css-helper-conditional.ts
 function createCssHelperConditionalHandler(ctx) {
-	const { j, decl, filePath, warnings, parseExpr, resolveValue, resolveCall, resolveImportInScope, resolverImports, componentInfo, handlerContext, styleObj, styleFnFromProps, styleFnDecls, inlineStyleProps, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveStaticCssBlock, isPlainTemplateLiteral, isThemeAccessTest, applyVariant, dropAllTestInfoProps, annotateParamFromJsxProp, findJsxPropTsType, isJsxPropOptional, markBail, importMap, extraStyleObjects, resolvedStyleObjects } = ctx;
+	const { j, decl, filePath, warnings, parseExpr, resolveValue, resolveCall, resolveSelector, resolveImportInScope, resolverImports, componentInfo, handlerContext, styleObj, styleFnFromProps, styleFnDecls, inlineStyleProps, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveStaticCssBlock, isPlainTemplateLiteral, isThemeAccessTest, applyVariant, dropAllTestInfoProps, annotateParamFromJsxProp, findJsxPropTsType, isJsxPropOptional, markBail, importMap, extraStyleObjects, resolvedStyleObjects } = ctx;
 	const avoidNames = new Set(importMap.keys());
 	/**
 	* Resolve the TS type node for a prop used in a style function parameter.
@@ -17910,21 +18241,57 @@ function createCssHelperConditionalHandler(ctx) {
 			const { rules, slotExprById } = parseCssTemplateToRules(tpl);
 			const out = /* @__PURE__ */ new Map();
 			const mediaValues = /* @__PURE__ */ new Map();
-			const setValueForProp = (prop, value, media) => {
-				if (media) {
+			const computedMediaValues = /* @__PURE__ */ new Map();
+			const setValueForProp = (prop, value, media, computedKey) => {
+				if (computedKey) {
+					const arr = computedMediaValues.get(prop) ?? [];
+					arr.push({
+						keyExpr: computedKey,
+						value
+					});
+					computedMediaValues.set(prop, arr);
+				} else if (media) {
 					if (!mediaValues.has(prop)) mediaValues.set(prop, /* @__PURE__ */ new Map());
 					mediaValues.get(prop).set(media, value);
 				} else out.set(prop, value);
 			};
 			for (const rule of rules) {
-				const media = rule.atRuleStack.find((a) => a.startsWith("@media"));
-				if (rule.atRuleStack.length > 0 && !media) return null;
+				const rawMedia = findSupportedAtRule(rule.atRuleStack);
+				if (rule.atRuleStack.length > 0 && !rawMedia) return null;
+				let media = rawMedia;
+				let computedMediaKeyExpr;
+				if (rawMedia) {
+					const resolved = resolveMediaAtRulePlaceholders(rawMedia, (slotId) => slotExprById.get(slotId), {
+						lookupImport: resolveImportInScope,
+						resolveValue,
+						resolveSelector,
+						parseExpr,
+						filePath,
+						resolverImports
+					});
+					if (resolved === null) return null;
+					if (resolved.kind === "static") media = resolved.value;
+					else {
+						computedMediaKeyExpr = resolved.keyExpr;
+						media = void 0;
+					}
+				}
 				if ((rule.selector ?? "").trim() !== "&") return null;
+				const applyExpandedAnimation = (expanded) => {
+					for (const [prop, value] of Object.entries(expanded)) setValueForProp(prop, typeof value === "string" || typeof value === "number" ? staticValueToLiteral(j, value) : value, media, computedMediaKeyExpr);
+				};
 				for (const d of rule.declarations) {
 					if (!d.property) return null;
 					if (d.property.includes("__SC_EXPR_")) return null;
 					if (d.important) return null;
 					if (d.value.kind === "static") {
+						if (d.property === "animation" && ctx.keyframesNames && ctx.keyframesNames.size > 0) {
+							const expanded = {};
+							if (expandStaticAnimationShorthand(d.valueRaw, ctx.keyframesNames, j, expanded, ctx.inlineKeyframeNameMap)) {
+								applyExpandedAnimation(expanded);
+								continue;
+							}
+						}
 						for (const mapped of cssDeclarationToStylexDeclarations(d)) {
 							let value = cssValueToJs(mapped.value, d.important, mapped.prop);
 							if (mapped.prop === "content" && typeof value === "string") {
@@ -17932,12 +18299,26 @@ function createCssHelperConditionalHandler(ctx) {
 								if (m) value = `"${m[1]}"`;
 								else if (!value.startsWith("\"") && !value.endsWith("\"")) value = `"${value}"`;
 							}
-							if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") setValueForProp(mapped.prop, staticValueToLiteral(j, value), media);
+							if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") setValueForProp(mapped.prop, staticValueToLiteral(j, value), media, computedMediaKeyExpr);
 							else return null;
 						}
 						continue;
 					}
 					if (d.value.kind !== "interpolated") return null;
+					if ((d.property === "animation" || d.property === "animation-name") && ctx.keyframesNames && ctx.keyframesNames.size > 0) {
+						const expanded = expandInterpolatedAnimationShorthand({
+							property: d.property,
+							valueRaw: d.valueRaw,
+							slotExprById,
+							keyframesNames: ctx.keyframesNames,
+							j,
+							inlineKeyframeNameMap: ctx.inlineKeyframeNameMap
+						});
+						if (expanded) {
+							applyExpandedAnimation(expanded);
+							continue;
+						}
+					}
 					const slotParts = (d.value.parts ?? []).filter((p) => p.kind === "slot");
 					if (slotParts.length !== 1) return null;
 					const slotExpr = slotExprById.get(slotParts[0].slotId);
@@ -17945,13 +18326,21 @@ function createCssHelperConditionalHandler(ctx) {
 					const rawExpr = replaceParamWithProps(slotExpr);
 					const { prefix, suffix } = extractStaticPartsForDecl(d);
 					const valueExpr = prefix || suffix ? buildTemplateWithStaticParts(j, rawExpr, prefix, suffix) : rawExpr;
-					for (const mapped of cssDeclarationToStylexDeclarations(d)) setValueForProp(mapped.prop, valueExpr, media);
+					for (const mapped of cssDeclarationToStylexDeclarations(d)) setValueForProp(mapped.prop, valueExpr, media, computedMediaKeyExpr);
 				}
 			}
-			for (const [prop, queries] of mediaValues) {
+			const allMediaProps = new Set([...mediaValues.keys(), ...computedMediaValues.keys()]);
+			for (const prop of allMediaProps) {
 				const baseValue = out.get(prop);
 				const properties = [j.property("init", j.identifier("default"), baseValue ?? j.literal(null))];
-				for (const [query, value] of queries) properties.push(j.property("init", j.literal(query), value));
+				const queries = mediaValues.get(prop);
+				if (queries) for (const [query, value] of queries) properties.push(j.property("init", j.literal(query), value));
+				const computed = computedMediaValues.get(prop);
+				if (computed) for (const { keyExpr, value } of computed) {
+					const p = j.property("init", keyExpr, value);
+					p.computed = true;
+					properties.push(p);
+				}
 				out.set(prop, j.objectExpression(properties));
 			}
 			return out;
@@ -19284,7 +19673,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, resolveCallOptional, importMap, cssHelperFunctions, stringMappingFns, hasLocalThemeBinding, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveImportInScope, usedCssHelperFunctions, markBail } = state;
+	const { api, j, root, filePath, warnings, resolverImports, parseExpr, resolveValue, resolveCall, resolveCallOptional, resolveSelector, importMap, cssHelperFunctions, stringMappingFns, hasLocalThemeBinding, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveImportInScope, usedCssHelperFunctions, markBail } = state;
 	const styleObj = {};
 	const perPropPseudo = {};
 	const perPropMedia = {};
@@ -19371,6 +19760,7 @@ function createDeclProcessingState(state, decl) {
 		parseExpr,
 		resolveValue,
 		resolveCall,
+		resolveSelector,
 		resolveImportInScope,
 		resolverImports,
 		isCssHelperTaggedTemplate,
@@ -19432,7 +19822,7 @@ function createDeclProcessingState(state, decl) {
 		const out = {};
 		const mediaStyles = /* @__PURE__ */ new Map();
 		for (const rule of rules) {
-			const media = rule.atRuleStack.find((a) => a.startsWith("@media") || a.startsWith("@container"));
+			const media = findSupportedAtRule(rule.atRuleStack);
 			if (rule.atRuleStack.length > 0 && !media) {
 				warnings.push({
 					severity: "warning",
@@ -19878,18 +20268,26 @@ function tryHandleInterpolatedBorder(ctx, args) {
 			if (quasis.length === 2 && exprs.length === 1) {
 				const prefix = quasis[0]?.value?.cooked ?? quasis[0]?.value?.raw ?? "";
 				const suffix = quasis[1]?.value?.cooked ?? quasis[1]?.value?.raw ?? "";
-				if (suffix.trim() !== "") return null;
-				const parsed = parseInterpolatedBorderStaticParts({
-					prop,
-					prefix,
-					suffix
-				});
-				if (!parsed?.width || !parsed?.style) return null;
-				return {
-					width: parsed.width,
-					style: parsed.style,
-					colorExpr: exprs[0]
-				};
+				if (suffix.trim() === "") {
+					const parsed = parseInterpolatedBorderStaticParts({
+						prop,
+						prefix,
+						suffix
+					});
+					if (parsed?.width && parsed?.style) return {
+						width: parsed.width,
+						style: parsed.style,
+						colorExpr: exprs[0]
+					};
+				}
+				if (prefix.trim() === "" && suffix.trim() !== "") {
+					const parsed = parseBorderShorthandParts(suffix.trim());
+					if (parsed?.style && parsed?.color) return {
+						width: exprs[0],
+						style: parsed.style,
+						colorExpr: parsed.color
+					};
+				}
 			}
 			if (quasis.length === 3 && exprs.length === 2) {
 				const prefix = quasis[0]?.value?.cooked ?? quasis[0]?.value?.raw ?? "";
@@ -19993,7 +20391,7 @@ function tryHandleInterpolatedBorder(ctx, args) {
 				}
 			}
 			if (hasStaticWidthOrStyle) applyResolvedPropValue(targetProp, resolved.exprAst);
-			else applyResolvedPropValue(direction ? `border${direction}` : "border", resolved.exprAst);
+			else bailUnsupportedWithContext("Resolved border helper value could not be expanded to longhand properties", { property: prop }, getNodeLocStart(expr));
 			return true;
 		}
 	}
@@ -21058,6 +21456,20 @@ function handleInterpolatedDeclaration(args) {
 		};
 		if (tryHandleThemeValueInPseudo()) continue;
 		const resolveImportedValueExpr = (expr) => {
+			if (expr?.type === "BinaryExpression") {
+				const leftResult = resolveImportedValueExpr(expr.left);
+				const rightResult = resolveImportedValueExpr(expr.right);
+				if (!leftResult && !rightResult) return null;
+				if (leftResult && "bail" in leftResult) return leftResult;
+				if (rightResult && "bail" in rightResult) return rightResult;
+				const resolvedLeft = leftResult ? leftResult.resolved : expr.left;
+				const resolvedRight = rightResult ? rightResult.resolved : expr.right;
+				const imports = [...leftResult?.imports ?? [], ...rightResult?.imports ?? []];
+				return {
+					resolved: j.binaryExpression(expr.operator, resolvedLeft, resolvedRight),
+					imports
+				};
+			}
 			const info = getRootIdentifierInfo(expr);
 			if (!info) return null;
 			const imp = resolveImportInScope(info.rootName, info.rootNode);
@@ -22830,7 +23242,7 @@ function processDeclRules(ctx) {
 				}
 			}
 		}
-		let media = rule.atRuleStack.find((a) => a.startsWith("@media") || a.startsWith("@container"));
+		let media = findSupportedAtRule(rule.atRuleStack);
 		const intrinsicTagName = decl.base.kind === "intrinsic" ? decl.base.tagName : null;
 		let selector = normalizeSelectorForAttributePseudos(rule.selector, intrinsicTagName);
 		selector = normalizeInterpolatedSelector(selector);
@@ -22843,10 +23255,37 @@ function processDeclRules(ctx) {
 				first.leadingComment = first.leadingComment ? `${note}\n${first.leadingComment}` : note;
 			}
 		}
-		if (!media && (selector.trim().startsWith("@media") || selector.trim().startsWith("@container"))) {
+		if (!media && isSupportedAtRule(selector.trim())) {
 			media = selector.trim();
 			selector = "&";
 		}
+		if (media) {
+			const resolved = resolveMediaAtRulePlaceholders(media, (slotId) => decl.templateExpressions[slotId], {
+				lookupImport: resolveImportInScope,
+				resolveValue: state.resolveValue,
+				resolveSelector,
+				parseExpr,
+				filePath: state.filePath,
+				resolverImports
+			});
+			if (resolved === null) {
+				state.markBail();
+				warnings.push({
+					severity: "warning",
+					type: "Unsupported: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)",
+					loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+				});
+				break;
+			}
+			if (resolved.kind === "static") media = resolved.value;
+			else {
+				resolvedSelectorMedia = {
+					keyExpr: resolved.keyExpr,
+					exprSource: ""
+				};
+				media = void 0;
+			}
+		}
 		const parsedSelector = parseSelector(selector);
 		if (parsedSelector.kind === "unsupported" && selector !== "&" && !rule.selector.includes("__SC_EXPR_")) {
 			const elementAction = tryHandleElementSelector(selector, rule, decl);
@@ -23444,7 +23883,27 @@ function handleSiblingSelector(selector, rule, ctx) {
 		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") || a.startsWith("@container"));
+	let media = findSupportedAtRule(rule.atRuleStack);
+	if (media) {
+		const resolved = resolveMediaAtRulePlaceholders(media, (slotId) => decl.templateExpressions[slotId], {
+			lookupImport: state.resolveImportInScope,
+			resolveValue: state.resolveValue,
+			resolveSelector: state.resolveSelector,
+			parseExpr: state.parseExpr,
+			filePath: state.filePath,
+			resolverImports: state.resolverImports
+		});
+		if (resolved === null) {
+			warnings.push({
+				severity: "warning",
+				type: "Unsupported: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)",
+				loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+			});
+			return "break";
+		}
+		if (resolved.kind === "static") media = resolved.value;
+		else media = void 0;
+	}
 	for (const [prop, value] of Object.entries(bucket)) {
 		const siblingValue = media ? {
 			default: null,
@@ -23646,7 +24105,7 @@ function finalizeDeclProcessing(ctx) {
 			if (!v || typeof v !== "object" || Array.isArray(v) || isAstNode(v)) return false;
 			const keys = Object.keys(v);
 			if (keys.length === 0) return false;
-			return keys.includes("default") || keys.some((k) => k.startsWith(":") || k.startsWith("@media") || k.startsWith("::"));
+			return keys.includes("default") || keys.some(isStyleConditionKey);
 		};
 		if (!(() => {
 			const disabledBucket = variantBuckets.get("disabled");
@@ -24871,6 +25330,8 @@ function rewriteJsxStep(ctx) {
 			const inlineVariantDimensions = decl.inlinedBaseComponent?.hasInlineJsxVariants ? decl.variantDimensions ?? [] : [];
 			const inlineVariantByProp = new Map(inlineVariantDimensions.map((dimension) => [dimension.propName, dimension]));
 			const inlineVariantProps = new Set(inlineVariantDimensions.map((dimension) => dimension.propName));
+			const combinedStylePropNames = new Set((decl.callSiteCombinedStyles ?? []).flatMap((c) => c.propNames));
+			const matchedCombinedStyleKey = matchCallSiteCombinedStyle(decl.callSiteCombinedStyles, opening.attributes ?? []);
 			const attrs = opening.attributes ?? [];
 			for (const attr of attrs) {
 				if (attr.type !== "JSXAttribute") continue;
@@ -24898,6 +25359,7 @@ function rewriteJsxStep(ctx) {
 					const n = attr.name.name;
 					if (decl.shouldForwardProp.dropProps.includes(n)) {
 						if (inlineVariantProps.has(n)) return true;
+						if (decl.variantStyleKeys && n in decl.variantStyleKeys) return true;
 						return false;
 					}
 					if (decl.shouldForwardProp.dropPrefix && n.startsWith(decl.shouldForwardProp.dropPrefix)) return false;
@@ -24981,10 +25443,11 @@ function rewriteJsxStep(ctx) {
 					else extraMixinArgs.push(expr);
 				}
 			}
+			const baseStyleKey = matchedCombinedStyleKey ?? decl.styleKey;
 			const styleArgs = [
 				...decl.extendsStyleKey ? [j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(decl.extendsStyleKey))] : [],
 				...extraMixinArgs,
-				j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(decl.styleKey)),
+				j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(baseStyleKey)),
 				...extraAfterBaseArgs
 			];
 			const variantKeys = decl.variantStyleKeys ?? {};
@@ -25006,6 +25469,7 @@ function rewriteJsxStep(ctx) {
 					if (valueExpr) for (const p of pairs) styleArgs.push(j.callExpression(j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(p.fnKey)), [valueExpr]));
 					return;
 				}
+				if (combinedStylePropNames.has(n) && matchedCombinedStyleKey) return;
 				const inlineVariantDimension = inlineVariantByProp.get(n);
 				if (inlineVariantDimension) {
 					const variantLookup = buildInlineVariantLookupFromAttr(j, inlineVariantDimension.variantObjectName, attr);
@@ -25028,9 +25492,19 @@ function rewriteJsxStep(ctx) {
 					return;
 				}
 				if (attr.value.type === "JSXExpressionContainer") {
+					const staticLiteralValue = readStaticJsxLiteral(attr);
+					if (staticLiteralValue !== void 0 && staticLiteralValue) {
+						styleArgs.push(j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(variantStyleKey)));
+						return;
+					}
 					styleArgs.push(j.logicalExpression("&&", attr.value.expression, j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(variantStyleKey))));
 					return;
 				}
+				if (attr.value.type === "StringLiteral" || attr.value.type === "NumericLiteral" || attr.value.type === "Literal") {
+					const literalVal = readStaticJsxLiteral(attr);
+					if (literalVal !== void 0 && literalVal) styleArgs.push(j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(variantStyleKey)));
+					return;
+				}
 			};
 			for (const attr of leading) processAttr(attr, keptLeadingAfterVariants);
 			for (const attr of rest) processAttr(attr, keptRestAfterVariants);
@@ -25087,6 +25561,22 @@ function extractJsxAttrValueExpr(j, attr) {
 	if (a.value.type === "StringLiteral" || a.value.type === "Literal") return j.literal(a.value.value);
 	if (a.value.type === "JSXExpressionContainer") return a.value.expression;
 }
+/**
+* Finds the combined style key matching the consumed props at a JSX call site.
+* Returns the style key if a matching combination exists, or undefined otherwise.
+*/
+function matchCallSiteCombinedStyle(combinedStyles, attrs) {
+	if (!combinedStyles?.length) return;
+	const attrNames = /* @__PURE__ */ new Set();
+	for (const a of attrs) {
+		const attr = a;
+		if (attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && typeof attr.name.name === "string") attrNames.add(attr.name.name);
+	}
+	const presentPropNames = [...new Set(combinedStyles.flatMap((c) => c.propNames))].filter((p) => attrNames.has(p)).sort();
+	if (presentPropNames.length === 0) return;
+	const key = presentPropNames.join(",");
+	return combinedStyles.find((c) => [...c.propNames].sort().join(",") === key)?.styleKey;
+}
 
 //#endregion
 //#region src/internal/transform-steps/upgrade-polymorphic-as-prop-types.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components-to-stylex-codemod",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Codemod to transform styled-components to StyleX",
   "keywords": [
     "codemod",