stitches icon indicating copy to clipboard operation
stitches copied to clipboard

Typescript error when using `as` with multiple levels of nesting

Open s-h-a-d-o-w opened this issue 3 years ago • 2 comments

Bug report

Describe the bug

This fix only works a single level deep. Which might also be why some other people have said that the fix doesn't work for them. But as far as I've seen, nobody has debugged it this way and mentioned multiple levels of nesting, so I thought I should create this new issue.

To Reproduce

Insert const AnotherLevel = styled(Flex, {}) in packages/test/issue-749-react.tsx and use that instead of Flex.

Will throw

No overload matches this call.
  Overload 1 of 3, '(props: Omit<Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, "size" | "css"> & TransformProps<...> & { ...; }, "css" | "variant"> & TransformProps<...> & { ...; }, "as" | "css"> & TransformProps<...> & { ...; }): ReactElement<...> | null', gave the following error.
    Type 'string' is not assignable to type 'undefined'.
...

Expected behavior

as prop should not throw TS errors regardless of levels of nesting.

Screenshots

Screenshot 2022-10-07 152001

System information

  • Version of Stitches: canary source

Additional context

I have looked at it a bit and TypeScript seems to generate the type recursively with the appropriate props, so I'm not sure what's going on here.

Screenshot 2022-10-07 152455

s-h-a-d-o-w avatar Oct 07 '22 13:10 s-h-a-d-o-w

+1

enk0de avatar Oct 17 '22 08:10 enk0de

Please upvote the original post instead of posting +1.

s-h-a-d-o-w avatar Oct 21 '22 20:10 s-h-a-d-o-w