a streamlined CSS-in-JS solution tailor-made for Next.js, seamlessly combining the expressive power of styled-components syntax with efficient build-time extraction and minimal runtime footprint, ensuring optimal performance and easy integration with existing atomic CSS frameworks like Tailwind CSS
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.
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:
The prop is never used in Button's styles
The nested selector syntax (${Icon}) is only meant for targeting the component in CSS, not for prop inheritance
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.
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
Expected Behavior
The
Button
component should not inherit the$active
prop type fromIcon
since it's only usingIcon
as a selector for styling nested elements. The$active
prop is only meaningful when used directly on theIcon
component.Actual Behavior
TypeScript enforces the
$active
prop on theButton
component even though:${Icon}
) is only meant for targeting the component in CSS, not for prop inheritanceImpact
This incorrect type inference forces users to add unnecessary props to parent components, leading to confusing and incorrect usage patterns.