"Too complex" union type is created when composing and using `as` prop

[Jimmydalecleveland]

Bug report

Describe the bug

When composing components (as described in the Stitches Docs), and using the as prop (seen here in the docs), a Typescript error is produced in VS Code and Webstorm.

The error produced:

Expression produces a union type that is too complex to represent.ts(2590)

NOTE: commenting out/removing the lib property in tsconfig.json seems to resolve this issue but I don't know if that is the entire issue or just another symptom.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

I've created a reproduction repo that you can use to see the error, and I've had other developers clone it to see if they see the same (they have the same error).

The quick breakdown to reproduce is this:

1. compose a component created with styled from @stitches/react directly or a config created with createStitches.
2. use the composed component with an as prop.
3. have a tsconfig.json with the lib property (seemingly set to anything but mine was ["ES2015"] from an example config)

Expected behavior

I would expect no error should be produced by this very common practice. It feels like the type of problem that could sneak up on you at scale and be hard to fix, which makes me worried about moving forward even with the potential fix I've found.

I don't know enough about it to really say, though. I'm just bringing it to your attention.

Screenshots

Same screenshot from the repo:

System information

• OS: Windows 11 using WSL2 (but others on Mac OS and Arch Linux have seen the same error with my repo)
• Version of Stitches: v1.2.8
• Version of Node.js: v16.14.0

Additional context

No extra context, just want to say I really enjoy Stitches and am very impressed with it, as a user of many different CSS-in-JS/TS solutions. The quality and thought put into this project is very impressive, and I'm grateful for all the hard work.