v11: TypeScript infers incorrect type when composing styles/classes

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]

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!