How to use @emotion/core - 10 common examples

if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {
        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
      }
      styles.push(args[0][0])
      let len = args.length
      let i = 1
      for (; i < len; i++) {
        if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {
          console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
        }
        styles.push(args[i], args[0][i])
      }
    }

    // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
    const Styled: PrivateStyledComponent<p> = withEmotionCache(
      (props, context, ref) =&gt; {
        return (
          
            {theme =&gt; {
              const finalTag = (shouldUseAs &amp;&amp; props.as) || baseTag

              let className = ''
              let classInterpolations = []
              let mergedProps = props
              if (props.theme == null) {
                mergedProps = {}
                for (let key in props) {
                  mergedProps[key] = props[key]
                }
                mergedProps.theme = theme
              }</p>

function count(n = 9, start = 1) { // eslint-disable-line consistent-return
  const list = range(start, n).map(i => css`
    &:nth-child(${i}) {
      animation: ${spin} 1s ${delay(0.12, n, i - 1)}s infinite linear;
    }
  `);
  return css(list.join('\n'));
}

width: "100%",
  borderBottomLeftRadius: theme.borderRadius,
  borderBottomRightRadius: theme.borderRadius,
  border: `1px solid ${theme.color.error}`,
  borderTop: 0,
  transform: "translate3d(0, 100%, 0)",
  position: "absolute",
  backgroundColor: lighten(theme.color.error, 60),
  boxShadow: `0px 3px 5px #d3d1d3`,
  // Nudge up just a little bit to look blended into the form
  bottom: 2,
  left: 0,
  zIndex: theme.zIndex.formFieldError,
}))

export const floatIn = keyframes({
  from: {
    opacity: 0,
    transform: "translate3d(0, -6px, 0)",
  },
  to: {
    opacity: 1,
    transform: "translate3d(0, 0, 0)",
  },
})

export const resetTransform = keyframes({
  to: {
    transform: "none",
  },
})

// @flow
import * as React from 'react'
import { withCSSContext } from '@emotion/core'
import type { InsertableStyles, CSSContextType } from '@emotion/types'
import { insertStyles, shouldSerializeToReactTree } from '@emotion/utils'

type Props = {
  styles: InsertableStyles | Array
}

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

border-color: transparent;
      border-style: solid;
      border-top-width: 0;
      transform: translate(50%, 50%);
      margin-left: ${x + 'px'};
      margin-top: ${y + 'px'};
      border-right-width: ${size / 2 + 'px'};
      border-bottom-width: ${size / 2 + 'px'};
      border-left-width: ${size / 2 + 'px'};
      border-bottom-color: ${color};
    `,
    ...props
  })
})
// $FlowFixMe
let CacheContext = CacheProvider._context

let hasOwnProperty = Object.prototype.hasOwnProperty

let ExperimentTriangle = createTriangle(({ x, y, size, color, ...props }) => {
  let cache = CacheContext._currentValue

  let className = ''
  const serialized = css`
    position: absolute;
    cursor: pointer;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-top-width: 0;
    transform: translate(50%, 50%);

test('keyframes interpolated into plain string', () => {
  const animateColor = keyframes({
    'from,to': { color: 'green' },
    '50%': { color: 'hotpink' }
  })
  const rotate360 = keyframes({
    from: {
      transform: 'rotate(0deg)'
    },
    to: {
      transform: 'rotate(360deg)'
    }
  })

  renderer.create(
    <div>
  )
  expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
            Array [
              Array [
                "\`keyframes\` output got interpolated into plain string, please wrap it with \`css\`.
</div>

render: () => {
      const animation = keyframes(
        css`
          from {
            color: green;
          }
          to {
            color: blue;
          }
        `
      )
      return (
        
          <div>
        
      )
    }
  },</div>

import { css } from '@emotion/core/macro'
import { __makeTemplateObject } from 'tslib'

var templateObject_1

const someVar = css(
  templateObject_1 ||
    (templateObject_1 = __makeTemplateObject(
      ['\n  color: hotpink;\n'],
      ['\n  color: hotpink;\n']
    ))
)

function media(...args) {
  return css`
    @media (min-width: 100px) {
      ${css(...args)};
    }
  `
}

function doThing() {
  return {
    [css({ color: 'hotpink' })]: 'coldblue'
  }
}