Type inference incorrectly propagates props from targeted styled components

[rvetere]

When using a component that targets another component using the nested selector syntax, TypeScript incorrectly propagates the prop types from the targeted component to the parent component.

Reproduction

const Icon = styled.svg<{ $active: boolean }>`
  /* icon styles */
`;

const Button = styled.button`
  ${Icon} {
    color: red;
  }
`;

// TypeScript incorrectly requires $active prop here
<Button $active={true}>Click me</Button> // Should not require $active

Expected Behavior

The Button component should not inherit the $active prop type from Icon since it's only using Icon as a selector for styling nested elements. The $active prop is only meaningful when used directly on the Icon component.

Actual Behavior

TypeScript enforces the $active prop on the Button component even though:

1. The prop is never used in Button's styles
2. The nested selector syntax (${Icon}) is only meant for targeting the component in CSS, not for prop inheritance
3. next-yak does not actually do anything with these props at runtime in this context

Impact

This incorrect type inference forces users to add unnecessary props to parent components, leading to confusing and incorrect usage patterns.

[jantimon]

sounds like a job for @Mad-Kat 😄