How to use @emotion/serialize - 10 common examples

const Styled = withCSSContext((props, context) => {
      let className = ''
      let classInterpolations = []
      let mergedProps = pickAssign(testAlwaysTrue, {}, props, {
        theme: props.theme || context.theme
      })
      if (typeof props.className === 'string') {
        className += getRegisteredStyles(
          context.registered,
          classInterpolations,
          props.className
        )
      }
      const serialized = serializeStyles.call(
        mergedProps,
        context.registered,
        styles.concat(classInterpolations)
      )
      const rules = insertStyles(context, serialized)
      className += `${context.key}-${serialized.name}`
      if (targetClassName !== undefined) {
        className += ` ${targetClassName}`
      }

      const ele = React.createElement(
        baseTag,
        // $FlowFixMe
        pickAssign(shouldForwardProp, {}, props, {
          className,
          ref: props.innerRef

test('does not rehash if value is css call return value', () => {
  const val = css`
    color: hotpink;
  `
  const tree = renderer.create(
    <div>
      <div>
    </div>
  )
  expect(serializeStyles([val])).toBe(val)

  expect(spy.mock.calls[0][1]).toBe(val)
  expect(tree.toJSON()).toMatchSnapshot()
})
</div>

let css = (...args: Array) => {
          if (hasRendered && process.env.NODE_ENV !== 'production') {
            throw new Error('css can only be used during render')
          }
          let serialized = serializeStyles(args, context.registered)
          if (isBrowser) {
            insertStyles(context, serialized, false)
          } else {
            let res = insertStyles(context, serialized, false)
            if (res !== undefined) {
              rules += res
            }
          }
          if (!isBrowser) {
            serializedHashes += ` ${serialized.name}`
          }
          return `${context.key}-${serialized.name}`
        }
        let cx = (...args: Array) => {

const mergedProps = {
          ...data.attrs,
          theme: injections.theme,
          ...parent.$evergarden
        }
        const domProps = { value }

        if (data.class) {
          className += getRegisteredStyles(
            cache.registered,
            classInterpolations,
            clsx(data.class)
          )
        }

        const serialized = serializeStyles(
          styles.concat(classInterpolations),
          cache.registered,
          mergedProps
        )

        insertStyles(
          cache,
          serialized,
          typeof finalTag === 'string'
        )

        className += `${cache.key}-${serialized.name}`
        if (targetClassName !== undefined) {
          className += ` ${targetClassName}`
        }

renderChild = (context: CSSContextType) => {
    const { css } = this.props
    const serialized = serializeStyles([css])
    const rules = context.stylis(`.css-${serialized.name}`, serialized.styles)
    if (this.sheet === undefined && isBrowser) {
      this.sheet = new DynamicStyleSheet(StyleSheetOptions)
      this.sheet.inject()
    }
    if (isBrowser) {
      this.sheet.insertRules(rules)
    }

    const child = this.props.render(serialized.cls)
    if (shouldSerializeToReactTree && rules.length !== 0) {
      return (

function css(...args: Array): SerializedStyles {
  return serializeStyles(args)
}

render(h, { children, data, parent }) {
      const cache = parent.$emotionCache

      const { value, as, ...restAttrs } = data.attrs || {}
      const mergedProps = { ...data.attrs, ...parent.$evergarden }
      const finalTag = as || tag

      const serialized = serializeStyles(
        styles,
        cache.registered,
        mergedProps
      )
      insertStyles(cache, serialized, typeof finalTag === 'string')
      
      const className = `${cache.key}-${serialized.name}`

      return h(
        finalTag,
        {
          ...data,
          class: className,
          attrs: getAttrs ? getAttrs(restAttrs) : restAttrs,
          domProps: {
            ...(value && { value })

warnedAboutCssPropForGlobal = true
  }
  let styles = props.styles

  if (typeof styles === 'function') {
    return (
      
        {theme => {
          let serialized = serializeStyles([styles(theme)])

          return 
        }}
      
    )
  }
  let serialized = serializeStyles([styles])

  return 
})

let css = function(...args) {
    let serialized = serializeStyles(
      args,
      cache.registered,
      this !== undefined ? this.mergedProps : undefined
    )
    insertStyles(cache, serialized, false)
    return `${cache.key}-${serialized.name}`
  }

let render = (cache, props, theme: null | Object, ref) => {
  let type = props[typePropName]
  let registeredStyles = []

  let className = ''
  if (props.className !== undefined) {
    className = getRegisteredStyles(
      cache.registered,
      registeredStyles,
      props.className
    )
  }
  registeredStyles.push(theme === null ? props.css : props.css(theme))
  const serialized = serializeStyles(cache.registered, registeredStyles)
  const rules = insertStyles(cache, serialized, typeof type === 'string')
  className += `${cache.key}-${serialized.name}`

  const newProps = {}
  for (let key in props) {
    if (
      hasOwnProperty.call(props, key) &&
      key !== 'css' &&
      key !== typePropName
    ) {
      newProps[key] = props[key]
    }
  }
  newProps.ref = ref
  newProps.className = className