handling breakpoints /w emotion

emotion-breakpoints.js

/** @jsx jsx */
import { jsx, css } from '@emotion/core'

const breakpoints = {'mobile': 320, 'tablet':768, 'desktop':992, 'desktop-xl': 1200};

const mq = (size) => `@media (min-width: ${breakpoints[size]}px)`


render(
  <div>
    <div
      css={{
        color: 'green',
        [mq('mobile')]: {
          color: 'gray'
        },
        [mq('tablet')]: {
          color: 'hotpink'
        }
      }}
    >
      Some text!
    </div>
    <p
      css={css`
        color: green;
        ${mq('mobile')} {
          color: gray;
        }
        ${mq('tablet')} {
          color: hotpink;
        }
      `}
    >
      Some other text!
    </p>
  </div>
)