インストール

Create-react-app を使っている場合は、babel-macro を使うしかないよう。(いまのところこれなら動く)

install
yarn add -D emotion # core ではないほうをつかう。
bable-macro の場合
import { css, keyframes, injectGlobal, flush, hydrate } from 'emotion/macro'

const style = css`
  color: hotpink;
`

<div className={style}></div>

と思ったが以下でもきく @emotion/core

babel-plugin-emotion　を使ったバージョンとどちらがいいのかは謎。一応 plugin をかました場合の方がパフォーマンス等はいいらしい。

@emotion/core
import { jsx, css } from '@emotion/core'
const style = css`
  color: hotpink;
`
const Advertiser = ({ data, loading }) => {
  const { advertiser } = data
  if (loading) return <p>Loading...</p>

  console.log(advertiser)

  const { insertionOrders } = advertiser
  return (
    <div css={style}>

今のところの最適解

jsx は emotion core から。css だけ @emotion/css/macro' から。 最適化が一応なされ、sourceMap もつくので、JS の該当箇所に移動できる。

いまのところ
/** @jsx jsx */
import InsertionOrder from './InsertionOrder'
import { jsx, Grobal } from '@emotion/core'
import css from '@emotion/css/macro'
const style = css`
  color: hotpink;
`
const Advertiser = ({ data, loading }) => {
  const { advertiser } = data
  if (loading) return <p>Loading...</p>

  console.log(advertiser)

  const { insertionOrders } = advertiser
  return (
    <div css={style}>