Current behavior:

The @emotion/core/types/index.d.ts file from the package includes the following declarations:

declare module 'react' {
  interface DOMAttributes<T> {
    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 {
      css?: InterpolationWithTheme<any>
    }
  }
}

This causes the global scope to become polluted with @emotion types, even though the user might not be asking for it - eg. it came as a surprise to me, because @emotion is a dependency of storybook, and I didn't know about it until I tried using the css prop for styled-components and there was no error.

Further, after including styled-components type declaration for the css prop, some strange errors emerged because of the way TypeScript handles declaration merging:

  Types of property 'css' are incompatible.
    Type 'string | CSSObject | FlattenInterpolation<ThemeProps<any>> | undefined' is not
assignable to type 'InterpolationWithTheme<any>'.
      Type 'FlattenInterpolation<ThemeProps<any>>' is not assignable to type 'InterpolationWithTheme<any>'.
        Type 'FlattenInterpolation<ThemeProps<any>>' is not assignable to type 'ObjectInterpolation<undefined>'.

Expected behavior:

I'd expect a mechanism similar to styled-components/cssprop: the user has to manually create a file which imports global declarations instead of pullution by default.

Environment information:

@emotion/core@10.0.27