search

stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
https://stitches.dev
MIT License
7.73k stars 249 forks source link

Use @radix-ui/react-slot for polymorphism #1073

Open sandgraham opened 1 year ago

sandgraham commented 1 year ago

Is your feature request related to a problem? Please describe.

I've recently been working on TS performance improvements for a project using Stitches and Radix. After doing some profiling it was clear that there were some hot spots when using styled and components from Radix. I saw a huge improvement after upgrading the Radix components to versions where they started using the asChild prop. I still see some type checking slow-downs around styled components though. I especially worry about other libraries which expose polymorphic APIs coming into contact with Stitches- as the polymorphic slowdown seems to compound.

Describe the solution you'd like

I was curious if Stitches has plans to, or would be open to, adopting @radix-ui/react-slot for polymorphism over the current as prop. I'm not sure how much it would improve TS performance, but based on the improvements I saw with Radix it seems like there could be some wins. I think it would also simplify the types for StyledComponent a bit.

Describe alternatives you've considered

Currently I'm trying to wrap the default styled component from createStitches with a component that uses @radix-ui/react-slot. It's okay, but unfortunately I have had to copy some of the Stitches source code to get types correct as well as access internals I'd rather not touch.

Maybe a middle-ground solution is to expose some of the things required to create your own styled function?