styled-components-to-stylex-codemod 0.0.47 → 0.0.48

package/dist/transform.mjs

@@ -2605,8 +2605,76 @@ function typeContainsPolymorphicAs(args) {
 	return visit(args.typeNode);
 }
 //#endregion
+//#region src/internal/utilities/typescript-metadata.ts
+function findTypeScriptComponentMetadata(metadata, filePath, componentNames) {
+	if (!metadata) return;
+	const names = new Set(componentNames);
+	const resolvedFilePath = resolveExistingFilePath(filePath);
+	return metadata.files.find((file) => file.filePath === resolvedFilePath)?.components.find((component) => names.has(component.name) || defaultExportMatches(component, names));
+}
+function applyTypeScriptMetadataToDecl(ctx, decl, names) {
+	const typedComponent = findTypeScriptComponentMetadata(ctx.options.crossFileInfo?.typeScriptMetadata, ctx.file.path, names);
+	if (!typedComponent) return;
+	decl.typeScriptPropNames = new Set(typedComponent.props.map((prop) => prop.name));
+	decl.typeScriptExplicitPropNames = new Set(typedComponent.explicitPropNames);
+	decl.typeScriptPropTypes = new Map(typedComponent.props.map((prop) => [prop.name, prop.type]));
+	decl.typeScriptOptionalProps = new Set(typedComponent.props.filter((prop) => prop.optional).map((prop) => prop.name));
+	decl.typeScriptHasIndexSignature = typedComponent.hasIndexSignature;
+	decl.typeScriptSupportsSxProp = typedComponent.supportsSxProp;
+}
+function defaultExportMatches(component, names) {
+	return component.defaultExport && names.has("default");
+}
+//#endregion
+//#region src/internal/utilities/wrapped-component-interface.ts
+function wrappedComponentInterfaceFor(ctx, componentLocalName) {
+	if (!ctx.adapter.useSxProp) return;
+	const importInfo = ctx.importMap?.get(componentLocalName);
+	if (importInfo) {
+		const typedInterface = importInfo.source.kind === "absolutePath" ? typedComponentInterfaceFor(ctx, importInfo.source.value, importInfo.importedName === "default" ? [componentLocalName, importInfo.importedName] : [importInfo.importedName]) : void 0;
+		const adapterResult = ctx.adapter.wrappedComponentInterface?.({
+			localName: componentLocalName,
+			importSource: importInfo.source.value,
+			importedName: importInfo.importedName,
+			filePath: ctx.file.path
+		});
+		if (adapterResult !== void 0) {
+			if (adapterResult.acceptsSx && hasTypedSxConstraints(typedInterface)) return {
+				...adapterResult,
+				sxExcludedProperties: mergeUniqueStrings(adapterResult.sxExcludedProperties, typedInterface.sxExcludedProperties ?? []),
+				sxAllowedProperties: mergeAllowedPropertyLists(adapterResult.sxAllowedProperties, typedInterface.sxAllowedProperties)
+			};
+			return adapterResult;
+		}
+		return typedInterface;
+	}
+	return typedComponentInterfaceFor(ctx, ctx.file.path, [componentLocalName]);
+}
+function hasTypedSxConstraints(typedInterface) {
+	return typedInterface !== void 0 && ((typedInterface.sxExcludedProperties?.length ?? 0) > 0 || typedInterface.sxAllowedProperties !== void 0);
+}
+function typedComponentInterfaceFor(ctx, filePath, componentNames) {
+	const typedComponent = findTypeScriptComponentMetadata(ctx.options.crossFileInfo?.typeScriptMetadata, filePath, componentNames);
+	if (typedComponent?.supportsSxProp) return {
+		acceptsSx: true,
+		sxExcludedProperties: typedComponent.sxExcludedProperties,
+		sxAllowedProperties: typedComponent.sxAllowedProperties
+	};
+}
+function mergeAllowedPropertyLists(first, second) {
+	if (first === void 0) return second === void 0 ? void 0 : [...second];
+	if (second === void 0) return [...first];
+	const secondSet = new Set(second);
+	return first.filter((name) => secondSet.has(name));
+}
+function mergeUniqueStrings(first, second) {
+	return [...new Set([...first ?? [], ...second])];
+}
+//#endregion
 //#region src/internal/transform-steps/analyze-after-emit.ts
 const INLINE_USAGE_THRESHOLD$1 = 1;
+const AS_ATTR = new Set(["as"]);
+const FORWARDED_AS_ATTR = new Set(["forwardedAs"]);
 /**
 * Finalizes wrapper decisions, polymorphic handling, and base flattening after style emission.
 */
@@ -2762,6 +2830,16 @@ function analyzeAfterEmitStep(ctx) {
 		if (!canDowngradeStyleFnIntrinsicWrapper(decl, exportedComponents, extendedBy, root, j)) continue;
 		decl.needsWrapperComponent = false;
 	}
+	for (const decl of styledDecls) {
+		if (!canInlineSingleUseSxAwareComponentWrapper({
+			ctx,
+			decl,
+			exportedComponents,
+			extendedBy,
+			wrapperNames
+		})) continue;
+		decl.needsWrapperComponent = false;
+	}
 	ctx.wrapperNames = wrapperNames;
 	return CONTINUE;
 }
@@ -2795,6 +2873,60 @@ function canDowngradeStyleFnIntrinsicWrapper(decl, exportedComponents, extendedB
 	if (decl.receivesClassNameOrStyleInJsx) return false;
 	return true;
 }
+function canInlineSingleUseSxAwareComponentWrapper(args) {
+	const { ctx, decl, exportedComponents, extendedBy, wrapperNames } = args;
+	const { root, j } = ctx;
+	if (!decl.needsWrapperComponent || decl.isCssHelper || decl.isDirectJsxResolution) return false;
+	if (decl.base.kind !== "component") return false;
+	if (exportedComponents.has(decl.localName)) return false;
+	if (wrapperNames.has(decl.localName) && !hasOnlyForwardedAsPolymorphicUsage(root, j, decl)) return false;
+	if (extendedBy.has(decl.localName) || decl.usedAsValue) return false;
+	if (countComponentJsxUsages(root, j, decl.localName) !== INLINE_USAGE_THRESHOLD$1) return false;
+	if (hasJsxNamespaceUsage(root, j, decl.localName)) return false;
+	if (hasSpreadInJsx(root, j, decl.localName)) return false;
+	if (hasAttrsAsOverride(decl.attrsInfo) || hasAttrsPayload(decl.attrsInfo)) return false;
+	if (needsShouldForwardPropWrapper(decl) || decl.attrWrapper || decl.bridgeClassName || decl.enumVariant || (decl.inlineStyleProps?.length ?? 0) > 0 || (decl.styleFnFromProps?.length ?? 0) > 0 || (decl.variantDimensions?.length ?? 0) > 0 || Object.keys(decl.variantStyleKeys ?? {}).length > 0 || (decl.compoundVariants?.length ?? 0) > 0 || (decl.pseudoAliasSelectors?.length ?? 0) > 0 || (decl.pseudoExpandSelectors?.length ?? 0) > 0 || (decl.localElementOverrides?.length ?? 0) > 0 || (decl.needsUseThemeHook?.length ?? 0) > 0 || (decl.extraStylexPropsArgs?.some((arg) => arg.when) ?? false)) return false;
+	const componentInterface = wrappedComponentInterfaceFor(ctx, decl.base.ident);
+	return componentInterface?.acceptsSx === true && (componentInterface.sxExcludedProperties?.length ?? 0) === 0 && componentInterface.sxAllowedProperties === void 0;
+}
+function hasAttrsPayload(attrsInfo) {
+	return !!(Object.keys(attrsInfo?.staticAttrs ?? {}).length > 0 || (attrsInfo?.conditionalAttrs?.length ?? 0) > 0 || (attrsInfo?.defaultAttrs?.length ?? 0) > 0 || (attrsInfo?.dynamicAttrs?.length ?? 0) > 0 || (attrsInfo?.invertedBoolAttrs?.length ?? 0) > 0 || Object.keys(attrsInfo?.attrsStaticStyles ?? {}).length > 0 || attrsInfo?.attrsStaticStyleExpr || (attrsInfo?.attrsDynamicStyles?.length ?? 0) > 0);
+}
+function hasOnlyForwardedAsPolymorphicUsage(root, j, decl) {
+	return decl.base.kind === "component" && hasAnyJsxAttribute(root, j, decl.localName, FORWARDED_AS_ATTR) && !hasAnyJsxAttribute(root, j, decl.localName, AS_ATTR);
+}
+function hasJsxNamespaceUsage(root, j, localName) {
+	let found = false;
+	root.find(j.JSXMemberExpression).forEach((p) => {
+		if (getRootJsxIdentifierName(p.node) === localName) found = true;
+	});
+	return found;
+}
+function hasAnyJsxAttribute(root, j, name, attrNames) {
+	let found = false;
+	const checkOpening = (opening) => {
+		for (const attr of opening.attributes ?? []) {
+			const attrName = attr.name?.name;
+			if (attr.type === "JSXAttribute" && attrName && attrNames.has(attrName)) {
+				found = true;
+				return;
+			}
+		}
+	};
+	root.find(j.JSXElement, { openingElement: { name: {
+		type: "JSXIdentifier",
+		name
+	} } }).forEach((p) => {
+		if (!found) checkOpening(p.node.openingElement);
+	});
+	root.find(j.JSXSelfClosingElement, { name: {
+		type: "JSXIdentifier",
+		name
+	} }).forEach((p) => {
+		if (!found) checkOpening(p.node);
+	});
+	return found;
+}
 //#endregion
 //#region src/internal/analyze-before-emit/exported-components.ts
 function collectExportedComponents(root, j, declByLocal) {
@@ -3035,27 +3167,6 @@ function specifierExportedName(spec) {
 	return null;
 }
 //#endregion
-//#region src/internal/utilities/typescript-metadata.ts
-function findTypeScriptComponentMetadata(metadata, filePath, componentNames) {
-	if (!metadata) return;
-	const names = new Set(componentNames);
-	const resolvedFilePath = resolveExistingFilePath(filePath);
-	return metadata.files.find((file) => file.filePath === resolvedFilePath)?.components.find((component) => names.has(component.name) || defaultExportMatches(component, names));
-}
-function applyTypeScriptMetadataToDecl(ctx, decl, names) {
-	const typedComponent = findTypeScriptComponentMetadata(ctx.options.crossFileInfo?.typeScriptMetadata, ctx.file.path, names);
-	if (!typedComponent) return;
-	decl.typeScriptPropNames = new Set(typedComponent.props.map((prop) => prop.name));
-	decl.typeScriptExplicitPropNames = new Set(typedComponent.explicitPropNames);
-	decl.typeScriptPropTypes = new Map(typedComponent.props.map((prop) => [prop.name, prop.type]));
-	decl.typeScriptOptionalProps = new Set(typedComponent.props.filter((prop) => prop.optional).map((prop) => prop.name));
-	decl.typeScriptHasIndexSignature = typedComponent.hasIndexSignature;
-	decl.typeScriptSupportsSxProp = typedComponent.supportsSxProp;
-}
-function defaultExportMatches(component, names) {
-	return component.defaultExport && names.has("default");
-}
-//#endregion
 //#region src/internal/emit-wrappers/variant-condition.ts
 /**
 * Parse a variant "when" string into an AST condition expression.
@@ -4721,51 +4832,6 @@ function buildChildStyleObjectList(childKeys, resolvedStyleObjects) {
 	return childStyleObjects;
 }
 //#endregion
-//#region src/internal/utilities/wrapped-component-interface.ts
-function wrappedComponentInterfaceFor(ctx, componentLocalName) {
-	if (!ctx.adapter.useSxProp) return;
-	const importInfo = ctx.importMap?.get(componentLocalName);
-	if (importInfo) {
-		const typedInterface = importInfo.source.kind === "absolutePath" ? typedComponentInterfaceFor(ctx, importInfo.source.value, importInfo.importedName === "default" ? [componentLocalName, importInfo.importedName] : [importInfo.importedName]) : void 0;
-		const adapterResult = ctx.adapter.wrappedComponentInterface?.({
-			localName: componentLocalName,
-			importSource: importInfo.source.value,
-			importedName: importInfo.importedName,
-			filePath: ctx.file.path
-		});
-		if (adapterResult !== void 0) {
-			if (adapterResult.acceptsSx && hasTypedSxConstraints(typedInterface)) return {
-				...adapterResult,
-				sxExcludedProperties: mergeUniqueStrings(adapterResult.sxExcludedProperties, typedInterface.sxExcludedProperties ?? []),
-				sxAllowedProperties: mergeAllowedPropertyLists(adapterResult.sxAllowedProperties, typedInterface.sxAllowedProperties)
-			};
-			return adapterResult;
-		}
-		return typedInterface;
-	}
-	return typedComponentInterfaceFor(ctx, ctx.file.path, [componentLocalName]);
-}
-function hasTypedSxConstraints(typedInterface) {
-	return typedInterface !== void 0 && ((typedInterface.sxExcludedProperties?.length ?? 0) > 0 || typedInterface.sxAllowedProperties !== void 0);
-}
-function typedComponentInterfaceFor(ctx, filePath, componentNames) {
-	const typedComponent = findTypeScriptComponentMetadata(ctx.options.crossFileInfo?.typeScriptMetadata, filePath, componentNames);
-	if (typedComponent?.supportsSxProp) return {
-		acceptsSx: true,
-		sxExcludedProperties: typedComponent.sxExcludedProperties,
-		sxAllowedProperties: typedComponent.sxAllowedProperties
-	};
-}
-function mergeAllowedPropertyLists(first, second) {
-	if (first === void 0) return second === void 0 ? void 0 : [...second];
-	if (second === void 0) return [...first];
-	const secondSet = new Set(second);
-	return first.filter((name) => secondSet.has(name));
-}
-function mergeUniqueStrings(first, second) {
-	return [...new Set([...first ?? [], ...second])];
-}
-//#endregion
 //#region src/internal/utilities/style-composition-plan.ts
 function buildStyleKeySequence(ctx, decl, options) {
 	const entries = [];
@@ -7348,6 +7414,11 @@ function coerceToStringForStyleX(cssProp, value) {
 */
 function inferTypeForCssProp(cssProp, expr) {
 	if (isStylexStringOnlyCssProp(cssProp)) return "string";
+	const conditionalType = inferTypeFromConditionalBranches(expr);
+	if (conditionalType) {
+		if (conditionalType === "number" && LENGTH_LIKE_CSS_PROP_RE.test(cssProp)) return "numberOrString";
+		return conditionalType;
+	}
 	const staticVal = literalToStaticValue(expr);
 	if (typeof staticVal === "number") return "number";
 	if (typeof staticVal === "string") return "string";
@@ -7355,6 +7426,25 @@ function inferTypeForCssProp(cssProp, expr) {
 	if (LENGTH_LIKE_CSS_PROP_RE.test(cssProp)) return "numberOrString";
 	return "string";
 }
+function inferTypeFromConditionalBranches(expr) {
+	if (!expr || typeof expr !== "object") return null;
+	const node = expr;
+	if (node.type !== "ConditionalExpression") return null;
+	const consequent = inferTypeFromExpressionValue(node.consequent);
+	const alternate = inferTypeFromExpressionValue(node.alternate);
+	if (!consequent || !alternate) return null;
+	if (consequent === alternate) return consequent;
+	return "numberOrString";
+}
+function inferTypeFromExpressionValue(expr) {
+	const nested = inferTypeFromConditionalBranches(expr);
+	if (nested) return nested;
+	if (expr && typeof expr === "object" && expr.type === "TemplateLiteral") return "string";
+	const value = literalToStaticValue(expr);
+	if (typeof value === "string") return "string";
+	if (typeof value === "number") return "number";
+	return null;
+}
 /**
 * Analyzes JSX call-site `style={{ ... }}` objects for all intrinsic styled components
 * and promotes analyzable style objects to proper `stylex.create` entries.
@@ -9364,6 +9454,32 @@ function findEnclosingFunction(path) {
 	}
 	return null;
 }
+function collectStyledComponentLocalNames(root, j, styledLocalNames) {
+	const names = /* @__PURE__ */ new Set();
+	root.find(j.VariableDeclarator).forEach((path) => {
+		if (path.node.id?.type !== "Identifier") return;
+		const init = path.node.init;
+		if (!init) return;
+		if (init.type === "TaggedTemplateExpression" && isStyledTag(styledLocalNames, init.tag)) {
+			names.add(path.node.id.name);
+			return;
+		}
+		if (init.type === "CallExpression" && init.callee?.type === "TaggedTemplateExpression" && isStyledTag(styledLocalNames, init.callee.tag)) names.add(path.node.id.name);
+	});
+	return names;
+}
+function templateReferencesStyledComponentSelector(template, styledLocalNames) {
+	const parsed = parseStyledTemplateLiteral(template);
+	for (const slot of parsed.slots) {
+		const expr = slot.expression;
+		if (expr.type !== "Identifier" || !expr.name || !styledLocalNames.has(expr.name)) continue;
+		const after = parsed.rawCss.slice(slot.endOffset);
+		const nextBlockStart = after.indexOf("{");
+		const nextDeclarationEnd = after.indexOf(";");
+		if (nextBlockStart >= 0 && (nextDeclarationEnd < 0 || nextBlockStart < nextDeclarationEnd)) return true;
+	}
+	return false;
+}
 /**
 * Checks a CSS template for closure variable references and returns an UnsupportedCssUsage
 * if any are found. Returns null if no closure variables are detected.
@@ -9509,8 +9625,11 @@ function detectUnsupportedCssHelperUsage(args) {
 	return unsupportedUsages;
 }
 function extractAndRemoveCssHelpers(args) {
-	const { root, j, styledImports, cssLocal, toStyleKey, preserveDeclarationOnlyNames } = args;
+	const { root, j, styledImports, cssLocal, toStyleKey, preserveDeclarationOnlyNames, preservedStyledComponentSelectorNames } = args;
 	const styledLocalNames = collectStyledDefaultImportLocalNames(styledImports);
+	const styledComponentLocalNames = collectStyledComponentLocalNames(root, j, styledLocalNames);
+	const preservedSelectorNames = preservedStyledComponentSelectorNames ?? /* @__PURE__ */ new Set();
+	const rewrittenStyledComponentLocalNames = new Set([...styledComponentLocalNames].filter((name) => !preservedSelectorNames.has(name)));
 	const exportedLocalNames = buildExportedLocalNames(root, j);
 	const cssHelperFunctions = /* @__PURE__ */ new Map();
 	const cssHelperNames = /* @__PURE__ */ new Set();
@@ -9566,12 +9685,20 @@ function extractAndRemoveCssHelpers(args) {
 		const styleKey = toStyleKey(localName);
 		const placementHints = getCssHelperPlacementHints(root, p);
 		const isExported = exportedLocalNames.has(localName);
-		const preserveDeclarationOnly = preserveDeclarationOnlyNames?.has(localName) ?? false;
 		const template = init.quasi;
 		const { rules, rawCss, templateExpressions } = parseCssHelperTemplate({
 			template,
 			noteUniversalSelector: noteCssHelperUniversalSelector
 		});
+		if (isExported && templateReferencesStyledComponentSelector(template, rewrittenStyledComponentLocalNames)) {
+			unsupportedCssUsages.push({
+				loc: getNodeLocStart(template),
+				reason: "outside-styled-template"
+			});
+			return;
+		}
+		if (isExported && templateReferencesStyledComponentSelector(template, preservedSelectorNames)) return;
+		const preserveDeclarationOnly = preserveDeclarationOnlyNames?.has(localName) ?? false;
 		cssHelperDecls.push({
 			...placementHints,
 			localName,
@@ -9614,6 +9741,18 @@ function extractAndRemoveCssHelpers(args) {
 		}
 		changed = true;
 	});
+	if (unsupportedCssUsages.length > 0) return {
+		unsupportedCssUsages,
+		cssHelperFunctions,
+		cssHelperNames,
+		cssHelperObjectMembers,
+		cssHelperDecls,
+		cssHelperHasUniversalSelectors,
+		cssHelperUniversalSelectorLoc,
+		cssHelperReplacements,
+		cssHelperTemplateReplacements,
+		changed
+	};
 	root.find(j.VariableDeclarator, { init: { type: "ArrowFunctionExpression" } }).forEach((p) => {
 		if (p.node.id.type !== "Identifier") return;
 		const name = p.node.id.name;
@@ -9865,10 +10004,6 @@ function cleanupCssImportStep(ctx) {
 //#endregion
 //#region src/internal/transform-steps/collect-static-props.ts
 /**
-* Step: collect static property assignments on styled components.
-* Core concepts: static metadata capture and inheritance generation.
-*/
-/**
 * Collects static property assignments and generates inheritance statements.
 */
 function collectStaticPropsStep(ctx) {
@@ -9879,6 +10014,7 @@ function collectStaticPropsStep(ctx) {
 	const staticPropertyAssignments = /* @__PURE__ */ new Map();
 	const staticPropertyNames = /* @__PURE__ */ new Map();
 	const styledNames = new Set(styledDecls.map((d) => d.localName));
+	const objectExpressionByName = collectObjectExpressionVariables(root, j);
 	const baseComponentNames = /* @__PURE__ */ new Set();
 	for (const decl of styledDecls) {
 		const baseIdent = getEffectiveBaseIdent(decl);
@@ -9895,12 +10031,8 @@ function collectStaticPropsStep(ctx) {
 	}).forEach((p) => {
 		const expr = p.node.expression;
 		const componentName = expr.left.object.name;
-		const propName = expr.left.property?.name ?? expr.left.property?.value;
-		if (propName) {
-			const names = staticPropertyNames.get(componentName) ?? [];
-			names.push(propName);
-			staticPropertyNames.set(componentName, names);
-		}
+		const propName = getStaticPropertyNameFromMemberExpression(expr.left);
+		if (propName) addStaticPropertyName(staticPropertyNames, componentName, propName);
 		if (baseComponentNames.has(componentName)) return;
 		if (ctx.exportedComponents?.has(componentName) || ctx.extendedBy?.has(componentName)) {
 			const existing = staticPropertyAssignments.get(componentName) ?? [];
@@ -9909,6 +10041,24 @@ function collectStaticPropsStep(ctx) {
 		}
 		j(p).remove();
 	});
+	root.find(j.CallExpression).forEach((path) => {
+		const callee = path.node.callee;
+		if (callee?.type !== "MemberExpression" || callee.object?.type !== "Identifier" || callee.object.name !== "Object" || callee.property?.type !== "Identifier" || callee.property.name !== "assign") return;
+		const parent = path.parentPath?.node;
+		const assignedName = parent?.type === "VariableDeclarator" && parent.id?.type === "Identifier" ? parent.id.name : null;
+		const target = path.node.arguments?.[0];
+		if (target?.type !== "Identifier") return;
+		const componentNames = [target.name, ...assignedName ? [assignedName] : []].filter((name, index, names) => names.indexOf(name) === index && baseComponentNames.has(name));
+		if (componentNames.length === 0) return;
+		for (const componentName of componentNames) for (const source of path.node.arguments.slice(1)) {
+			const statics = getObjectAssignStaticSource(source, objectExpressionByName);
+			if (!statics) continue;
+			for (const prop of statics.properties ?? []) {
+				const propName = getStaticPropertyNameFromObjectProperty(prop);
+				if (propName) addStaticPropertyName(staticPropertyNames, componentName, propName);
+			}
+		}
+	});
 	for (const decl of styledDecls) {
 		const baseIdent = getEffectiveBaseIdent(decl);
 		if (!baseIdent) continue;
@@ -9917,11 +10067,7 @@ function collectStaticPropsStep(ctx) {
 		if (!baseProps || baseProps.length === 0) continue;
 		if ((staticPropertyAssignments.get(decl.localName) ?? []).length > 0) continue;
 		const inheritanceStatements = [];
-		for (const propName of baseProps) {
-			const rhs = ctx.j(`const __x = (${baseComponentName} as any).${propName};`).get().node.program.body[0].declarations[0].init;
-			const stmt = ctx.j.expressionStatement(ctx.j.assignmentExpression("=", ctx.j.memberExpression(ctx.j.identifier(decl.localName), ctx.j.identifier(propName)), rhs));
-			inheritanceStatements.push(stmt);
-		}
+		for (const propName of baseProps) inheritanceStatements.push(buildStaticInheritanceStatement(ctx.j, decl.localName, baseComponentName, propName));
 		if (inheritanceStatements.length > 0) staticPropertyAssignments.set(decl.localName, inheritanceStatements);
 	}
 	for (const decl of styledDecls) {
@@ -9967,6 +10113,46 @@ function collectStaticPropsStep(ctx) {
 	ctx.staticPropertyNames = staticPropertyNames;
 	return CONTINUE;
 }
+function collectObjectExpressionVariables(root, j) {
+	const objectExpressionByName = /* @__PURE__ */ new Map();
+	root.find(j.VariableDeclarator).forEach((path) => {
+		if (path.node.id?.type === "Identifier" && path.node.init?.type === "ObjectExpression") objectExpressionByName.set(path.node.id.name, path.node.init);
+	});
+	return objectExpressionByName;
+}
+function getObjectAssignStaticSource(source, objectExpressionByName) {
+	if (source?.type === "ObjectExpression") return source;
+	if (source?.type === "Identifier" && source.name) return objectExpressionByName.get(source.name) ?? null;
+	return null;
+}
+function addStaticPropertyName(staticPropertyNames, componentName, propName) {
+	const names = staticPropertyNames.get(componentName) ?? [];
+	if (!names.includes(propName)) {
+		names.push(propName);
+		staticPropertyNames.set(componentName, names);
+	}
+}
+function getStaticPropertyNameFromMemberExpression(memberExpression) {
+	const property = memberExpression.property;
+	if (!memberExpression.computed && property?.type === "Identifier") return property.name ?? null;
+	if ((property?.type === "Literal" || property?.type === "StringLiteral") && typeof property.value === "string") return property.value;
+	return null;
+}
+function getStaticPropertyNameFromObjectProperty(prop) {
+	if (!prop || typeof prop !== "object") return null;
+	const property = prop;
+	if (property.type === "SpreadElement" || property.type === "SpreadProperty") return null;
+	const key = property.key;
+	if (!property.computed && key?.type === "Identifier") return key.name ?? null;
+	if ((key?.type === "Literal" || key?.type === "StringLiteral") && typeof key.value === "string") return key.value;
+	return null;
+}
+function buildStaticInheritanceStatement(j, componentName, baseComponentName, propName) {
+	return j(`${isIdentifierPropertyName(propName) ? `${componentName}.${propName}` : `(${componentName} as any)[${JSON.stringify(propName)}]`} = ${isIdentifierPropertyName(propName) ? `(${baseComponentName} as any).${propName}` : `(${baseComponentName} as any)[${JSON.stringify(propName)}]`};`).get().node.program.body[0];
+}
+function isIdentifierPropertyName(propName) {
+	return /^[$A-Z_a-z][$\w]*$/.test(propName);
+}
 //#endregion
 //#region src/internal/utilities/ast-safety.ts
 /**
@@ -16466,6 +16652,13 @@ function buildShorthandDefaultPatternProp(j, name, defaultVal) {
 		shorthand: true
 	});
 }
+function shouldPassChildrenThroughRest(args) {
+	const { includeChildren, includeRest = false, restId, destructureProps = [], defaultAttrs = [], dynamicAttrs = [], staticAttrs = {} } = args;
+	if (!includeChildren || !includeRest || !restId) return false;
+	if (destructureProps.some((name) => name === "children")) return false;
+	if ([...defaultAttrs, ...dynamicAttrs].some((attr) => attr.attrName === "children" || attr.jsxProp === "children")) return false;
+	return !Object.hasOwn(staticAttrs, "children");
+}
 function buildDestructurePatternProps(j, patternProp, args) {
 	const { baseProps, destructureProps, propDefaults, includeRest = false, restId } = args;
 	const patternProps = [...baseProps];
@@ -18197,6 +18390,16 @@ var WrapperEmitter = class {
 		const allowForwardedAsProp = this.getUsedAttrs(localName).has("forwardedAs");
 		const needsPolymorphicTypeParams = this.emitTypes && (allowAsProp || inlineTypeNeedsElementGeneric(inlineTypeText));
 		const propsId = j.identifier("props");
+		let restId = includeRest ? j.identifier("rest") : null;
+		const passChildrenThroughRest = shouldPassChildrenThroughRest({
+			includeChildren: !isVoidTag,
+			includeRest,
+			restId,
+			destructureProps,
+			defaultAttrs,
+			dynamicAttrs,
+			staticAttrs
+		});
 		const patternProps = [];
 		if (allowAsProp) patternProps.push(j.property.from({
 			kind: "init",
@@ -18205,7 +18408,7 @@ var WrapperEmitter = class {
 			shorthand: false
 		}));
 		if (allowForwardedAsProp) patternProps.push(this.patternProp("forwardedAs"));
-		if (!isVoidTag) patternProps.push(this.patternProp("children"));
+		if (!isVoidTag && !passChildrenThroughRest) patternProps.push(this.patternProp("children"));
 		const shouldForwardRefExplicitly = includeRefProp && !includeRest;
 		if (shouldForwardRefExplicitly) patternProps.push(this.patternProp("ref"));
 		if (allowClassNameProp) patternProps.push(this.patternProp("className"));
@@ -18217,7 +18420,6 @@ var WrapperEmitter = class {
 		}
 		for (const a of defaultAttrs) if (!expandedDestructureProps.has(a.jsxProp)) patternProps.push(this.patternProp(a.jsxProp));
 		for (const attr of dynamicAttrs) if (!expandedDestructureProps.has(attr.jsxProp)) patternProps.push(this.patternProp(attr.jsxProp));
-		let restId = includeRest ? j.identifier("rest") : null;
 		if (includeRest && restId) patternProps.push(j.restElement(restId));
 		const usePropsDirectlyForRest = includeRest && patternProps.length === 1 && patternProps[0]?.type === "RestElement";
 		const useChildrenParamDestructure = this.isChildrenOnlyDestructurePattern(patternProps);
@@ -18281,9 +18483,9 @@ var WrapperEmitter = class {
 		if (merging.classNameAttr) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(merging.classNameAttr)));
 		if (merging.styleAttr) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(merging.styleAttr)));
 		const renderedJsxName = jsxNameFromString(j, allowAsProp ? "Component" : attrsAsTag ?? tagName);
-		const openingEl = j.jsxOpeningElement(renderedJsxName, jsxAttrs, isVoidTag);
+		const openingEl = j.jsxOpeningElement(renderedJsxName, jsxAttrs, isVoidTag || passChildrenThroughRest);
 		const childrenExpr = j.identifier("children");
-		const jsx = j.jsxElement(openingEl, isVoidTag ? null : j.jsxClosingElement(renderedJsxName), isVoidTag ? [] : [j.jsxExpressionContainer(childrenExpr)]);
+		const jsx = j.jsxElement(openingEl, isVoidTag || passChildrenThroughRest ? null : j.jsxClosingElement(renderedJsxName), isVoidTag || passChildrenThroughRest ? [] : [j.jsxExpressionContainer(childrenExpr)]);
 		const bodyStmts = [];
 		if (!usePropsDirectlyForRest && !useChildrenParamDestructure) bodyStmts.push(j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]));
 		if (merging.sxDecl) bodyStmts.push(merging.sxDecl);
@@ -18371,6 +18573,9 @@ var WrapperEmitter = class {
 	buildDestructurePatternProps(args) {
 		return buildDestructurePatternProps(this.j, this.patternProp, args);
 	}
+	shouldPassChildrenThroughRest(args) {
+		return shouldPassChildrenThroughRest(args);
+	}
 	isChildrenOnlyDestructurePattern(patternProps) {
 		return isChildrenOnlyDestructurePattern(patternProps);
 	}
@@ -19172,6 +19377,19 @@ function emitComponentWrappers(emitter) {
 			node: arg,
 			propNames: splicedStyleFnProps
 		});
+		const localOnlyPropsTypeText = localOnlyComponentWrapperPropsTypeText({
+			d,
+			emitter,
+			allowClassNameProp,
+			allowStyleProp,
+			exposeSxProp,
+			forceClassNameOptional,
+			forceStyleOptional,
+			functionParamTypeName,
+			isPolymorphicComponentWrapper,
+			shouldLowerForwardedAs
+		});
+		if (localOnlyPropsTypeText) inlineTypeText = localOnlyPropsTypeText;
 		const propsParamId = j.identifier("props");
 		let polymorphicFnTypeParams = null;
 		if (isPolymorphicComponentWrapper && emitTypes) {
@@ -19211,7 +19429,7 @@ function emitComponentWrappers(emitter) {
 			const classNameId = j.identifier("className");
 			const styleId = j.identifier("style");
 			const sxId = j.identifier("sx");
-			const restId = j.identifier("rest");
+			let restId = j.identifier("rest");
 			const componentId = j.identifier("Component");
 			const forwardedAsId = j.identifier("forwardedAs");
 			const wrappedComponentExpr = buildWrappedComponentExpr();
@@ -19224,11 +19442,20 @@ function emitComponentWrappers(emitter) {
 			const destructureStyle = allowStyleProp && !canForwardClassNameStyleThroughRest;
 			const destructureSx = exposeSxProp;
 			const destructurePropsForPattern = needsUseTheme ? destructureProps.filter((name) => name !== "theme") : destructureProps;
+			const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+				includeChildren,
+				includeRest: true,
+				restId,
+				destructureProps: destructurePropsForPattern,
+				defaultAttrs,
+				dynamicAttrs,
+				staticAttrs: staticAttrsForJsx
+			});
 			const patternProps = emitter.buildDestructurePatternProps({
 				baseProps: [
 					...isPolymorphicComponentWrapper ? [j.property("init", j.identifier("as"), j.assignmentPattern(componentId, wrappedComponentExpr))] : [],
 					...destructureClassName ? [patternProp("className", classNameId)] : [],
-					...includeChildren ? [patternProp("children", childrenId)] : [],
+					...includeChildren && !passChildrenThroughRest ? [patternProp("children", childrenId)] : [],
 					...destructureStyle ? [patternProp("style", styleId)] : [],
 					...destructureSx ? [patternProp("sx", sxId)] : [],
 					...shouldLowerForwardedAs ? [patternProp("forwardedAs", forwardedAsId)] : []
@@ -19238,7 +19465,9 @@ function emitComponentWrappers(emitter) {
 				includeRest: true,
 				restId
 			});
-			const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
+			const usePropsDirectlyForRest = patternProps.length === 1 && patternProps[0]?.type === "RestElement";
+			if (usePropsDirectlyForRest) restId = propsId;
+			const declStmt = usePropsDirectlyForRest ? null : j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
 			const merging = emitStyleMerging({
 				j,
 				emitter,
@@ -19255,7 +19484,8 @@ function emitComponentWrappers(emitter) {
 				wrappedAcceptsSxProp: wrappedAcceptsSx,
 				keepStylePropSeparate: shouldKeepStylePropSeparate(renderedComponent)
 			});
-			const stmts = [declStmt];
+			const stmts = [];
+			if (declStmt) stmts.push(declStmt);
 			if (needsUseTheme) stmts.push(buildUseThemeDeclaration(j, emitter.themeHookLocalName));
 			if (merging.sxDecl) stmts.push(merging.sxDecl);
 			const openingAttrs = [];
@@ -19325,7 +19555,7 @@ function emitComponentWrappers(emitter) {
 			const jsx = emitter.buildJsxElement({
 				tagName: jsxTagName,
 				attrs: openingAttrs,
-				includeChildren,
+				includeChildren: includeChildren && !passChildrenThroughRest,
 				childrenExpr: childrenId
 			});
 			stmts.push(j.returnStatement(jsx));
@@ -19371,6 +19601,24 @@ function emitComponentWrappers(emitter) {
 function shouldKeepStylePropSeparate(componentName) {
 	return componentName.startsWith("motion.") || componentName.startsWith("animated.");
 }
+function localOnlyComponentWrapperPropsTypeText(args) {
+	const { d, emitter, allowClassNameProp, allowStyleProp, exposeSxProp, forceClassNameOptional, forceStyleOptional, functionParamTypeName, isPolymorphicComponentWrapper, shouldLowerForwardedAs } = args;
+	if (!emitter.emitTypes || d.isExported || emitter.exportedComponents.has(d.localName) || d.propsType || d.consumerUsesSpread || emitter.isBroadValueUsage(d) || functionParamTypeName || isPolymorphicComponentWrapper || allowClassNameProp || allowStyleProp || exposeSxProp || forceClassNameOptional || forceStyleOptional || shouldLowerForwardedAs || !hasStaticComponentAttrs(d) || hasPropDrivenComponentWrapperBehavior(d) || hasRuntimeAttrsProps(d)) return null;
+	const usedAttrs = emitter.getUsedAttrs(d.localName);
+	if (usedAttrs.has("*") || [...usedAttrs].some((attr) => attr !== "children")) return null;
+	if (!usedAttrs.has("children") && !emitter.hasJsxChildrenUsage(d.localName)) return null;
+	return "{ children?: React.ReactNode }";
+}
+function hasStaticComponentAttrs(d) {
+	return Object.keys(d.attrsInfo?.staticAttrs ?? {}).length > 0;
+}
+function hasRuntimeAttrsProps(d) {
+	const attrsInfo = d.attrsInfo;
+	return !!((attrsInfo?.defaultAttrs?.length ?? 0) > 0 || (attrsInfo?.dynamicAttrs?.length ?? 0) > 0 || (attrsInfo?.conditionalAttrs?.length ?? 0) > 0 || (attrsInfo?.invertedBoolAttrs?.length ?? 0) > 0 || (attrsInfo?.attrsDynamicStyles?.length ?? 0) > 0 || attrsInfo?.attrsStaticStyleExpr);
+}
+function hasPropDrivenComponentWrapperBehavior(d) {
+	return !!(d.enumVariant || d.shouldForwardProp || (d.inlineStyleProps?.length ?? 0) > 0 || (d.styleFnFromProps?.length ?? 0) > 0 || (d.variantDimensions?.length ?? 0) > 0 || (d.compoundVariants?.length ?? 0) > 0 || Object.keys(d.variantStyleKeys ?? {}).length > 0 || (d.transientPropRenames?.size ?? 0) > 0 || (d.observedExpressionConditionDropProps?.size ?? 0) > 0 || (d.styleValueVariantProps?.size ?? 0) > 0);
+}
 function getExplicitAttrsOmitUnion(args) {
 	const { attrsProvidedPropNames, emitter, propsType } = args;
 	if (!propsType || attrsProvidedPropNames.size === 0) return null;
@@ -20333,6 +20581,12 @@ function buildAttrWrapperBody(ctx, args) {
 	const forwardedAsId = j.identifier("forwardedAs");
 	const componentId = j.identifier("Component");
 	const sxId = j.identifier("sx");
+	const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+		includeChildren,
+		includeRest: true,
+		restId,
+		destructureProps: [...extraDestructureProps, ...pseudoGuardProps]
+	});
 	const baseProps = [
 		...allowAsProp ? [j.property.from({
 			kind: "init",
@@ -20343,7 +20597,7 @@ function buildAttrWrapperBody(ctx, args) {
 		...includesForwardedAs ? [ctx.patternProp("forwardedAs", forwardedAsId)] : [],
 		...extraDestructureProps.map((name) => ctx.patternProp(name, j.identifier(name))),
 		...allowClassNameProp ? [ctx.patternProp("className", classNameId)] : [],
-		...includeChildren ? [ctx.patternProp("children", childrenId)] : []
+		...includeChildren && !passChildrenThroughRest ? [ctx.patternProp("children", childrenId)] : []
 	];
 	const patternProps = emitter.buildDestructurePatternProps({
 		baseProps,
@@ -20369,7 +20623,7 @@ function buildAttrWrapperBody(ctx, args) {
 	const jsx = emitter.buildJsxElement({
 		tagName: jsxTag,
 		attrs: openingAttrs,
-		includeChildren,
+		includeChildren: includeChildren && !passChildrenThroughRest,
 		childrenExpr: childrenId
 	});
 	const fnBodyStmts = [
@@ -20726,6 +20980,15 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 		const sxId = j.identifier("sx");
 		const forwardedAsId = j.identifier("forwardedAs");
 		if (allowSxProp) styleArgs.push(sxId);
+		const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+			includeChildren,
+			includeRest: true,
+			restId,
+			destructureProps,
+			defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+			dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
+			staticAttrs: d.attrsInfo?.staticAttrs ?? {}
+		});
 		const patternProps = emitter.buildDestructurePatternProps({
 			baseProps: [
 				...allowAsProp ? [j.property.from({
@@ -20736,7 +20999,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 				})] : [],
 				...includesForwardedAs ? [ctx.patternProp("forwardedAs", forwardedAsId)] : [],
 				...allowClassNameProp ? [ctx.patternProp("className", classNameId)] : [],
-				...includeChildren ? [ctx.patternProp("children", childrenId)] : [],
+				...includeChildren && !passChildrenThroughRest ? [ctx.patternProp("children", childrenId)] : [],
 				...allowStyleProp ? [ctx.patternProp("style", styleId)] : [],
 				...allowSxProp ? [ctx.patternProp("sx", sxId)] : []
 			],
@@ -20781,7 +21044,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 		const jsx = emitter.buildJsxElement({
 			tagName: allowAsProp ? "Component" : tagName,
 			attrs,
-			includeChildren,
+			includeChildren: includeChildren && !passChildrenThroughRest,
 			childrenExpr: childrenId
 		});
 		const fnBodyStmts = [declStmt];
@@ -21068,12 +21331,21 @@ function emitShouldForwardPropWrappers(ctx) {
 		const sxId = j.identifier("sx");
 		if (allowSxProp) styleArgs.push(sxId);
 		const destructurePartsForPattern = needsUseTheme ? destructureParts.filter((name) => name !== "theme") : destructureParts;
+		const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+			includeChildren,
+			includeRest,
+			restId,
+			destructureProps: destructurePartsForPattern,
+			defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+			dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
+			staticAttrs: d.attrsInfo?.staticAttrs ?? {}
+		});
 		const patternProps = emitter.buildDestructurePatternProps({
 			baseProps: [
 				...allowAsProp ? [asDestructureProp(tagName)] : [],
 				...includesForwardedAs ? [ctx.patternProp("forwardedAs", forwardedAsId)] : [],
 				...allowClassNameProp ? [ctx.patternProp("className", classNameId)] : [],
-				...includeChildren ? [ctx.patternProp("children", childrenId)] : [],
+				...includeChildren && !passChildrenThroughRest ? [ctx.patternProp("children", childrenId)] : [],
 				...allowStyleProp ? [ctx.patternProp("style", styleId)] : [],
 				...shouldForwardRefExplicitly ? [ctx.patternProp("ref", refId)] : [],
 				...allowSxProp ? [ctx.patternProp("sx", sxId)] : []
@@ -21127,7 +21399,7 @@ function emitShouldForwardPropWrappers(ctx) {
 		const jsx = emitter.buildJsxElement({
 			tagName: allowAsProp ? "Component" : tagName,
 			attrs: openingAttrs,
-			includeChildren,
+			includeChildren: includeChildren && !passChildrenThroughRest,
 			childrenExpr: childrenId
 		});
 		const fnBodyStmts = [declStmt];
@@ -21342,11 +21614,20 @@ function emitSimpleWithConfigWrappers(ctx) {
 		}
 		const sxId = j.identifier("sx");
 		if (allowSxProp) styleArgs.push(sxId);
+		const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+			includeChildren: !isVoidTag,
+			includeRest: true,
+			restId,
+			destructureProps: [...pseudoGuardProps],
+			defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+			dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
+			staticAttrs: d.attrsInfo?.staticAttrs ?? {}
+		});
 		const patternProps = emitter.buildDestructurePatternProps({
 			baseProps: [
 				...allowAsProp ? [asDestructureProp(tagName)] : [],
 				emitter.patternProp("className", classNameId),
-				...isVoidTag ? [] : [emitter.patternProp("children", childrenId)],
+				...!isVoidTag && !passChildrenThroughRest ? [emitter.patternProp("children", childrenId)] : [],
 				emitter.patternProp("style", styleId),
 				...allowSxProp ? [emitter.patternProp("sx", sxId)] : []
 			],
@@ -21382,8 +21663,8 @@ function emitSimpleWithConfigWrappers(ctx) {
 			})
 		];
 		emitter.appendMergingAttrs(openingAttrs, merging);
-		const openingEl = j.jsxOpeningElement(j.jsxIdentifier(allowAsProp ? "Component" : tagName), openingAttrs, false);
-		const jsx = isVoidTag ? {
+		const openingEl = j.jsxOpeningElement(j.jsxIdentifier(allowAsProp ? "Component" : tagName), openingAttrs, isVoidTag || passChildrenThroughRest);
+		const jsx = isVoidTag || passChildrenThroughRest ? {
 			type: "JSXElement",
 			openingElement: {
 				...openingEl,
@@ -21675,13 +21956,22 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			const styleId = j.identifier("style");
 			const sxId = j.identifier("sx");
 			const refId = j.identifier("ref");
-			const restId = shouldIncludeRest ? j.identifier("rest") : null;
+			let restId = shouldIncludeRest ? j.identifier("rest") : null;
 			const shouldForwardRefExplicitly = !restId && ((d.supportsRefProp ?? false) || willForwardRef);
 			const forwardedAsId = j.identifier("forwardedAs");
 			if (allowSxProp) styleArgs.push(sxId);
 			for (const attr of d.attrsInfo?.defaultAttrs ?? []) if (!destructureProps.includes(attr.jsxProp)) destructureProps.push(attr.jsxProp);
 			for (const attr of d.attrsInfo?.dynamicAttrs ?? []) if (!destructureProps.includes(attr.jsxProp)) destructureProps.push(attr.jsxProp);
 			const destructurePropsForPattern = needsUseTheme ? destructureProps.filter((name) => name !== "theme") : destructureProps;
+			const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+				includeChildren,
+				includeRest: Boolean(restId),
+				restId,
+				destructureProps: destructurePropsForPattern,
+				defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+				dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
+				staticAttrs: d.attrsInfo?.staticAttrs ?? {}
+			});
 			const patternProps = emitter.buildDestructurePatternProps({
 				baseProps: [
 					...useAsProp ? [j.property.from({
@@ -21692,7 +21982,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 					})] : [],
 					...includesForwardedAs ? [ctx.patternProp("forwardedAs", forwardedAsId)] : [],
 					...allowClassNameProp ? [ctx.patternProp("className", classNameId)] : [],
-					...includeChildren ? [ctx.patternProp("children", childrenId)] : [],
+					...includeChildren && !passChildrenThroughRest ? [ctx.patternProp("children", childrenId)] : [],
 					...allowStyleProp ? [ctx.patternProp("style", styleId)] : [],
 					...shouldForwardRefExplicitly ? [ctx.patternProp("ref", refId)] : [],
 					...allowSxProp ? [ctx.patternProp("sx", sxId)] : []
@@ -21702,10 +21992,12 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				includeRest: Boolean(restId),
 				restId: restId ?? void 0
 			});
+			const usePropsDirectlyForRest = Boolean(restId) && patternProps.length === 1 && patternProps[0]?.type === "RestElement";
+			if (usePropsDirectlyForRest) restId = propsId;
 			const usePropsChildrenDirectly = emitter.isChildrenOnlyDestructurePattern(patternProps);
 			const propsParam = usePropsChildrenDirectly ? emitter.buildChildrenOnlyParam(inlineTypeText ?? emitter.propsTypeNameFor(d.localName)) : j.identifier("props");
 			if (!usePropsChildrenDirectly) emitter.annotatePropsParam(propsParam, d.localName, inlineTypeText);
-			const declStmt = usePropsChildrenDirectly ? null : j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
+			const declStmt = usePropsChildrenDirectly || usePropsDirectlyForRest ? null : j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
 			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d), d.extraClassNames);
 			const { attrsInfo: attrsInfoWithoutForwardedAsStatic, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
 				attrsInfo,
@@ -21742,7 +22034,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			const jsx = emitter.buildJsxElement({
 				tagName: useAsProp ? "Component" : tagName,
 				attrs: openingAttrs,
-				includeChildren,
+				includeChildren: includeChildren && !passChildrenThroughRest,
 				childrenExpr: childrenId
 			});
 			const bodyStmts = [];
@@ -22394,7 +22686,8 @@ function extractCssHelpersStep(ctx) {
 		styledImports,
 		cssLocal,
 		toStyleKey,
-		preserveDeclarationOnlyNames: collectCssHelpersUsedBySkippedImportedRoots(ctx)
+		preserveDeclarationOnlyNames: collectCssHelpersUsedBySkippedImportedRoots(ctx),
+		preservedStyledComponentSelectorNames: collectSkippedImportedRootStyledComponentNames(ctx)
 	});
 	if (cssHelpers.unsupportedCssUsages.length > 0) return returnResult({
 		code: null,
@@ -22404,6 +22697,26 @@ function extractCssHelpersStep(ctx) {
 	if (cssHelpers.changed) ctx.markChanged();
 	return CONTINUE;
 }
+function collectSkippedImportedRootStyledComponentNames(ctx) {
+	if (ctx.options.allowPartialMigration !== true || ctx.options.transformMode === "leavesOnly") return /* @__PURE__ */ new Set();
+	const names = /* @__PURE__ */ new Set();
+	ctx.root.find(ctx.j.VariableDeclarator).forEach((path) => {
+		const id = path.node.id;
+		if (id.type !== "Identifier") return;
+		if (initializerWrapsImportedComponent(ctx, path.node.init)) names.add(id.name);
+	});
+	return names;
+}
+function initializerWrapsImportedComponent(ctx, init) {
+	const node = init;
+	if (!node) return false;
+	if (node.type === "TaggedTemplateExpression") return tagWrapsImportedComponent(ctx, node.tag);
+	if (node.type === "CallExpression") {
+		const callee = node.callee;
+		return callee?.type === "TaggedTemplateExpression" && tagWrapsImportedComponent(ctx, callee.tag);
+	}
+	return false;
+}
 function collectCssHelpersUsedBySkippedImportedRoots(ctx) {
 	if (ctx.options.allowPartialMigration !== true || ctx.options.transformMode === "leavesOnly") return /* @__PURE__ */ new Set();
 	if ((ctx.importMap ?? /* @__PURE__ */ new Map()).size === 0) return /* @__PURE__ */ new Set();
@@ -26206,6 +26519,17 @@ function createCssHelperResolver(args) {
 				if (!resolved && hasThemeAccessInExpr(expr, paramName)) return bail("Conditional `css` block: failed to parse expression", { property: d.property }, exprLoc);
 				if (resolved) if (hasStaticParts) {
 					const { prefix, suffix } = extractPrefixSuffix(parts);
+					const borderParts = parseInterpolatedBorderStaticParts({
+						prop: d.property.trim(),
+						prefix,
+						suffix
+					});
+					if (borderParts) {
+						if (borderParts.width) target[borderParts.widthProp] = mergeIntoContext(borderParts.width, borderParts.widthProp, target);
+						if (borderParts.style) target[borderParts.styleProp] = mergeIntoContext(borderParts.style, borderParts.styleProp, target);
+						target[borderParts.colorProp] = mergeIntoContext(resolved.ast, borderParts.colorProp, target);
+						continue;
+					}
 					const templateAst = parseExpr(wrapExprWithStaticParts(resolved.exprString, prefix, suffix));
 					if (templateAst) {
 						for (const mapped of cssDeclarationToStylexDeclarations(d)) target[mapped.prop] = mergeIntoContext(templateAst, mapped.prop, target);
@@ -31847,26 +32171,23 @@ function tryHandleInterpolatedBorder(ctx, args) {
 			if (!hasStaticWidthOrStyle) {
 				const parsedTpl = parseTemplateLiteralBorderShorthand(resolved.exprAst);
 				if (parsedTpl) {
-					if (selector.trim() !== "&" || (atRuleStack ?? []).length > 0) {
-						if (parsedTpl.width) applyResolvedPropValue(widthProp, parsedTpl.width);
-						if (parsedTpl.style) applyResolvedPropValue(styleProp, parsedTpl.style);
-						applyResolvedPropValue(colorProp, parsedTpl.colorExpr);
-						return true;
-					}
-					const fullProp = direction ? `border${direction}` : "border";
-					const extraKey = styleKeyWithSuffix(decl.styleKey, fullProp);
-					const bucket = extraStyleObjects.get(extraKey) ?? {};
-					if (parsedTpl.width) bucket[widthProp] = parsedTpl.width;
-					if (parsedTpl.style) bucket[styleProp] = parsedTpl.style;
-					bucket[colorProp] = parsedTpl.colorExpr;
-					extraStyleObjects.set(extraKey, bucket);
-					decl.extraStylexPropsArgs ??= [];
-					const afterVariants = Object.keys(variantStyleKeys).length > 0;
-					decl.extraStylexPropsArgs.push({
-						expr: j.memberExpression(j.identifier("styles"), j.identifier(extraKey)),
-						...afterVariants ? { afterVariants } : {}
-					});
-					decl.needsWrapperComponent = true;
+					const expandedBorderEntries = [];
+					if (parsedTpl.width) expandedBorderEntries.push([widthProp, parsedTpl.width]);
+					if (parsedTpl.style) expandedBorderEntries.push([styleProp, parsedTpl.style]);
+					expandedBorderEntries.push([colorProp, parsedTpl.colorExpr]);
+					if (selector.trim() === "&" && (atRuleStack ?? []).length === 0 && hasConflictingEarlierVariant(Array.from(variantBuckets.values()), expandedBorderEntries)) {
+						const fullProp = direction ? `border${direction}` : "border";
+						const extraKey = styleKeyWithSuffix(decl.styleKey, fullProp);
+						const bucket = extraStyleObjects.get(extraKey) ?? {};
+						for (const [entryProp, entryValue] of expandedBorderEntries) bucket[entryProp] = entryValue;
+						extraStyleObjects.set(extraKey, bucket);
+						decl.extraStylexPropsArgs ??= [];
+						decl.extraStylexPropsArgs.push({
+							expr: j.memberExpression(j.identifier("styles"), j.identifier(extraKey)),
+							afterVariants: true
+						});
+						decl.needsWrapperComponent = true;
+					} else for (const [entryProp, entryValue] of expandedBorderEntries) applyResolvedPropValue(entryProp, entryValue);
 					bumpResolverImportToEnd((spec) => {
 						const from = spec?.from;
 						const names = spec?.names;
@@ -31950,6 +32271,25 @@ function classifyBorderSlotRole(ast) {
 	if ((node.type === "StringLiteral" || node.type === "Literal") && typeof node.value === "string") return looksLikeLength(node.value) ? "width" : "color";
 	return null;
 }
+function hasConflictingEarlierVariant(variantBuckets, borderEntries) {
+	const borderProps = borderEntries.map(([prop]) => prop);
+	return variantBuckets.some((bucket) => Object.keys(bucket).some((variantProp) => borderProps.some((borderProp) => borderLonghandsConflict(variantProp, borderProp))));
+}
+function borderLonghandsConflict(left, right) {
+	if (left === right) return true;
+	const leftParts = parseBorderLonghand(left);
+	const rightParts = parseBorderLonghand(right);
+	if (!leftParts || !rightParts || leftParts.aspect !== rightParts.aspect) return false;
+	return leftParts.side === null || rightParts.side === null || leftParts.side === rightParts.side;
+}
+function parseBorderLonghand(prop) {
+	const match = prop.match(/^border(?:(Top|Right|Bottom|Left))?(Width|Style|Color)$/);
+	if (!match) return null;
+	return {
+		side: match[1] ?? null,
+		aspect: match[2]
+	};
+}
 //#endregion
 //#region src/internal/lower-rules/interpolated-variant-resolvers.ts
 function handleSplitVariantsResolvedValue(ctx) {
@@ -32497,14 +32837,14 @@ function handleInlineStyleValueFromProps(ctx) {
 		const valueExpr = prefix || suffix ? buildTemplateWithStaticParts(j, baseExpr, prefix, suffix) : baseExpr;
 		const outs = cssDeclarationToStylexDeclarations(d);
 		if (outs.every((out) => out.prop && !isStylexShorthandCamelCase(out.prop))) {
-			const baseKeyAvailable = outs.length === 1 && Object.keys(styleObj).length === 0 && !styleFnDecls.has(decl.styleKey);
+			const baseKeyAvailable = outs.length === 1 && Object.keys(styleObj).length === 0 && !declarationHasFollowingStaticBaseStyles(decl, d) && !styleFnDecls.has(decl.styleKey);
 			for (const out of outs) {
 				if (!out.prop) continue;
 				const fnKey = baseKeyAvailable ? decl.styleKey : styleKeyWithSuffix(decl.styleKey, out.prop);
 				if (!styleFnDecls.has(fnKey)) {
 					const paramName = cssPropertyToIdentifier(out.prop, ctx.avoidNames);
 					const param = j.identifier(paramName);
-					if (/\.(ts|tsx)$/.test(filePath)) param.typeAnnotation = j.tsTypeAnnotation(j.tsUnionType([j.tsStringKeyword(), j.tsUndefinedKeyword()]));
+					if (/\.(ts|tsx)$/.test(filePath)) param.typeAnnotation = j.tsTypeAnnotation(inferStyleFnParamType(j, out.prop, valueExpr));
 					const propKey = makeCssPropKey(j, out.prop);
 					const p = j.property("init", propKey, j.identifier(paramName));
 					p.shorthand = propKey.type === "Identifier" && paramName === out.prop;
@@ -32573,6 +32913,54 @@ function handleInlineStyleValueFromProps(ctx) {
 function hasSimpleIdentifierParam(expr) {
 	return expr.params?.length === 1 && expr.params[0]?.type === "Identifier";
 }
+function declarationHasFollowingStaticBaseStyles(decl, current) {
+	for (const rule of decl.rules ?? []) {
+		const index = rule.declarations.indexOf(current);
+		if (index < 0) continue;
+		return rule.declarations.slice(index + 1).some((next) => next.value.kind === "static");
+	}
+	return false;
+}
+function inferStyleFnParamType(j, stylexProp, callArg) {
+	if (callArg.type === "TemplateLiteral" && expressionHasNullishFallback(callArg)) return j.tsStringKeyword();
+	if (expressionHasNullishFallback(callArg) && NUMERIC_STYLEX_PROPS.has(stylexProp)) {
+		if (getNullishFallbackType(callArg) !== "number") return j.tsUnionType([j.tsNumberKeyword(), j.tsStringKeyword()]);
+		return j.tsNumberKeyword();
+	}
+	return j.tsUnionType([j.tsStringKeyword(), j.tsUndefinedKeyword()]);
+}
+const NUMERIC_STYLEX_PROPS = new Set([
+	"zIndex",
+	"opacity",
+	"flexGrow",
+	"flexShrink",
+	"order"
+]);
+function getNullishFallbackType(expr) {
+	if (!expr || typeof expr !== "object") return null;
+	const node = expr;
+	if (node.type === "LogicalExpression" && node.operator === "??") return getExpressionPrimitiveType(node.right);
+	if (node.type === "TemplateLiteral") for (const templateExpr of node.expressions ?? []) {
+		const fallbackType = getNullishFallbackType(templateExpr);
+		if (fallbackType) return fallbackType;
+	}
+	return null;
+}
+function getExpressionPrimitiveType(expr) {
+	if (!expr || typeof expr !== "object") return "unknown";
+	const node = expr;
+	if (node.type === "NumericLiteral" || node.type === "Literal" && typeof node.value === "number") return "number";
+	if (node.type === "StringLiteral" || node.type === "Literal" && typeof node.value === "string") return "string";
+	if (node.type === "TemplateLiteral") return "string";
+	return "unknown";
+}
+function expressionHasNullishFallback(expr) {
+	if (!expr || typeof expr !== "object") return false;
+	const node = expr;
+	if (node.type === "LogicalExpression" && node.operator === "??") return true;
+	if (node.type === "TemplateLiteral") return (node.expressions ?? []).some(expressionHasNullishFallback);
+	return false;
+}
 /**
 * Emit one `${key}FromProps` style function entry per longhand expansion of
 * `d`, keyed by the StyleX prop name and wrapped in pseudo/media buckets.

package/package.json

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