@emotion/core typings are leaking

[ling1726]

Components can't be used in simple create-react-app projects with the following error:

What

To make PopoverSurface work the code needs to be written this way:

<PopoverSurface css={{}}>Great workaround \o/</PopoverSurface>

otherwise TS will continuously error

Why ?

All components were refactored to use type from interface following #19850 they are always inlined during build by typescript. The addition of IntrinsicShorthandProps in #19642 is another major factor.

Let's look at the example of PopoverSurface

export const PopoverSurface = React.forwardRef<HTMLDivElement, PopoverSurfaceProps>((props, ref) => {

The resulting props for the root slot includes a property css (as seen in the above error). Here is the type declaration in @emotion/core:

declare module 'react' {
  interface DOMAttributes<T> {
    🚨🚨🚨🚨 This leaks into the props of `PopoverSurface`
    css?: InterpolationWithTheme<any>
  }
}

declare global {
  namespace JSX {
    /**
     * Do we need to modify `LibraryManagedAttributes` too,
     * to make `className` props optional when `css` props is specified?
     */

    interface IntrinsicAttributes {
      🚨🚨🚨🚨 This leaks into the props of `PopoverSurface`
      css?: InterpolationWithTheme<any>
    }
  }
}

The css property leaks into the expanded type. There is no way for typescript to exclude type roots in the build process and a way to do so is an open issue microsoft/TypeScript#37053.

Solutions

Explicitly typing the return of forwardRef which is already proposed in #19923

⚠️⚠️ This does mean that types will not leak in the future thanks to type inlining, read article in the next section

export const PopoverSurface: React.ForwardRefExoticComponent<PopoverSurfaceProps> = React.forwardRef<HTMLDivElement, PopoverSurfaceProps>((props, ref) => {

Use interfaces over types

interface are not inlined during the typescript build process and is why Bloomberg has advocated not using type altogether: https://www.techatbloomberg.com/blog/10-insights-adopting-typescript-at-scale/

[bsunderhus]

Let's just merge #19923

[layershifter]

The progress is tracked in #20079.