@emotion/react: Support using theme props with `css` API

The problem

Existing css from @emotion/react doesn’t support accessing theme props as such:

const mixin = css`
  color: ${props => props.theme.colors.primary}
`'

Proposed solution

Please support it as it is helpful for React developers:

• Allow use cases in theme definitions, mixins, helpers, etc. where accessing theme props is required
• Users migrating to Emotion from Styled Components will be blocked by the lack of this feature

No specific solution from me but styled-components is a good example.

Alternative solutions

N/A

Additional context

Similar issue: #801

[Andarist]

You can also just refactor this to:

const mixin = theme => css`
  color: ${theme.colors.primary}
`'

[linxianxi]

@StevenVerbiest I’m not sure if I understand the improvement your suggesting. Maybe you can elaborate a bit on it. When you use solution 3 in the sandbox the CSS API is able to use the custom theme without us having to pass it. The type declaration is there just to make typescript happy. Due to how typescript is typed I think there is no way to get rid of this type of definition.

I think the improvement your looking for is similar to what I asked in #2291. After a discussion with @Andarist, I however agree that the module declaration overload is currently the cleanest solution we can support.

It would be nice if solution 2 didn’t have to write the type every time. Style-component library can be done.