css prop signature and css style signature is inconsistent when theme is used

Current behavior: If you define styles which expect the theme property, it can not be shared for css prop and styled components.

const colorStyles = ({ theme }) => css`
  color: ${theme.colors.primary};
`;

const Title = styled.h1`
  ${colorStyles};
  font-size: 30px;
`;

If you try to apply the color styles defined above to the css prop.

<h2 css={colorStyles}>Start editing to see some magic happen!</h2>

An error will be thrown. Cannot read property 'colors' of undefined

To fix that, you have to do

<h2 css={theme => colorStyles({theme})}>Start editing to see some magic happen!</h2>

The reason is because the inconsistent signature.

const colorStylesToBeUsedInStyledComponents = ({ theme }) => css`
  color: ${theme.colors.primary};
`;

const colorStylesToBeUsedInCssProp = theme => css`
  color: ${theme.colors.primary};
`;

In styled-components they are consistent.

To reproduce:

https://codesandbox.io/s/emotion-issue-p6qhf

Expected behavior:

Styles depending on the theme should be able to be shared regardless where they are used. The inconsistency is causing confusion.

Environment information:

• react version: 16.8.6
• emotion version: 10.0.15

[Andarist]

I believe that @mitchellhamilton just meant that theme for a css prop would have to be, somewhat artificially, wrapped in an object (if we would implement this). So internally instead of roughly doing this:

const theme = useTheme(ThemeContext)
cssProp(theme)

we’d have to do this

const theme = useTheme(ThemeContext)
cssProp({ theme })

You reminds me about another example, it would be nice if we can pass props into the css prop.

The given example is just impossible to implement. css prop lacks the context of ColorCard props, it’s completely unaware of them. It could potentially be aware of that div’s props but it’s not something that we want to support because often you are using css prop on host elements (like div) but your “styling props” are not what you actually want to pass onto that div (it would show up in the DOM and React would warn you against that). We could filter them out like in case of the styled API but we refuse to do this because it forces us to maintain a props whitelist and this is something that css prop was designed to avoid.

Your example can be rewritten easily with just minor changes to:

const colorStyles = ({ color }) => css`
  color: ${color};
`;

function ColorButton(props) {
  const { color } = props
  return (
    <button css={colorStyles(props)}>{color}</button>
  )
}

function ColorCard(props) {
  const { color } = props
  return (
    <div css={colorStyles(props)}>{color}</div>
  )
}

[terryyu]

@Andarist thanks for explaining! I thought css prop and styled components are two interchangeable ways to work with predefined/imported styles. Now I realize they are designed with a little difference and constraints. Good to know!