Spread out unused props based on type

Author: skovhus

src/internal/emit-wrappers/emit-intrinsic.ts

@@ -1897,6 +1897,22 @@ export function emitIntrinsicWrappers(ctx: any): {
       }
     }
 
+    // Extract transient props (starting with $) from the explicit type and add to destructureProps
+    // so they get stripped from the rest spread (styled-components transient props should never reach DOM)
+    const explicit = d.propsType;
+    if (explicit?.type === "TSTypeLiteral" && explicit.members) {
+      for (const member of explicit.members as any[]) {
+        if (
+          member.type === "TSPropertySignature" &&
+          member.key?.type === "Identifier" &&
+          member.key.name.startsWith("$") &&
+          !destructureProps.includes(member.key.name)
+        ) {
+          destructureProps.push(member.key.name);
+        }
+      }
+    }
+
     const usedAttrs = getUsedAttrs(d.localName);
     const { hasAny: hasLocalUsage } = getJsxCallsites(d.localName);
     const explicitPropsNames = d.propsType ? getExplicitPropNames(d.propsType) : new Set<string>();

test-cases/transient-props.output.tsx

@@ -32,12 +32,8 @@ type PointProps = {
 // Pattern 3: Transient prop with dynamic value passed to inlined component
 // The prop is declared in type but not used in styles - must be stripped when inlined
 function Point(props: PointProps) {
-  const { children, style, ...rest } = props;
-  return (
-    <div {...rest} {...mergedSx(styles.point, undefined, style)}>
-      {children}
-    </div>
-  );
+  const { children, style, $size } = props;
+  return <div {...mergedSx(styles.point, undefined, style)}>{children}</div>;
 }
 
 // Pattern 4: styled(Component) where base component declares the transient prop