How to use @emotion/utils - 10 common examples

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
        })
      )
      if (shouldSerializeToReactTree && rules !== undefined) {
        return (

insertStyles() {
    if (this.props.serialized.next !== undefined) {
      // insert keyframes
      insertStyles(this.props.cache, this.props.serialized.next, true)
    }
    let rules = this.props.cache.stylis(``, this.props.serialized.styles)
    if (this.sheet.tags.length) {
      // if this doesn't exist then it will be null so the style element will be appended
      this.sheet.before = this.sheet.tags[0].nextElementSibling
      this.sheet.flush()
    }

    rules.forEach(this.sheet.insert, this.sheet)
  }

const Style = withCSSContext((props: Props, context: CSSContextType) => {
  let rules = ''
  let hash = ''
  if (Array.isArray(props.styles)) {
    props.styles.forEach(style => {
      let renderedStyle = insertStyles(context, style)
      if (renderedStyle !== undefined) {
        // $FlowFixMe
        rules += renderedStyle
        hash += ` ${style.name}`
      }
    })
  } else {
    let renderedStyle = insertStyles(context, props.styles)
    if (renderedStyle !== undefined) {
      rules = renderedStyle
      // $FlowFixMe
      hash += ` ${props.styles.name}`
    }
  }
  if (shouldSerializeToReactTree && rules !== '') {
    return (
      <style>
    )
  }</style>

insertStyles() {
    if (this.props.serialized.next !== undefined) {
      // insert keyframes
      insertStyles(this.props.cache, this.props.serialized.next, true)
    }
    if (this.sheet.tags.length) {
      // if this doesn't exist then it will be null so the style element will be appended
      let element = this.sheet.tags[this.sheet.tags.length - 1]
        .nextElementSibling
      this.sheet.before = ((element: any): Element | null)
      this.sheet.flush()
    }
    this.props.cache.insert(``, this.props.serialized, this.sheet, false)
  }

props.styles.forEach(style => {
      let renderedStyle = insertStyles(context, style)
      if (renderedStyle !== undefined) {
        // $FlowFixMe
        rules += renderedStyle
        hash += ` ${style.name}`
      }
    })
  } else {

let render = (cache, props, theme: null | Object, ref) => {
  let cssProp = theme === null ? props.css : props.css(theme)

  // so that using `css` from `emotion` and passing the result to the css prop works
  // not passing the registered cache to serializeStyles because it would
  // make certain babel optimisations not possible
  if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
    cssProp = cache.registered[cssProp]
  }

  let type = props[typePropName]
  let registeredStyles = [cssProp]
  let className = ''

  if (typeof props.className === 'string') {
    className = getRegisteredStyles(
      cache.registered,
      registeredStyles,
      props.className
    )
  } else if (props.className != null) {
    className = `${props.className} `
  }

  let serialized = serializeStyles(registeredStyles)

  if (
    process.env.NODE_ENV !== 'production' &&
    serialized.name.indexOf('-') === -1
  ) {
    let labelFromStack = props[labelPropName]
    if (labelFromStack) {

injectGlobal,
    keyframes,
    hydrate(ids: Array) {
      ids.forEach(key => {
        cache.inserted[key] = true
      })
    },
    flush() {
      cache.registered = {}
      cache.inserted = {}
      cache.sheet.flush()
    },
    // $FlowFixMe
    sheet: cache.sheet,
    cache,
    getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
    merge: merge.bind(null, cache.registered, css)
  }
}

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}`
        }

        return h(
          finalTag,
          {
            ...data,
            attrs: options.getAttrs ? options.getAttrs(restAttrs) : restAttrs,
            staticClass: undefined,

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) => {

if (typeof props.className === 'string') {
                className = getRegisteredStyles(
                  context.registered,
                  classInterpolations,
                  props.className
                )
              } else if (props.className != null) {
                className = `${props.className} `
              }

              const serialized = serializeStyles(
                styles.concat(classInterpolations),
                context.registered,
                mergedProps
              )
              const rules = insertStyles(
                context,
                serialized,
                typeof finalTag === 'string'
              )
              className += `${context.key}-${serialized.name}`
              if (targetClassName !== undefined) {
                className += ` ${targetClassName}`
              }

              const finalShouldForwardProp =
                shouldUseAs && shouldForwardProp === undefined
                  ? getDefaultShouldForwardProp(finalTag)
                  : defaultShouldForwardProp

              let newProps = {}