styled-components-to-stylex-codemod 0.0.44 → 0.0.45

package/dist/transform.mjs

@@ -7429,7 +7429,7 @@ function findUniversalSelectorLineOffset(rawCss) {
 * @internal Exported for testing
 */
 function findSelectorLineOffset(rawCss, selector) {
-	const directMatch = rawCss.match(new RegExp(escapeRegExp(selector)));
+	const directMatch = rawCss.match(new RegExp(escapeRegExp$1(selector)));
 	if (directMatch) return countNewlinesBefore(rawCss, directMatch.index);
 	const pseudoMatch = selector.match(/::?[a-z-]+(?:\([^)]*\))?/i);
 	if (pseudoMatch) {
@@ -7449,7 +7449,7 @@ function findSelectorLineOffset(rawCss, selector) {
 	}
 	const stripped = selector.replace(/^&\s+/, "").replace(/^&\s*[>+~]\s*/, "");
 	if (stripped !== selector) {
-		const tagMatch = rawCss.match(new RegExp(`(?:^|[\\s>+~])${escapeRegExp(stripped)}\\s*[{,]`, "m"));
+		const tagMatch = rawCss.match(new RegExp(`(?:^|[\\s>+~])${escapeRegExp$1(stripped)}\\s*[{,]`, "m"));
 		if (tagMatch) return countNewlinesBefore(rawCss, tagMatch.index + 1);
 	}
 	return 0;
@@ -7472,7 +7472,7 @@ function countNewlinesBefore(str, position) {
 	for (let i = 0; i < position && i < str.length; i++) if (str[i] === "\n") count++;
 	return count;
 }
-function escapeRegExp(str) {
+function escapeRegExp$1(str) {
 	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 //#endregion
@@ -11353,7 +11353,7 @@ function collectKeyframesReferencedBySkippedDecls(ctx) {
 function buildDuplicateKeyframesNames(ctx, preservedNames) {
 	const duplicates = /* @__PURE__ */ new Map();
 	if (preservedNames.size === 0) return duplicates;
-	const usedNames = collectBindingNames$1(ctx);
+	const usedNames = collectBindingNames$2(ctx);
 	const transformedReferences = collectKeyframesReferencedByDecls(ctx, (decl) => !decl.skipTransform);
 	for (const name of transformedReferences) {
 		if (!preservedNames.has(name) || duplicates.has(name)) continue;
@@ -11376,23 +11376,23 @@ function collectKeyframesReferencedByDecls(ctx, shouldVisitDecl) {
 	}
 	return referencedNames;
 }
-function collectBindingNames$1(ctx) {
+function collectBindingNames$2(ctx) {
 	const names = new Set(ctx.keyframesNames);
 	ctx.root.find(ctx.j.VariableDeclarator).forEach((path) => {
-		collectPatternBindingNames(path.node.id, names);
+		collectPatternBindingNames$1(path.node.id, names);
 	});
 	ctx.root.find(ctx.j.FunctionDeclaration).forEach((path) => {
-		collectPatternBindingNames(path.node.id, names);
+		collectPatternBindingNames$1(path.node.id, names);
 	});
 	ctx.root.find(ctx.j.ClassDeclaration).forEach((path) => {
-		collectPatternBindingNames(path.node.id, names);
+		collectPatternBindingNames$1(path.node.id, names);
 	});
 	return names;
 }
-function collectPatternBindingNames(node, names) {
+function collectPatternBindingNames$1(node, names) {
 	if (!node || typeof node !== "object") return;
 	if (Array.isArray(node)) {
-		for (const child of node) collectPatternBindingNames(child, names);
+		for (const child of node) collectPatternBindingNames$1(child, names);
 		return;
 	}
 	const typed = node;
@@ -11403,7 +11403,7 @@ function collectPatternBindingNames(node, names) {
 	if (typed.type === "MemberExpression" || typed.type === "OptionalMemberExpression" || typed.type === "TSQualifiedName") return;
 	for (const key of Object.keys(node)) {
 		if (key === "loc" || key === "comments" || key === "leadingComments") continue;
-		collectPatternBindingNames(node[key], names);
+		collectPatternBindingNames$1(node[key], names);
 	}
 }
 function makeUniqueKeyframesDuplicateName(name, usedNames) {
@@ -14294,10 +14294,10 @@ function appendSxArrayArg(j, sxArgs, arg) {
 	sxArgs.push(normalizeOptionalSxArg(j, arg));
 }
 function normalizeOptionalSxArg(j, arg) {
-	if (isUndefinedIdentifier(arg)) return j.nullLiteral();
+	if (isUndefinedIdentifier$1(arg)) return j.nullLiteral();
 	if (isLogicalAndExpression(arg)) return j.conditionalExpression(arg.left, normalizeOptionalSxArg(j, arg.right), j.nullLiteral());
 	if (isConditionalExpression(arg)) {
-		const alternate = isUndefinedIdentifier(arg.alternate) ? j.nullLiteral() : normalizeOptionalSxArg(j, arg.alternate);
+		const alternate = isUndefinedIdentifier$1(arg.alternate) ? j.nullLiteral() : normalizeOptionalSxArg(j, arg.alternate);
 		return j.conditionalExpression(arg.test, normalizeOptionalSxArg(j, arg.consequent), alternate);
 	}
 	return arg;
@@ -14314,7 +14314,7 @@ function isConditionalExpression(arg) {
 function isExpressionField(node, field) {
 	return !!node && typeof node === "object" && isPlainArrayElement(node[field]);
 }
-function isUndefinedIdentifier(node) {
+function isUndefinedIdentifier$1(node) {
 	return getNodeType(node) === "Identifier" && node.name === "undefined";
 }
 function getNodeType(node) {
@@ -15879,7 +15879,7 @@ var WrapperEmitter = class {
 		return used.has("*") || used.has("style");
 	}
 	shouldAllowSxProp(d) {
-		return (d.supportsExternalStyles ?? false) || d.typeScriptSupportsSxProp === true;
+		return (d.supportsExternalStyles ?? false) || d.typeScriptSupportsSxProp === true || this.shouldAllowClassNameProp(d) || this.shouldAllowStyleProp(d);
 	}
 	typedComponentHasProp(componentLocalName, propName) {
 		const metadata = this.typeScriptComponentMetadataFor(componentLocalName);
@@ -15893,7 +15893,7 @@ var WrapperEmitter = class {
 	}
 	/**
 	* Returns true when the wrapped component's prepass metadata proves it does
-	* NOT accept the given style prop (className/style) — i.e. the prop is
+	* NOT accept the given external style prop (className/style/sx) — i.e. the prop is
 	* missing from both explicit and resolved props AND the component has no
 	* index signature. Used to decide whether to lift the prop onto the wrapper.
 	*
@@ -16556,15 +16556,16 @@ var WrapperEmitter = class {
 		return true;
 	}
 	inferredComponentWrapperPropsTypeText(args) {
-		const { d, allowClassNameProp, allowStyleProp, allowSxProp, wrappedComponentIsInternalWrapper, hasExplicitPropsType, forceClassNameOptional, forceStyleOptional, wrappedComponent, forwardedAsPropTypeText = "React.ElementType", attrsProvidedPropOptions } = args;
+		const { d, allowClassNameProp, allowStyleProp, allowSxProp, wrappedComponentIsInternalWrapper, wrappedComponentIsStyledWrapper, hasExplicitPropsType, forceClassNameOptional, forceStyleOptional, wrappedComponent, forwardedAsPropTypeText = "React.ElementType", attrsProvidedPropOptions } = args;
 		const lines = [];
 		const shouldAddStyleProps = d.supportsExternalStyles && !wrappedComponentIsInternalWrapper && !hasExplicitPropsType;
 		const liftableContext = !hasExplicitPropsType && !wrappedComponentIsInternalWrapper && Boolean(wrappedComponent);
 		const liftClassNameForUnsupportedWrapped = liftableContext && allowClassNameProp && this.wrappedRejectsStyleProp(wrappedComponent, "className");
 		const liftStyleForUnsupportedWrapped = liftableContext && allowStyleProp && this.wrappedRejectsStyleProp(wrappedComponent, "style");
+		const shouldAddOwnSxProp = !hasExplicitPropsType && !wrappedComponentIsStyledWrapper && allowSxProp;
 		if (shouldAddStyleProps && allowClassNameProp || forceClassNameOptional || liftClassNameForUnsupportedWrapped) lines.push("className?: string");
 		if (shouldAddStyleProps && allowStyleProp || forceStyleOptional || liftStyleForUnsupportedWrapped) lines.push("style?: React.CSSProperties");
-		if (shouldAddStyleProps && allowSxProp) lines.push(SX_PROP_TYPE_TEXT);
+		if (shouldAddOwnSxProp) lines.push(SX_PROP_TYPE_TEXT);
 		if (this.hasForwardedAsUsage(d.localName)) lines.push(`forwardedAs?: ${forwardedAsPropTypeText}`);
 		const propsTarget = d.attrsInfo?.attrsAsTag ?? d.base.ident;
 		const base = this.componentPropsBaseType(propsTarget);
@@ -16922,7 +16923,7 @@ function rewriteNode(j, node, propNames, propsIdentifier, shadowedNames) {
 			renameIdentifierReferences(n.body, propsIdentifier, replacementName);
 		}
 		const nextShadowedNames = new Set(shadowedNames);
-		for (const param of readArray(n.params)) collectBindingNames(param, nextShadowedNames);
+		for (const param of readArray(n.params)) collectBindingNames$1(param, nextShadowedNames);
 		rewriteNode(j, n.body, propNames, propsIdentifier, nextShadowedNames);
 		return;
 	}
@@ -16951,10 +16952,10 @@ function isFunctionLike(node) {
 }
 function functionBindsName(node, name) {
 	const bindingNames = /* @__PURE__ */ new Set();
-	for (const param of readArray(node.params)) collectBindingNames(param, bindingNames);
+	for (const param of readArray(node.params)) collectBindingNames$1(param, bindingNames);
 	return bindingNames.has(name);
 }
-function collectBindingNames(node, names) {
+function collectBindingNames$1(node, names) {
 	if (!node || typeof node !== "object") return;
 	const n = node;
 	if (n.type === "Identifier" && typeof n.name === "string") {
@@ -16962,21 +16963,21 @@ function collectBindingNames(node, names) {
 		return;
 	}
 	if (n.type === "RestElement") {
-		collectBindingNames(n.argument, names);
+		collectBindingNames$1(n.argument, names);
 		return;
 	}
 	if (n.type === "AssignmentPattern") {
-		collectBindingNames(n.left, names);
+		collectBindingNames$1(n.left, names);
 		return;
 	}
 	if (n.type === "ObjectPattern") {
 		for (const property of readArray(n.properties)) {
 			const typedProperty = property;
-			collectBindingNames(typedProperty.type === "Property" || typedProperty.type === "ObjectProperty" ? typedProperty.value : property, names);
+			collectBindingNames$1(typedProperty.type === "Property" || typedProperty.type === "ObjectProperty" ? typedProperty.value : property, names);
 		}
 		return;
 	}
-	if (n.type === "ArrayPattern") for (const element of readArray(n.elements)) collectBindingNames(element, names);
+	if (n.type === "ArrayPattern") for (const element of readArray(n.elements)) collectBindingNames$1(element, names);
 }
 function renameBindingName(node, fromName, toName) {
 	if (!node || typeof node !== "object") return;
@@ -17027,7 +17028,7 @@ function renameIdentifierReferences(node, fromName, toName) {
 	}
 	if (n.type === "VariableDeclarator") {
 		const bindingNames = /* @__PURE__ */ new Set();
-		collectBindingNames(n.id, bindingNames);
+		collectBindingNames$1(n.id, bindingNames);
 		if (!bindingNames.has(fromName)) renameIdentifierReferences(n.init, fromName, toName);
 		return;
 	}
@@ -17038,23 +17039,23 @@ function renameIdentifierReferences(node, fromName, toName) {
 }
 function uniqueIdentifierName(node, baseName) {
 	const names = /* @__PURE__ */ new Set();
-	collectIdentifierNames(node, names);
+	collectIdentifierNames$1(node, names);
 	if (!names.has(baseName)) return baseName;
 	let index = 1;
 	while (names.has(`${baseName}${index}`)) index++;
 	return `${baseName}${index}`;
 }
-function collectIdentifierNames(node, names) {
+function collectIdentifierNames$1(node, names) {
 	if (!node || typeof node !== "object") return;
 	if (Array.isArray(node)) {
-		for (const item of node) collectIdentifierNames(item, names);
+		for (const item of node) collectIdentifierNames$1(item, names);
 		return;
 	}
 	const n = node;
 	if (n.type === "Identifier" && typeof n.name === "string") names.add(n.name);
 	for (const key of Object.keys(n)) {
 		if (IGNORED_KEYS.has(key)) continue;
-		collectIdentifierNames(n[key], names);
+		collectIdentifierNames$1(n[key], names);
 	}
 }
 function replaceNode(target, replacement) {
@@ -17268,6 +17269,8 @@ function emitComponentWrappers(emitter) {
 		const explicitPropsTypeRef = resolveTypeReferenceName(d.propsType ?? null);
 		const wrapperReusesWrappedPropsType = explicitPropsTypeRef?.kind === "identifier" && explicitPropsTypeRef.name === emitter.resolveWrappedExplicitPropsTypeRef(renderedComponent)?.name;
 		const wrapperPropsExposeSx = wrappedAcceptsSx && !attrsProvidedPropNames.has("sx") && (wrappedLocalDecl && d.propsType && !wrapperReusesWrappedPropsType && !propsTypeOmitsProp(d.propsType, "sx") || propsTypeExposesForwardedSx(d.propsType, wrappedComponent) || !d.propsType || !wrappedLocalDecl);
+		const exposeSxProp = wrapperPropsExposeSx || allowSxProp;
+		const shouldAddOwnSxProp = exposeSxProp && !wrapperPropsExposeSx;
 		const wrappedClassNameRequired = allowClassNameProp && wrappedHasClassName && (baseComponentPropsType ? emitter.isPropRequiredInPropsTypeLiteral(baseComponentPropsType, "className") : emitter.typedComponentProp(wrappedComponent, "className")?.optional === false);
 		const wrappedStyleRequired = allowStyleProp && wrappedHasStyle && (baseComponentPropsType ? emitter.isPropRequiredInPropsTypeLiteral(baseComponentPropsType, "style") : emitter.typedComponentProp(wrappedComponent, "style")?.optional === false);
 		const forceClassNameOptional = !!wrappedClassNameRequired;
@@ -17309,7 +17312,7 @@ function emitComponentWrappers(emitter) {
 				const optionalProps = [];
 				if (forceClassNameOptional) optionalProps.push("className?: string");
 				if (forceStyleOptional) optionalProps.push("style?: React.CSSProperties");
-				if (allowSxProp) optionalProps.push(SX_PROP_TYPE_TEXT);
+				if (shouldAddOwnSxProp) optionalProps.push(SX_PROP_TYPE_TEXT);
 				if (hasForwardedAsUsage) optionalProps.push(`forwardedAs?: ${forwardedAsPropTypeText}`);
 				if (emitter.extendExistingInterface(explicitTypeName, baseWithOmit)) {
 					if (optionalProps.length > 0) emitter.injectMembersIntoInterface(explicitTypeName, optionalProps);
@@ -17326,7 +17329,7 @@ function emitComponentWrappers(emitter) {
 				appendAttrsProvidedPropOmissions(omitted, d.attrsInfo, attrsProvidedPropOptions);
 				const intrinsicBase = defaultTag ? `Omit<React.ComponentPropsWithRef<"${defaultTag}">, keyof ${explicitTypeName}${omitted.length ? ` | ${omitted.join(" | ")}` : ""}>` : null;
 				const optionalProps = [];
-				if (allowSxProp) optionalProps.push(SX_PROP_TYPE_TEXT);
+				if (shouldAddOwnSxProp) optionalProps.push(SX_PROP_TYPE_TEXT);
 				if (hasForwardedAsUsage) optionalProps.push(`forwardedAs?: ${forwardedAsPropTypeText}`);
 				inlineTypeText = emitter.joinIntersection(transformExplicitPropsTypeText({
 					canMutateExplicitType,
@@ -17349,7 +17352,7 @@ function emitComponentWrappers(emitter) {
 				const optionalStyleProps = [];
 				if (forceClassNameOptional) optionalStyleProps.push("className?: string");
 				if (forceStyleOptional) optionalStyleProps.push("style?: React.CSSProperties");
-				if (allowSxProp) optionalStyleProps.push(SX_PROP_TYPE_TEXT);
+				if (shouldAddOwnSxProp) optionalStyleProps.push(SX_PROP_TYPE_TEXT);
 				const typeText = [
 					baseProps,
 					`Omit<React.ComponentPropsWithRef<C>, ${buildOmitUnion([
@@ -17371,14 +17374,16 @@ function emitComponentWrappers(emitter) {
 				].join(" & ");
 				emitNamedPropsType(d.localName, typeText, `C extends React.ElementType = typeof ${wrappedComponent}`);
 			} else {
-				const skipStyleProps = wrapperDecls.some((decl) => decl.localName === wrappedComponent) || wrappedHasClassName && wrappedHasStyle;
+				const wrappedComponentIsStyledWrapper = wrapperDecls.some((decl) => decl.localName === wrappedComponent);
+				const skipStyleProps = wrappedComponentIsStyledWrapper || wrappedHasClassName && wrappedHasStyle;
 				const hasExplicitPropsType = !!explicit;
 				const inferred = emitter.inferredComponentWrapperPropsTypeText({
 					d,
 					allowClassNameProp,
 					allowStyleProp,
-					allowSxProp,
+					allowSxProp: shouldAddOwnSxProp,
 					wrappedComponentIsInternalWrapper: skipStyleProps,
+					wrappedComponentIsStyledWrapper,
 					hasExplicitPropsType,
 					forceClassNameOptional,
 					forceStyleOptional,
@@ -17394,10 +17399,13 @@ function emitComponentWrappers(emitter) {
 				const wrappedRejectsStyle = !!wrappedComponent && emitter.wrappedRejectsStyleProp(wrappedComponent, "style");
 				const shouldLiftClassNameOntoExplicit = !skipStyleProps && allowClassNameProp && wrappedRejectsClassName;
 				const shouldLiftStyleOntoExplicit = !skipStyleProps && allowStyleProp && wrappedRejectsStyle;
-				if (explicitWithExtras && (d.supportsExternalStyles || shouldLiftClassNameOntoExplicit || shouldLiftStyleOntoExplicit)) explicitWithExtras = injectStylePropsIntoTypeLiteralString(explicitWithExtras, {
-					className: !skipStyleProps && allowClassNameProp && (!wrappedHasClassName || wrappedRejectsClassName),
-					style: !skipStyleProps && allowStyleProp && (!wrappedHasStyle || wrappedRejectsStyle),
-					sx: allowSxProp
+				const shouldLiftSxOntoExplicit = !wrappedComponentIsStyledWrapper && shouldAddOwnSxProp;
+				const shouldInjectClassNameOntoExplicit = !skipStyleProps && allowClassNameProp && (d.supportsExternalStyles && !wrappedHasClassName || shouldLiftClassNameOntoExplicit);
+				const shouldInjectStyleOntoExplicit = !skipStyleProps && allowStyleProp && (d.supportsExternalStyles && !wrappedHasStyle || shouldLiftStyleOntoExplicit);
+				if (explicitWithExtras && (shouldInjectClassNameOntoExplicit || shouldInjectStyleOntoExplicit || shouldLiftClassNameOntoExplicit || shouldLiftStyleOntoExplicit || shouldLiftSxOntoExplicit)) explicitWithExtras = injectStylePropsIntoTypeLiteralString(explicitWithExtras, {
+					className: shouldInjectClassNameOntoExplicit,
+					style: shouldInjectStyleOntoExplicit,
+					sx: shouldLiftSxOntoExplicit
 				});
 				const explicitWithRef = (explicitWithExtras ? transformExplicitPropsTypeText({
 					canMutateExplicitType,
@@ -17408,7 +17416,7 @@ function emitComponentWrappers(emitter) {
 				}) : null) ?? (refElementType ? `{ ref?: React.Ref<${refElementType}>; }` : null);
 				const typeText = explicitWithRef ? emitter.joinIntersection(explicitWithRef, inferred) : inferred;
 				const hasNoCustomProps = !explicitWithRef;
-				if (hasNoCustomProps && shouldLowerForwardedAs && renderedAsProp?.baseTypeText && !allowSxProp && !forceClassNameOptional && !forceStyleOptional) emitNamedPropsType(d.localName, emitter.joinIntersection(renderedAsProp.baseTypeText, `{ forwardedAs?: ${renderedAsProp.typeText} }`));
+				if (hasNoCustomProps && shouldLowerForwardedAs && renderedAsProp?.baseTypeText && !exposeSxProp && !forceClassNameOptional && !forceStyleOptional) emitNamedPropsType(d.localName, emitter.joinIntersection(renderedAsProp.baseTypeText, `{ forwardedAs?: ${renderedAsProp.typeText} }`));
 				else if (hasNoCustomProps || explicitAttrsOmitUnion && explicitTypeExists) inlineTypeText = typeText;
 				else if (!emitNamedPropsType(d.localName, typeText)) inlineTypeText = typeText;
 			}
@@ -17519,7 +17527,7 @@ function emitComponentWrappers(emitter) {
 					if (node.type !== "TSTypeReference") return;
 					const typeName = resolveTypeIdentifierName(node);
 					if (!typeName) {
-						for (const param of getTypeReferenceParams(node)) collectFromTypeNode(param);
+						for (const param of getTypeReferenceParams$1(node)) collectFromTypeNode(param);
 						return;
 					}
 					if (visitedTypeNames.has(typeName)) return;
@@ -17637,14 +17645,14 @@ function emitComponentWrappers(emitter) {
 			const componentId = j.identifier("Component");
 			const forwardedAsId = j.identifier("forwardedAs");
 			const wrappedComponentExpr = buildWrappedComponentExpr();
-			if (allowSxProp || wrapperPropsExposeSx) styleArgs.push(sxId);
+			if (exposeSxProp) styleArgs.push(sxId);
 			if (attrsSxExpr) styleArgs.push(attrsSxExpr);
 			for (const attr of defaultAttrs) if (!destructureProps.includes(attr.jsxProp)) destructureProps.push(attr.jsxProp);
 			for (const attr of dynamicAttrs) if (!destructureProps.includes(attr.jsxProp)) destructureProps.push(attr.jsxProp);
 			const canForwardClassNameStyleThroughRest = wrappedAcceptsSx && !(staticClassNameExpr || attrsStaticStyleExpr || d.inlineStyleProps?.length);
 			const destructureClassName = allowClassNameProp && !canForwardClassNameStyleThroughRest;
 			const destructureStyle = allowStyleProp && !canForwardClassNameStyleThroughRest;
-			const destructureSx = allowSxProp || wrapperPropsExposeSx;
+			const destructureSx = exposeSxProp;
 			const destructurePropsForPattern = needsUseTheme ? destructureProps.filter((name) => name !== "theme") : destructureProps;
 			const patternProps = emitter.buildDestructurePatternProps({
 				baseProps: [
@@ -17670,7 +17678,7 @@ function emitComponentWrappers(emitter) {
 				styleId,
 				allowClassNameProp,
 				allowStyleProp,
-				allowSxProp,
+				allowSxProp: exposeSxProp,
 				inlineStyleProps: d.inlineStyleProps ?? [],
 				staticStyleExpr: attrsStaticStyleExpr,
 				staticClassNameExpr,
@@ -17909,16 +17917,16 @@ function buildRenamedTransientPropTypes(sourceTypeText, transientPropRenames) {
 function parenthesizeTypeForIndexedAccess(typeText) {
 	return `(${typeText})`;
 }
-function getTypeReferenceParams(type) {
+function getTypeReferenceParams$1(type) {
 	const typed = type;
 	return typed.typeParameters?.params ?? typed.typeArguments?.params ?? [];
 }
 function getUtilitySourceTypeParams(type) {
-	if (!isUtilityTypeReference(resolveTypeReferenceName(type))) return null;
-	const sourceType = getTypeReferenceParams(type)[0];
+	if (!isUtilityTypeReference$1(resolveTypeReferenceName(type))) return null;
+	const sourceType = getTypeReferenceParams$1(type)[0];
 	return sourceType ? [sourceType] : [];
 }
-function isUtilityTypeReference(typeName) {
+function isUtilityTypeReference$1(typeName) {
 	if (!typeName) return false;
 	if (typeName.kind === "qualified") return typeName.namespace === "React" && typeName.name === "PropsWithChildren";
 	return [
@@ -18066,7 +18074,7 @@ function removeAttrsMembersInExistingType(emitter, typeName, attrsProvidedPropNa
 			for (const part of typed.types) visitType(part);
 			return;
 		}
-		if (typed.type === "TSTypeReference") for (const param of getTypeReferenceParams(node)) visitType(param);
+		if (typed.type === "TSTypeReference") for (const param of getTypeReferenceParams$1(node)) visitType(param);
 	};
 	root.find(j.TSTypeAliasDeclaration, { id: {
 		type: "Identifier",
@@ -18118,30 +18126,33 @@ function resolveTypeIdentifierName(type) {
 function resolveTypeReferenceName(type) {
 	if (type?.type !== "TSTypeReference") return null;
 	const typeName = type.typeName;
-	return getTypeReferenceName(typeName);
+	return getTypeReferenceName$1(typeName);
 }
 function typeReferenceIsComponentPropsOfWrapped(type, wrappedComponent) {
 	if (type.type !== "TSTypeReference") return false;
 	const node = type;
-	const typeName = getTypeReferenceName(node.typeName);
+	const typeName = getTypeReferenceName$1(node.typeName);
 	if (!typeName) return false;
-	if (!(typeName.kind === "identifier" && typeName.name.startsWith("ComponentProps") || typeName.kind === "qualified" && typeName.namespace === "React" && typeName.name.startsWith("ComponentProps"))) return false;
+	if (!(typeName.kind === "identifier" && isReactComponentPropsUtilityName$1(typeName.name) || typeName.kind === "qualified" && typeName.namespace === "React" && isReactComponentPropsUtilityName$1(typeName.name))) return false;
 	return (node.typeParameters?.params ?? []).some((param) => {
 		const query = param;
-		return query.type === "TSTypeQuery" && getTypeQueryExpressionName(query.exprName) === wrappedComponent;
+		return query.type === "TSTypeQuery" && getTypeQueryExpressionName$1(query.exprName) === wrappedComponent;
 	});
 }
+function isReactComponentPropsUtilityName$1(name) {
+	return name === "ComponentProps" || name === "ComponentPropsWithRef" || name === "ComponentPropsWithoutRef";
+}
 function isIntrinsicPassthroughType(emitter, type) {
 	const text = emitter.stringifyTsType(type);
 	return text !== null && /^React\.ComponentProps(?:WithRef)?<"[^"]+">$/.test(text);
 }
-function getTypeQueryExpressionName(exprName) {
+function getTypeQueryExpressionName$1(exprName) {
 	const node = exprName;
 	if (!node) return null;
 	if (node.type === "Identifier" && node.name) return node.name;
 	if (node.type !== "TSQualifiedName") return null;
-	const left = getTypeQueryExpressionName(node.left);
-	const right = getTypeQueryExpressionName(node.right);
+	const left = getTypeQueryExpressionName$1(node.left);
+	const right = getTypeQueryExpressionName$1(node.right);
 	return left && right ? `${left}.${right}` : null;
 }
 function propsTypeOmitsProp(propsType, propName) {
@@ -18150,7 +18161,7 @@ function propsTypeOmitsProp(propsType, propName) {
 	visitAst(propsType, (node) => {
 		if (found || node.type !== "TSTypeReference") return;
 		const typeReference = node;
-		const typeName = getTypeReferenceName(typeReference.typeName);
+		const typeName = getTypeReferenceName$1(typeReference.typeName);
 		if (typeName?.kind !== "identifier" || typeName.name !== "Omit") return;
 		if ((typeReference.typeParameters?.params ?? []).some((param) => typeNodeContainsStringLiteral(param, propName))) found = true;
 	});
@@ -18174,7 +18185,7 @@ function visitAst(node, visitor) {
 		else if (child && typeof child === "object") visitAst(child, visitor);
 	}
 }
-function getTypeReferenceName(typeName) {
+function getTypeReferenceName$1(typeName) {
 	if (typeName?.type === "Identifier" && typeName.name) return {
 		kind: "identifier",
 		name: typeName.name
@@ -18210,7 +18221,7 @@ function membersExposeProp(members, propName) {
 function getHeritageTypeReferenceName(heritage) {
 	if (!heritage || typeof heritage !== "object") return null;
 	const node = heritage;
-	return getTypeReferenceName(node.expression) ?? getTypeReferenceName(node.typeName);
+	return getTypeReferenceName$1(node.expression) ?? getTypeReferenceName$1(node.typeName);
 }
 function importedPropsTypeExposesForwardedSx(args) {
 	const { emitter, typeName, wrappedComponent, seenTypeNames } = args;
@@ -28068,6 +28079,7 @@ function finalizeDeclProcessing(ctx) {
 	convertStyleFnsToPropsPattern(state.j, styleFnDecls, styleFnFromProps, decl.styleKey);
 	alignComputedCallArgStyleFnParams(styleFnDecls, styleFnFromProps);
 	unionStyleFnParamsFromStyleFnFromProps(state.j, decl, styleFnDecls, styleFnFromProps);
+	narrowGuardedStyleFnParamTypes(state.j, decl, styleFnDecls, styleFnFromProps);
 	insertStyleFnDeclsAfterComponent(resolvedStyleObjects, styleFnDecls, {
 		styleKey: decl.styleKey,
 		extraStyleObjects,
@@ -28127,6 +28139,154 @@ function unionStyleFnParamsFromStyleFnFromProps(j, decl, styleFnDecls, styleFnFr
 		}
 	}
 }
+function narrowGuardedStyleFnParamTypes(j, decl, styleFnDecls, styleFnFromProps) {
+	const entriesByFnKey = /* @__PURE__ */ new Map();
+	for (const entry of styleFnFromProps) {
+		const entries = entriesByFnKey.get(entry.fnKey) ?? [];
+		entries.push(entry);
+		entriesByFnKey.set(entry.fnKey, entries);
+	}
+	for (const fnKey of styleFnDecls.keys()) {
+		const fnAst = styleFnDecls.get(fnKey);
+		if (!isArrowFunctionWithParams(fnAst)) continue;
+		const firstParam = fnAst.params[0];
+		if (!firstParam) continue;
+		const entries = entriesByFnKey.get(fnKey);
+		const paramName = readParamName(firstParam);
+		const variantWhens = Object.entries(decl.variantStyleKeys ?? {}).filter(([, key]) => key === fnKey).map(([when]) => when);
+		const extraStylexCalls = collectExtraStylexPropsArgCalls(decl, fnKey);
+		const variantCallIsGuarded = paramName !== null && variantWhens.length > 0 && variantWhens.every((when) => conditionWhenGuardsProp(when, paramName));
+		const extraStylexCallIsGuarded = extraStylexCalls.length > 0 && extraStylexCalls.every((call) => extraStylexCallGuardsPrimaryArg(call));
+		if (!(entries ? entries.every(styleFnEntryGuardsPrimaryArg) : variantCallIsGuarded || extraStylexCallIsGuarded)) continue;
+		removeUndefinedFromParamType(j, firstParam);
+	}
+}
+function styleFnEntryGuardsPrimaryArg(entry) {
+	if (entry.jsxProp === "__props" || entry.jsxProp === "__helper") return false;
+	if (!styleFnEntryPrimaryArgIsProp(entry)) return false;
+	if (entry.condition === "truthy") return true;
+	if (entry.condition === "always") return false;
+	return entry.conditionWhen ? conditionWhenGuardsProp(entry.conditionWhen, entry.jsxProp) : false;
+}
+function styleFnEntryPrimaryArgIsProp(entry) {
+	if (!entry.callArg) return true;
+	const argName = readIdentifierLikeName(entry.callArg);
+	return argName !== null && normalizePropName(argName) === normalizePropName(entry.jsxProp);
+}
+function conditionWhenGuardsProp(when, propName) {
+	const prop = escapeRegExp(normalizePropName(propName));
+	const trimmed = when.trim();
+	return new RegExp(`^${prop}$`).test(trimmed) || new RegExp(`^${prop}\\s*\\|\\|\\s*false$`).test(trimmed) || new RegExp(`^${prop}\\s*!=\\s*null$`).test(trimmed) || new RegExp(`^${prop}\\s*!==?\\s*undefined$`).test(trimmed);
+}
+function collectExtraStylexPropsArgCalls(decl, fnKey) {
+	const calls = [];
+	for (const entry of decl.extraStylexPropsArgs ?? []) {
+		const call = readExtraStylexPropsArgCall(entry.expr);
+		if (call?.fnKey === fnKey) calls.push({
+			when: entry.when,
+			condition: call.condition,
+			argName: call.argName
+		});
+	}
+	return calls;
+}
+function extraStylexCallGuardsPrimaryArg(call) {
+	if (call.argName === null) return false;
+	if (call.when !== void 0) return conditionWhenGuardsProp(call.when, call.argName);
+	return call.condition !== null && conditionExprGuardsProp(call.condition, call.argName);
+}
+function readExtraStylexPropsArgCall(expr) {
+	const direct = readStyleFnCall(expr);
+	if (direct) return {
+		...direct,
+		condition: null
+	};
+	if (!expr || typeof expr !== "object" || expr.type !== "ConditionalExpression") return null;
+	const conditional = expr;
+	if (!conditional.test || !conditional.consequent) return null;
+	const consequentCall = readStyleFnCall(conditional.consequent);
+	return consequentCall ? {
+		...consequentCall,
+		condition: conditional.test
+	} : null;
+}
+function readStyleFnCall(expr) {
+	if (!expr || typeof expr !== "object" || expr.type !== "CallExpression") return null;
+	const call = expr;
+	const callee = call.callee;
+	if (!callee || typeof callee !== "object") return null;
+	const member = callee;
+	if (member.type !== "MemberExpression" || member.computed) return null;
+	const property = member.property;
+	const fnKey = property && typeof property === "object" && property.type === "Identifier" ? property.name ?? null : null;
+	if (!fnKey) return null;
+	return {
+		fnKey,
+		argName: call.arguments?.[0] ? readIdentifierLikeName(call.arguments[0]) : null
+	};
+}
+function conditionExprGuardsProp(condition, propName) {
+	if (!condition || typeof condition !== "object") return false;
+	const normalizedProp = normalizePropName(propName);
+	const conditionName = readIdentifierLikeName(condition);
+	if (conditionName !== null) return normalizePropName(conditionName) === normalizedProp;
+	const typed = condition;
+	if (typed.type === "LogicalExpression" && typed.operator === "||") return typed.left !== void 0 && typed.right !== void 0 && conditionExprGuardsProp(typed.left, propName) && isFalseLiteral(typed.right);
+	if (typed.type === "BinaryExpression" && typed.left && typed.right) {
+		const leftName = readIdentifierLikeName(typed.left);
+		if (!(leftName !== null && normalizePropName(leftName) === normalizedProp)) return false;
+		return typed.operator === "!=" && isNullLiteral(typed.right) || (typed.operator === "!==" || typed.operator === "!=") && isUndefinedIdentifier(typed.right);
+	}
+	return false;
+}
+function isFalseLiteral(node) {
+	return !!node && typeof node === "object" && (node.type === "BooleanLiteral" && node.value === false || node.type === "Literal" && node.value === false);
+}
+function isNullLiteral(node) {
+	return !!node && typeof node === "object" && (node.type === "NullLiteral" || node.type === "Literal" && node.value === null);
+}
+function isUndefinedIdentifier(node) {
+	return !!node && typeof node === "object" && node.type === "Identifier" && node.name === "undefined";
+}
+function readIdentifierLikeName(node) {
+	let current = node;
+	while (current && typeof current === "object") {
+		const typed = current;
+		if (typed.type === "Identifier") return typed.name ?? null;
+		if (typed.type === "ParenthesizedExpression" || typed.type === "TSAsExpression" || typed.type === "TSNonNullExpression") {
+			current = typed.expression;
+			continue;
+		}
+		if (typed.type === "TemplateLiteral" && typed.expressions?.length === 1) {
+			current = typed.expressions[0];
+			continue;
+		}
+		break;
+	}
+	return null;
+}
+function normalizePropName(name) {
+	return name.startsWith("$") ? name.slice(1) : name;
+}
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function isArrowFunctionWithParams(node) {
+	return !!node && typeof node === "object" && node.type === "ArrowFunctionExpression" && Array.isArray(node.params);
+}
+function readParamName(param) {
+	return param && typeof param === "object" && param.type === "Identifier" ? param.name ?? null : null;
+}
+function removeUndefinedFromParamType(j, param) {
+	const typedParam = param;
+	const typeAnnotation = typedParam.typeAnnotation?.typeAnnotation;
+	if (!typeAnnotation || typeof typeAnnotation !== "object") return;
+	const typeNode = typeAnnotation;
+	if (typeNode.type !== "TSUnionType" || !typeNode.types) return;
+	const narrowedTypes = typeNode.types.filter((member) => !(member && typeof member === "object" && member.type === "TSUndefinedKeyword"));
+	if (narrowedTypes.length === typeNode.types.length || narrowedTypes.length === 0) return;
+	typedParam.typeAnnotation = narrowedTypes.length === 1 ? j.tsTypeAnnotation(narrowedTypes[0]) : j.tsTypeAnnotation(j.tsUnionType(narrowedTypes));
+}
 function buildStyleFnParam(j, decl, propName) {
 	const param = j.identifier(propName);
 	const typeNode = typeNodeFromPropTypeText(j, decl.typeScriptPropTypes?.get(propName));
@@ -37190,6 +37350,609 @@ function isNonJsxTypeScriptModule(path) {
 	return false;
 }
 //#endregion
+//#region src/internal/transform-steps/propagate-sx-from-classname.ts
+/**
+* Adds an `sx` prop to typed wrapper components that pass their `className`
+* prop through to converted styled-component wrappers.
+*/
+function propagateSxFromClassNameStep(ctx) {
+	const convertedWrappers = collectConvertedWrappers(ctx);
+	if (convertedWrappers.names.size === 0) return CONTINUE;
+	const stylexStyleImports = collectStylexStyleImports(ctx);
+	const components = collectComponentCandidates(ctx);
+	for (const component of components) {
+		if (convertedWrappers.names.has(component.name)) continue;
+		const propsBinding = getPropsBinding(component.fn);
+		if (!propsBinding) continue;
+		const propsType = getPropsType(ctx, propsBinding.typeName, component.fnPath, convertedWrappers.names, stylexStyleImports);
+		if (!propsType) continue;
+		const classNameMember = propsType.kind === "mutable" ? getPropsTypeMember(propsType.members, "className") : null;
+		const sxMember = propsType.kind === "mutable" ? getPropsTypeMember(propsType.members, "sx") : null;
+		const propsTypeAlreadyHasSx = propsType.kind === "mutable" ? Boolean(sxMember) : propsType.hasSx;
+		const propsTypeHasCompatibleSx = propsType.kind === "mutable" ? !sxMember || isStylexSxMember(sxMember, stylexStyleImports) : propsType.hasSx;
+		if (!(propsType.kind === "mutable" ? Boolean(classNameMember) : propsType.hasClassName) || !propsTypeHasCompatibleSx) continue;
+		const sxExpression = buildSxExpression(ctx.j, propsBinding);
+		if (!addSxToForwardedChildren({
+			ctx,
+			fn: component.fn,
+			fnPath: component.fnPath,
+			convertedWrapperBindings: convertedWrappers.bindings,
+			propsBinding,
+			sxExpression
+		})) continue;
+		if (propsType.kind === "mutable" && classNameMember && !propsTypeAlreadyHasSx) addSxMemberAfterClassName({
+			j: ctx.j,
+			propsType,
+			classNameMember
+		});
+		addSxDestructure(ctx, propsBinding);
+		ctx.markChanged();
+	}
+	return CONTINUE;
+}
+function collectConvertedWrappers(ctx) {
+	const names = /* @__PURE__ */ new Set();
+	const styledDecls = ctx.styledDecls;
+	for (const decl of styledDecls ?? []) if (decl.needsWrapperComponent && !decl.isCssHelper && !decl.skipTransform) names.add(decl.localName);
+	return {
+		names,
+		bindings: collectTopLevelBindingPaths(ctx, names)
+	};
+}
+function collectStylexStyleImports(ctx) {
+	const namespaceNames = /* @__PURE__ */ new Set();
+	const styleTypeNames = /* @__PURE__ */ new Set();
+	ctx.root.find(ctx.j.ImportDeclaration, { source: { value: "@stylexjs/stylex" } }).forEach((path) => {
+		for (const specifier of path.node.specifiers ?? []) if (specifier.type === "ImportNamespaceSpecifier" && specifier.local?.name) namespaceNames.add(specifier.local.name);
+		else if (specifier.type === "ImportSpecifier" && specifier.imported?.type === "Identifier" && specifier.imported.name === "StyleXStyles" && specifier.local?.name) styleTypeNames.add(specifier.local.name);
+	});
+	return {
+		namespaceNames,
+		styleTypeNames
+	};
+}
+function collectTopLevelBindingPaths(ctx, names) {
+	const bindings = /* @__PURE__ */ new Map();
+	const { root, j } = ctx;
+	root.find(j.FunctionDeclaration).forEach((path) => {
+		const name = path.node.id?.name;
+		if (!name || !names.has(name) || !isTopLevelValueBindingPath(path)) return;
+		bindings.set(name, path);
+	});
+	root.find(j.VariableDeclarator).forEach((path) => {
+		const name = path.node.id?.type === "Identifier" ? path.node.id.name : void 0;
+		if (!name || !names.has(name) || !isTopLevelValueBindingPath(path)) return;
+		bindings.set(name, path);
+	});
+	return bindings;
+}
+function collectComponentCandidates(ctx) {
+	const candidates = [];
+	const { root, j } = ctx;
+	root.find(j.FunctionDeclaration).forEach((path) => {
+		const name = path.node.id?.name;
+		if (name) candidates.push({
+			name,
+			fn: path.node,
+			fnPath: path
+		});
+	});
+	root.find(j.VariableDeclarator).forEach((path) => {
+		const name = path.node.id?.type === "Identifier" ? path.node.id.name : void 0;
+		const init = path.node.init;
+		if (name && init && (init.type === "ArrowFunctionExpression" || init.type === "FunctionExpression")) candidates.push({
+			name,
+			fn: init,
+			fnPath: path.get("init")
+		});
+	});
+	return candidates;
+}
+function getPropsBinding(fn) {
+	const firstParam = fn.params?.[0];
+	if (!firstParam) return null;
+	const typeName = getTypeReferenceName(firstParam.typeAnnotation?.typeAnnotation);
+	if (!typeName) return null;
+	if (firstParam.type === "ObjectPattern") {
+		const classNameLocal = getObjectPatternValueName((firstParam.properties ?? []).find((prop) => getObjectPatternKeyName(prop) === "className"));
+		if (!classNameLocal) return null;
+		const hasSx = hasObjectPatternProp(firstParam, "sx");
+		return {
+			kind: "destructured",
+			pattern: firstParam,
+			typeName,
+			classNameLocal,
+			sxLocal: hasSx ? getExistingSxLocal(firstParam) : getAvailableSxLocalName(fn),
+			restLocal: hasSx ? null : getObjectPatternRestLocal(firstParam)
+		};
+	}
+	if (firstParam.type === "Identifier") return {
+		kind: "propsObject",
+		propsLocal: firstParam.name,
+		typeName
+	};
+	return null;
+}
+function getTypeReferenceName(typeAnnotation) {
+	if (typeAnnotation?.type === "TSTypeReference" && typeAnnotation.typeName?.type === "Identifier") return typeAnnotation.typeName.name;
+	return null;
+}
+function getPropsType(ctx, typeName, referencePath, convertedWrapperNames, stylexStyleImports) {
+	if (isTypeParameterInScope(referencePath, typeName)) return null;
+	const { root, j } = ctx;
+	let bestPath;
+	let bestDepth = -1;
+	const considerTypePath = (path) => {
+		const containerPath = getLexicalContainerPath(path);
+		if (!containerPath || !pathContains(containerPath, referencePath)) return;
+		const depth = pathDepth(containerPath);
+		if (depth > bestDepth) {
+			bestPath = path;
+			bestDepth = depth;
+		}
+	};
+	root.find(j.TSInterfaceDeclaration, { id: {
+		type: "Identifier",
+		name: typeName
+	} }).forEach((path) => {
+		considerTypePath(path);
+	});
+	root.find(j.TSTypeAliasDeclaration, { id: {
+		type: "Identifier",
+		name: typeName
+	} }).forEach((path) => {
+		considerTypePath(path);
+	});
+	const matched = bestPath?.node;
+	if (!matched) return null;
+	if (matched.type === "TSInterfaceDeclaration") return {
+		kind: "mutable",
+		members: matched.body?.body ?? [],
+		replaceMembers(members) {
+			matched.body.body = members;
+		}
+	};
+	if (matched.type !== "TSTypeAliasDeclaration") return null;
+	if (matched.typeAnnotation?.type !== "TSTypeLiteral") return getReadonlyAliasPropsType(matched.typeAnnotation, convertedWrapperNames, stylexStyleImports);
+	return {
+		kind: "mutable",
+		members: matched.typeAnnotation.members ?? [],
+		replaceMembers(members) {
+			matched.typeAnnotation.members = members;
+		}
+	};
+}
+function getReadonlyAliasPropsType(typeAnnotation, convertedWrapperNames, stylexStyleImports) {
+	const surface = getPropsSurface(typeAnnotation, convertedWrapperNames, stylexStyleImports);
+	if (!surface?.hasClassName || surface.sx !== "stylex") return null;
+	return {
+		kind: "readonly",
+		hasClassName: true,
+		hasSx: true
+	};
+}
+function getPropsSurface(typeAnnotation, convertedWrapperNames, stylexStyleImports) {
+	if (!typeAnnotation) return null;
+	if (isComponentPropsOfConvertedWrapper(typeAnnotation, convertedWrapperNames)) return {
+		hasClassName: true,
+		sx: "stylex"
+	};
+	if (typeAnnotation.type === "TSIntersectionType") {
+		let hasSurface = false;
+		let hasClassName = false;
+		let sx = "missing";
+		for (const part of typeAnnotation.types ?? []) {
+			const partSurface = getPropsSurface(part, convertedWrapperNames, stylexStyleImports);
+			if (!partSurface) continue;
+			hasSurface = true;
+			hasClassName ||= partSurface.hasClassName;
+			sx = mergeSxSurfaces(sx, partSurface.sx);
+		}
+		return hasSurface ? {
+			hasClassName,
+			sx
+		} : null;
+	}
+	if (typeAnnotation.type === "TSParenthesizedType") return getPropsSurface(typeAnnotation.typeAnnotation, convertedWrapperNames, stylexStyleImports);
+	if (typeAnnotation.type === "TSTypeLiteral") {
+		const members = typeAnnotation.members ?? [];
+		const sxMember = getPropsTypeMember(members, "sx");
+		return {
+			hasClassName: propsTypeHasProp(members, "className"),
+			sx: sxMember ? getSxMemberSurface(sxMember, stylexStyleImports) : "missing"
+		};
+	}
+	if (isOmitTypeReference(typeAnnotation)) {
+		const params = getTypeReferenceParams(typeAnnotation);
+		const sourceSurface = getPropsSurface(params[0], convertedWrapperNames, stylexStyleImports);
+		const omittedProps = getStringLiteralTypeNames(params[1]);
+		if (!sourceSurface || !omittedProps) return null;
+		return {
+			hasClassName: sourceSurface.hasClassName && !omittedProps.has("className"),
+			sx: omittedProps.has("sx") ? "missing" : sourceSurface.sx
+		};
+	}
+	if (isPickTypeReference(typeAnnotation)) {
+		const params = getTypeReferenceParams(typeAnnotation);
+		const sourceSurface = getPropsSurface(params[0], convertedWrapperNames, stylexStyleImports);
+		const pickedProps = getStringLiteralTypeNames(params[1]);
+		if (!sourceSurface || !pickedProps) return null;
+		return {
+			hasClassName: sourceSurface.hasClassName && pickedProps.has("className"),
+			sx: pickedProps.has("sx") ? sourceSurface.sx : "missing"
+		};
+	}
+	return null;
+}
+function mergeSxSurfaces(left, right) {
+	if (left === "nonStylex" || right === "nonStylex") return "nonStylex";
+	if (left === "stylex" || right === "stylex") return "stylex";
+	return "missing";
+}
+function isComponentPropsOfConvertedWrapper(typeAnnotation, convertedWrapperNames) {
+	if (typeAnnotation?.type !== "TSTypeReference" || !isComponentPropsTypeName(typeAnnotation)) return false;
+	return getTypeReferenceParams(typeAnnotation).some((param) => {
+		if (param?.type !== "TSTypeQuery") return false;
+		const componentName = getTypeQueryExpressionName(param.exprName);
+		return componentName ? convertedWrapperNames.has(componentName) : false;
+	});
+}
+function isComponentPropsTypeName(typeReference) {
+	const typeName = typeReference.typeName;
+	if (typeName?.type === "Identifier") return isReactComponentPropsUtilityName(typeName.name);
+	return typeName?.type === "TSQualifiedName" && typeName.left?.type === "Identifier" && typeName.left.name === "React" && typeName.right?.type === "Identifier" && isReactComponentPropsUtilityName(typeName.right.name);
+}
+function isReactComponentPropsUtilityName(name) {
+	return name === "ComponentProps" || name === "ComponentPropsWithRef" || name === "ComponentPropsWithoutRef";
+}
+function isOmitTypeReference(typeAnnotation) {
+	return isUtilityTypeReference(typeAnnotation, "Omit");
+}
+function isPickTypeReference(typeAnnotation) {
+	return isUtilityTypeReference(typeAnnotation, "Pick");
+}
+function isUtilityTypeReference(typeAnnotation, name) {
+	return typeAnnotation?.type === "TSTypeReference" && typeAnnotation.typeName?.type === "Identifier" && typeAnnotation.typeName.name === name;
+}
+function getTypeReferenceParams(typeReference) {
+	return typeReference.typeParameters?.params ?? typeReference.typeArguments?.params ?? [];
+}
+function getTypeQueryExpressionName(exprName) {
+	if (exprName?.type === "Identifier") return exprName.name;
+	return null;
+}
+function getStringLiteralTypeNames(typeAnnotation) {
+	if (!typeAnnotation) return null;
+	if (typeAnnotation.type === "TSLiteralType") {
+		const value = typeAnnotation.literal?.value;
+		return typeof value === "string" ? new Set([value]) : null;
+	}
+	if (typeAnnotation.type === "TSUnionType") {
+		const names = /* @__PURE__ */ new Set();
+		for (const part of typeAnnotation.types ?? []) {
+			const partNames = getStringLiteralTypeNames(part);
+			if (!partNames) return null;
+			for (const name of partNames) names.add(name);
+		}
+		return names;
+	}
+	return null;
+}
+function getLexicalContainerPath(path) {
+	let current = path.parentPath;
+	while (current) {
+		if (current.node?.type === "Program" || current.node?.type === "BlockStatement" || current.node?.type === "TSModuleBlock") return current;
+		current = current.parentPath;
+	}
+	return null;
+}
+function isTypeParameterInScope(referencePath, typeName) {
+	let current = referencePath;
+	while (current) {
+		if (hasTypeParameterNamed(current.node, typeName)) return true;
+		current = current.parentPath;
+	}
+	return false;
+}
+function hasTypeParameterNamed(node, typeName) {
+	if (!node || typeof node !== "object") return false;
+	return (node.typeParameters?.params ?? []).some((param) => getTypeParameterName(param) === typeName);
+}
+function getTypeParameterName(param) {
+	if (!param || typeof param !== "object") return null;
+	const node = param;
+	if (typeof node.name === "string") return node.name;
+	return typeof node.id?.name === "string" ? node.id.name : null;
+}
+function pathContains(containerPath, descendantPath) {
+	let current = descendantPath;
+	while (current) {
+		if (current.node === containerPath.node) return true;
+		current = current.parentPath;
+	}
+	return false;
+}
+function pathDepth(path) {
+	let depth = 0;
+	let current = path.parentPath;
+	while (current) {
+		depth++;
+		current = current.parentPath;
+	}
+	return depth;
+}
+function propsTypeHasProp(members, propName) {
+	return members.some((member) => getMemberName(member) === propName);
+}
+function getPropsTypeMember(members, propName) {
+	return members.find((member) => getMemberName(member) === propName) ?? null;
+}
+function getMemberName(member) {
+	const key = member?.key;
+	if (!key) return null;
+	if (key.type === "Identifier") return key.name;
+	if (key.type === "StringLiteral" || key.type === "Literal") return typeof key.value === "string" ? key.value : null;
+	return null;
+}
+function getSxMemberSurface(member, stylexStyleImports) {
+	return isStylexSxMember(member, stylexStyleImports) ? "stylex" : "nonStylex";
+}
+function isStylexSxMember(member, stylexStyleImports) {
+	return isStylexStylesType(member?.typeAnnotation?.typeAnnotation, stylexStyleImports);
+}
+function isStylexStylesType(typeAnnotation, stylexStyleImports) {
+	if (!typeAnnotation) return false;
+	if (typeAnnotation.type === "TSParenthesizedType") return isStylexStylesType(typeAnnotation.typeAnnotation, stylexStyleImports);
+	if (typeAnnotation.type !== "TSTypeReference") return false;
+	const typeName = typeAnnotation.typeName;
+	if (typeName?.type === "Identifier") return stylexStyleImports.styleTypeNames.has(typeName.name);
+	return typeName?.type === "TSQualifiedName" && typeName.left?.type === "Identifier" && stylexStyleImports.namespaceNames.has(typeName.left.name) && typeName.right?.type === "Identifier" && typeName.right.name === "StyleXStyles";
+}
+function addSxMemberAfterClassName(args) {
+	const { j, propsType, classNameMember } = args;
+	const sxMember = createSxMember(j, classNameMember.comments);
+	const nextMembers = [];
+	for (const member of propsType.members) {
+		nextMembers.push(member);
+		if (member === classNameMember) nextMembers.push(sxMember);
+	}
+	propsType.replaceMembers(nextMembers);
+}
+function createSxMember(j, sourceComments) {
+	const parsed = j("type _Props = { sx?: stylex.StyleXStyles }").find(j.TSPropertySignature).nodes()[0];
+	parsed.comments = cloneSxComments(sourceComments);
+	return parsed;
+}
+function cloneSxComments(sourceComments) {
+	if (!sourceComments || sourceComments.length === 0) return;
+	return sourceComments.map((comment) => ({
+		...comment,
+		value: rewriteClassNameComment(comment.value)
+	}));
+}
+function rewriteClassNameComment(value) {
+	if (typeof value !== "string") return value;
+	return value.replace(/\bAdditional\s+className\s+for\b/gi, "StyleX styles applied to").replace(/\bAdditional\s+class\s+name\s+for\b/gi, "StyleX styles applied to").replace(/\bclassName\b/gi, "StyleX styles").replace(/\bclass name\b/gi, "StyleX styles");
+}
+function buildSxExpression(j, propsBinding) {
+	if (propsBinding.kind === "destructured") {
+		if (propsBinding.restLocal) return j.memberExpression(j.identifier(propsBinding.restLocal), j.identifier("sx"));
+		return j.identifier(propsBinding.sxLocal);
+	}
+	return j.memberExpression(j.identifier(propsBinding.propsLocal), j.identifier("sx"));
+}
+function addSxToForwardedChildren(args) {
+	const { ctx, fn, fnPath, convertedWrapperBindings, propsBinding, sxExpression } = args;
+	if (!fn.body) return false;
+	const propsBindingScope = findPropsBindingScope(fnPath, propsBinding);
+	if (!propsBindingScope) return false;
+	let changed = false;
+	ctx.j(fnPath).find(ctx.j.JSXOpeningElement).forEach((path) => {
+		const opening = path.node;
+		const childName = opening.name?.type === "JSXIdentifier" ? opening.name.name : void 0;
+		const convertedBindingScope = childName ? convertedWrapperBindings.get(childName) : void 0;
+		if (!childName || !convertedBindingScope || !isConvertedChildBinding(ctx, path, childName, convertedBindingScope) || hasJsxAttr(opening, "sx")) return;
+		const classNameAttr = getJsxAttr(opening, "className");
+		if (!classNameAttr || !isForwardedClassNameAttr(classNameAttr, propsBinding) || !isInPropsBindingScope(path, propsBinding, propsBindingScope)) return;
+		insertSxAttribute(ctx, opening, sxExpression);
+		changed = true;
+	});
+	return changed;
+}
+function insertSxAttribute(ctx, opening, sxExpression) {
+	const sxAttr = ctx.j.jsxAttribute(ctx.j.jsxIdentifier("sx"), ctx.j.jsxExpressionContainer(cloneExpression(sxExpression)));
+	const attributes = opening.attributes ?? [];
+	const firstSpreadIndex = attributes.findIndex((attr) => attr?.type === "JSXSpreadAttribute");
+	const insertionIndex = firstSpreadIndex === -1 ? attributes.length : firstSpreadIndex;
+	opening.attributes = [
+		...attributes.slice(0, insertionIndex),
+		sxAttr,
+		...attributes.slice(insertionIndex)
+	];
+}
+function isConvertedChildBinding(ctx, path, childName, convertedBindingPath) {
+	return findNearestValueBindingPath(ctx, path, childName)?.node === convertedBindingPath.node;
+}
+function findNearestValueBindingPath(ctx, referencePath, name) {
+	let bestPath = null;
+	let bestDepth = -1;
+	const considerBindingPath = (bindingPath, containerPath) => {
+		if (!containerPath || !pathContains(containerPath, referencePath)) return;
+		const depth = pathDepth(containerPath);
+		if (depth > bestDepth) {
+			bestPath = bindingPath;
+			bestDepth = depth;
+		}
+	};
+	ctx.root.find(ctx.j.FunctionDeclaration).forEach((path) => {
+		if (path.node.id?.name === name) considerBindingPath(path, getLexicalContainerPath(path));
+		if (functionHasParamBinding(path.node, name)) considerBindingPath(path, path);
+	});
+	ctx.root.find(ctx.j.FunctionExpression).forEach((path) => {
+		if (functionHasParamBinding(path.node, name)) considerBindingPath(path, path);
+	});
+	ctx.root.find(ctx.j.ArrowFunctionExpression).forEach((path) => {
+		if (functionHasParamBinding(path.node, name)) considerBindingPath(path, path);
+	});
+	ctx.root.find(ctx.j.ClassDeclaration).forEach((path) => {
+		if (path.node.id?.name === name) considerBindingPath(path, getLexicalContainerPath(path));
+	});
+	ctx.root.find(ctx.j.ClassExpression).forEach((path) => {
+		if (path.node.id?.name === name) considerBindingPath(path, path);
+	});
+	ctx.root.find(ctx.j.VariableDeclarator).forEach((path) => {
+		if (patternHasBindingName(path.node.id, name)) considerBindingPath(path, getLexicalContainerPath(path));
+	});
+	return bestPath;
+}
+function isTopLevelValueBindingPath(path) {
+	return getLexicalContainerPath(path)?.node?.type === "Program";
+}
+function functionHasParamBinding(fn, name) {
+	return (fn.params ?? []).some((param) => patternHasBindingName(param, name));
+}
+function patternHasBindingName(node, name) {
+	const names = /* @__PURE__ */ new Set();
+	collectPatternBindingNames(node, names);
+	return names.has(name);
+}
+function findPropsBindingScope(fnPath, propsBinding) {
+	return findBindingScope(fnPath, propsBinding.kind === "destructured" ? propsBinding.classNameLocal : propsBinding.propsLocal);
+}
+function isInPropsBindingScope(path, propsBinding, bindingScope) {
+	return isInBindingScope(path, propsBinding.kind === "destructured" ? propsBinding.classNameLocal : propsBinding.propsLocal, bindingScope);
+}
+function findBindingScope(path, bindingName) {
+	let scope;
+	try {
+		scope = path.scope?.lookup?.(bindingName);
+	} catch {
+		return null;
+	}
+	return scope && typeof scope === "object" ? scope : null;
+}
+function isInBindingScope(path, bindingName, bindingScope) {
+	return findBindingScope(path, bindingName) === bindingScope;
+}
+function addSxDestructure(ctx, propsBinding) {
+	if (propsBinding.kind !== "destructured" || propsBinding.restLocal || hasObjectPatternProp(propsBinding.pattern, "sx")) return;
+	const properties = [...propsBinding.pattern.properties ?? []];
+	const restIndex = properties.findIndex(isObjectPatternRestElement);
+	properties.splice(restIndex === -1 ? properties.length : restIndex, 0, ctx.patternProp("sx", ctx.j.identifier(propsBinding.sxLocal)));
+	propsBinding.pattern.properties = properties;
+}
+function isObjectPatternRestElement(prop) {
+	return prop?.type === "RestElement" || prop?.type === "RestProperty";
+}
+function getObjectPatternRestLocal(pattern) {
+	const rest = (pattern.properties ?? []).find(isObjectPatternRestElement);
+	return rest?.argument?.type === "Identifier" ? rest.argument.name : null;
+}
+function getJsxAttr(opening, attrName) {
+	return (opening.attributes ?? []).find((attr) => attr?.type === "JSXAttribute" && attr.name?.name === attrName) ?? null;
+}
+function hasJsxAttr(opening, attrName) {
+	return Boolean(getJsxAttr(opening, attrName));
+}
+function isForwardedClassNameAttr(attr, propsBinding) {
+	const expr = attr.value?.type === "JSXExpressionContainer" ? attr.value.expression : null;
+	if (!expr) return false;
+	if (propsBinding.kind === "destructured") return expr.type === "Identifier" && expr.name === propsBinding.classNameLocal;
+	return expr.type === "MemberExpression" && expr.object?.type === "Identifier" && expr.object.name === propsBinding.propsLocal && expr.property?.type === "Identifier" && expr.property.name === "className";
+}
+function getObjectPatternKeyName(prop) {
+	if (prop?.type !== "Property" && prop?.type !== "ObjectProperty") return null;
+	const key = prop.key;
+	if (key?.type === "Identifier") return key.name;
+	if (key?.type === "StringLiteral" || key?.type === "Literal") return typeof key.value === "string" ? key.value : null;
+	return null;
+}
+function getObjectPatternValueName(prop) {
+	if (!prop) return null;
+	const value = prop.value;
+	if (value?.type === "Identifier") return value.name;
+	if (value?.type === "AssignmentPattern" && value.left?.type === "Identifier") return value.left.name;
+	return null;
+}
+function hasObjectPatternProp(pattern, propName) {
+	return (pattern.properties ?? []).some((prop) => getObjectPatternKeyName(prop) === propName);
+}
+function getExistingSxLocal(pattern) {
+	return getObjectPatternValueName((pattern.properties ?? []).find((prop) => getObjectPatternKeyName(prop) === "sx")) ?? "sx";
+}
+function getAvailableSxLocalName(fn) {
+	const usedNames = /* @__PURE__ */ new Set();
+	for (const param of fn.params ?? []) {
+		collectPatternBindingNames(param, usedNames);
+		collectIdentifierNames(param, usedNames);
+	}
+	collectBindingNames(fn.body, usedNames);
+	collectIdentifierNames(fn.body, usedNames);
+	if (!usedNames.has("sx")) return "sx";
+	if (!usedNames.has("sxProp")) return "sxProp";
+	let suffix = 2;
+	while (usedNames.has(`sxProp${suffix}`)) suffix++;
+	return `sxProp${suffix}`;
+}
+function collectIdentifierNames(node, names, visited = /* @__PURE__ */ new WeakSet()) {
+	if (!node || typeof node !== "object") return;
+	if (visited.has(node)) return;
+	visited.add(node);
+	const astNode = node;
+	if (astNode.type === "Identifier" && typeof astNode.name === "string") {
+		names.add(astNode.name);
+		return;
+	}
+	for (const value of Object.values(astNode)) {
+		if (!value) continue;
+		if (Array.isArray(value)) for (const item of value) collectIdentifierNames(item, names, visited);
+		else if (typeof value === "object") collectIdentifierNames(value, names, visited);
+	}
+}
+function collectBindingNames(node, names, visited = /* @__PURE__ */ new WeakSet()) {
+	if (!node || typeof node !== "object") return;
+	if (visited.has(node)) return;
+	visited.add(node);
+	const astNode = node;
+	if (astNode.type === "Identifier" && typeof astNode.name === "string") return;
+	if (typeof astNode.id === "object" && astNode.id !== null) collectPatternBindingNames(astNode.id, names);
+	if (Array.isArray(astNode.params)) for (const param of astNode.params) collectPatternBindingNames(param, names);
+	for (const value of Object.values(astNode)) {
+		if (!value || value === astNode.id || value === astNode.params) continue;
+		if (Array.isArray(value)) for (const item of value) collectBindingNames(item, names, visited);
+		else if (typeof value === "object") collectBindingNames(value, names, visited);
+	}
+}
+function collectPatternBindingNames(node, names) {
+	if (!node || typeof node !== "object") return;
+	const astNode = node;
+	if (astNode.type === "Identifier" && typeof astNode.name === "string") {
+		names.add(astNode.name);
+		return;
+	}
+	if (astNode.type === "RestElement") {
+		collectPatternBindingNames(astNode.argument, names);
+		return;
+	}
+	if (astNode.type === "AssignmentPattern") {
+		collectPatternBindingNames(astNode.left, names);
+		return;
+	}
+	if (astNode.type === "ArrayPattern") {
+		for (const element of astNode.elements ?? []) collectPatternBindingNames(element, names);
+		return;
+	}
+	if (astNode.type === "ObjectPattern") for (const property of astNode.properties ?? []) {
+		if (!property || typeof property !== "object") continue;
+		const prop = property;
+		if (prop.type === "RestElement") collectPatternBindingNames(prop.argument, names);
+		else collectPatternBindingNames(prop.value, names);
+	}
+}
+function cloneExpression(expression) {
+	return JSON.parse(JSON.stringify(expression));
+}
+//#endregion
 //#region src/internal/transform-steps/reinsert-static-props.ts
 /**
 * Step: reinsert static property assignments after wrapper emission.
@@ -38301,6 +39064,7 @@ function transformWithWarnings(file, api, options) {
 		rewriteJsxStep,
 		emitWrappersStep,
 		emitBridgeExportsStep,
+		propagateSxFromClassNameStep,
 		upgradePolymorphicAsPropTypesStep,
 		ensureMergerImportStep,
 		reinsertStaticPropsStep,

package/package.json

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