Emotion: v11: TypeScript infers incorrect type when composing styles/classes

[frankwallis]

Current behavior:

When composing styles the type of the created styled component is inferred to be a union of the created type _and_ any element types referenced in the template literal

To reproduce:

The following code gives a TypeScript error using v11 but not under v10:

const Label = styled.label``
const Input = styled.input`
  & + ${Label}: {
    margin-left: 3px;
  }
`
;<Input onChange={(evt: React.ChangeEvent<HTMLInputElement>) => console.log(evt.target.value)} />

The resultant type becomes HTMLInputElement & HTMLLabelElement (or similar) and so the onChange handler is not allowed

Expected behavior:

In the above code the Input component should be inferred to be just HTMLInputElement

Environment information:

• react version: 16.11.0
• emotion version: 11.0.0-next.5

[Andarist]

cc @JakeGinnivan

[frankwallis]

It seems to relate to this code which has been removed: https://github.com/emotion-js/emotion/blob/8767a69251c8de86e8350ac8788b4129847e15bb/packages/serialize/types/index.d.ts#L79

And now in the template arguments the ${Label} is being inferred as a FunctionInterpolation instead of a ComponentSelector

[Andarist]

Thank you for investigating, it will be a great help in fixing this ❤️

[frankwallis]

@JakeGinnivan thank you for finding a solution for this, I'm not sure I would have found it. Is it ready for a PR into the next branch?
Let me know if there is anything I can do to help.

[JakeGinnivan]

@frankwallis the fix is already in the current @next on NPM. If you could give it another spin to see if there are any other issues that would be great!

[JakeGinnivan]

@frankwallis oh wait, no I was getting confused with another fix. There was a few additional comments to sort, will get it done today!

[frankwallis]

awesome, thanks!

[Andarist]

@JakeGinnivan so this was not yet fixed by #1664?

[JakeGinnivan]

@Andarist it just wasn't merged, once v11 gets released again it will

[Andarist]

It got merged in few minutes ago - I'll cut a new release soon, so if the fix is already on next I would prefer to close this issue already. Stay tuned for a new release!

[frankwallis]

I can confirm that our build is now working fine with no changes using v11 (we are not using theming). The build time has gone down from ~38 seconds to ~26 seconds which is really awesome, and I think will have a big impact when using VSCode. Thanks for the great work!

[Andarist]

Thank you for checking!