Want TypeScript error for when css prop is passed a function (instead of SerializedStyles)

The problem

When using Emotion, I mostly create “static” styles in variables for use in my JSX to avoid cluttering the JSX with style information. For example:

const style = css({ fontSize: 40 });
const Component = () => <button css={style}>content</button>;

Occasionally I need to create “dynamic” styles, based off of the component’s props:

const style = size => css({ fontSize: size });
const Component = props => <button css={style(props.size)}>content</button>;

A common mistake I make is forgetting to call style() as a function, and instead writing css={style}, which of course doesn’t apply any styles because the style() function is never called.

I was hoping that using TypeScript with Emotion would help me avoid this error, but Emotion’s typings for the css prop seem to allow the function. I wish the typings would warn me.

Here’s an example: https://codesandbox.io/s/mystifying-keldysh-bdker

Proposed solution

Emotion’s type definitions should cause a TypeScript error when I pass a function to the css prop.

[JakeGinnivan]

A manual backwards compat step would be to add instructions to do this:

declare module "@emotion/core" {
  interface DefaultTheme {
    [key: string]: any
  }
}

[Andarist]

With vanilla emotion you won’t have eassy theme access though. I think we are going to go with DefaultTheme approach in the end, but we’d also like to promote creating your own themes with https://github.com/emotion-js/emotion/pull/1577 to avoid problems described in https://github.com/emotion-js/emotion/issues/1507#issuecomment-539919716 and in https://github.com/emotion-js/emotion/pull/973 . This all is still in the works though so stay tuned.