steps emotion takes to work

babel.js

// original code
styled.h1`color:${myColor};`

// Step 1
// emotion creates a function call from
// tagged template expression
styled('h1', css`color:${myColor};`)

// Step 2
// glam converts the tagged template expression to a
// function call and creates className, stylesheets, and vars
styled('h1', css('css-12345', [myColor]))

// Step 3
// emotion pulls the args out and gives them to
// the `styled` higher order component
styled('h1', ['css-12345', [myColor]])

// Step 4 (only step that occurs on the client)
// in styled we call the css function from step 2 ourselves
// this allows us to evaluate any ${props => ...} values
const myFinalClassName = props.className + ' ' + css('css-12345', [myColor])
return createElement('h1', { className: myFinalClassName, ...props })