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

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-tKRY0yOA.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-tKRY0yOA.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: media query contains unresolvable interpolation" | "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 contains unresolvable interpolation" | "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-tKRY0yOA.mjs";
+import { n as WarningLog, r as Adapter } from "./logger-nDTvuKsY.mjs";
 import "stylis";
 import { API, FileInfo, Options } from "jscodeshift";
 

package/dist/transform.mjs

@@ -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
@@ -10350,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 ?? [],
@@ -10757,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,
@@ -10789,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)))] : []
 			];
@@ -10825,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 ?? [],
@@ -14108,7 +14163,7 @@ function createCssHelperResolver(args) {
 					filePath,
 					resolverImports
 				});
-				if (resolved === null) return bail("Conditional `css` block: media query contains unresolvable interpolation");
+				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;
@@ -14185,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 });
@@ -17320,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;
@@ -18194,11 +18277,21 @@ function createCssHelperConditionalHandler(ctx) {
 					}
 				}
 				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") {
@@ -18212,6 +18305,20 @@ function createCssHelperConditionalHandler(ctx) {
 						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);
@@ -23165,7 +23272,7 @@ function processDeclRules(ctx) {
 				state.markBail();
 				warnings.push({
 					severity: "warning",
-					type: "Unsupported: media query contains unresolvable interpolation",
+					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;
@@ -23789,7 +23896,7 @@ function handleSiblingSelector(selector, rule, ctx) {
 		if (resolved === null) {
 			warnings.push({
 				severity: "warning",
-				type: "Unsupported: media query contains unresolvable interpolation",
+				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";

package/package.json

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