Emotion: Why we need css inside of styled?

[kossel]

• emotion version: 9.2.6
• react version: 9.2.6

Relevant code.

code 1:

import styled, { css } from 'react-emotion'

const dynamicStyle = props =>
  css`
    color: ${props.color};
  `

const Container = styled('div')(dynamicStyle)

render(
  <Container color="lightgreen">
    This is lightgreen.
  </Container>
)

code 2:

import styled, { css } from 'react-emotion'

const dynamicStyle = props =>
 `
    color: ${props.color};
  `

const Container = styled('div')(dynamicStyle)

render(
  <Container color="lightgreen">
    This is lightgreen.
  </Container>
)

What you did:
Remove css from code 1

What happened:
Still working as expected

Problem description:
The only difference between code 1 and code 2 (taken from emotion's compose documentation ) is the css call.

I tried to find the answer in many places but still no clear enough. I read css is the heart of emotion and correct me if I'm wrong, styled uses css underline also. then why the examples on emotion documentation keep using css for styled?

I have this question because I had some nested selector with dynamic style composition, which works in 9.1.5 but broke in 9.2.6, however I was not able to reproduce in a simplified version of our project. and by removing the css fixes our problem.

[mxstbr]

(styled-components author here, don't know if this also applies to emotion but I assume it does)

This works:

const dynamicStyle = css`
  color: ${props => props.color};
`

This doesn't, because the function gets stringified:

const dynamicStyle = `
  color: ${props => props.color};
`

[kossel]

Didn't expect to see famous mxstbr's reply here 😄 .
So what you said is true in emotion also, however for this case (the documentation) we are already using styled
and this works, then is the css still needed here?

const getDynamicStyle = props=> `color: ${props.color};`

const Button = styled('button')`
  ${getDynamicStyle}
`

PS: on the other hand, this doesn't work without css and works with css

const getDynamicStyle = props => `${props.color && `color: ${props.color};`}`

const Button = styled('button')`
  ${getDynamicStyle};
`

changing it to this can solve the problem

const getDynamicStyle = props => `${props.color ? `color: ${props.color};` : ''}`

[mitchellhamilton]

@kossel The example you provided shows why it's necessary. Also, if you want to interpolate objects with styles, you need to use css. Not using it makes it confusing since the styles stringify differently than if you're using css.

Also, using css means that the styles can be minified with a babel plugin, formatted with prettier and syntax highlighted with an editor extension.

[kossel]

Thanks for the clarification!

Also, using css means that the styles can be minified with a babel plugin, formatted with prettier and syntax highlighted with an editor extension.

~I wonder where I can get a editor extension for emotion~
nvm using styled-component's extension

[sgnl]

Also, using css means that the styles can be minified with a babel plugin, formatted with prettier and syntax highlighted with an editor extension.

This is very clear. Thank you.