導入

https://emotion.sh/docs/introduction

Introduction

Emotion は生産性と柔軟性の高い CSS in JS ライブラリです。本ライブラリは、glam, glamor, styled-components, glamorous といった既存のライブラリから影響を受けています。Emotion は文字列やオブジェクトを使って、素早くスタイルをアプリケーションに当てていくことができます。また、CSS に特有な問題を防ぎ、予測可能で組織立った構成を可能にします。ソースマップとラベルを用いているため、Emotion は優れた開発者体験を提供します。また heavy caching と insertRule を製品版に用いることで、優れた実行速度を持ちます。(訳注: heavi caching 以降、正確にわからない。)

Emotion is a performant and flexible CSS-in-JS library. It’s inspired by many other CSS-in-JS libraries like glam, glamor, styled-components and glamorous. It allows you to style applications quickly with string styles or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching and insertRule in production.

ドキュメントの例示には React を用いていますが、Emotion は React 専用というわけではありません。ただし、styled component を export するreact-emotion と preact-emotion の二つは例外で、これはそれぞれ React と Preact 上でしか動きません。

The examples in this documentation use React but Emotion is not limited to React. The exceptions to this are react-emotion and preact-emotion that export styled, they require React and Preact respectively. Everything from the emotion package works with any library or framework.

このドキュメントには、すぐに変更が反映される例示がたくさんあります。これらは全て編集可能で、Emotion をインストールしなくてもこの場で試すことができます。例えば以下のコードを変更して、色を変えてみましょう。

This documentation has lots of live examples that look like this, they’re all editable so you can try emotion without installing it. Try changing the color below.

インストール

Install

https://emotion.sh/docs/install

Emotion を導入する方法はいくつかあります。一番簡単な始め方は、emotion npm パッケージを使用することです。

Emotion can be used in many different ways. The easiest way to get started is to use the emotion package.

bash
yarn add emotion

// npm を使っている場合には
npm install --save emotion

次に必要なものを import します。例えば style を持った class 名を作成するには css を import して使用します。

To use it, import what you need, for example use css to create class names with styles.

Emotion
import { css } from 'emotion'

const className = css`
  color: hotpink;
`

const SomeComponent = ({ children }) => (
  <div className={className}>
    Some hotpink text.{children}
  </div>
)

const anotherClassName = css({
  textDecoration: 'underline'
})

const AnotherComponent = () => (
  <div className={anotherClassName}>
    Some text with an underline.
  </div>
)
render(
  <SomeComponent>
    <AnotherComponent />
  </SomeComponent>
)

Style を伴ったコンポーネントの作成

(訳注: Styled Component に非常に似た手法。自分は使わないのでパスします。)

babel-plugin-emotion を合わせて使用する

With babel-plugin-emotion

注意: Create React App を使用した場合には、custom babel plugin を追加することができないので、このセクションは読み飛ばしてください。(訳注: eject したらできそうな気はする。)

Note: If you’re using Create React App, you can’t add custom babel plugins so you can skip this section.

Emotion は、さらなる選択肢として Babel plugin も提供しています。これを使うことでスタイルの最適化と圧縮、それから巻き上げ (訳注: なんのことかわからない) がなされ、さらにソースマップとラベルによって快適な開発体験が提供されます。

Emotion has an optional Babel plugin that optimizes styles by compressing and hoisting them and creates a better developer experience with source maps and labels.

yarn add babel-plugin-emotion

// npm を使用している場合には
npm install --save babel-plugin-emotion

.babelrc

.babelrc に以下の設定を記述していきます。

Emotion はバベルプラグインリストの、一番最初に必ず位置するようにしてください。

"emotion" must be the first plugin in your babel config plugins list.

.babelrc
{
  "plugins": ["emotion"]
}

Babel の env option を使用している場合には、ここにおいても emotion が各環境のプラグインリストの一番最初にこなくてはいけません。

If you are using Babel’s env option emotion must also be first for each environment.

babelrc
{
  "env": {
    "production": {
      "plugins": ["emotion", ...otherBabelPlugins]
    }
  },
  "plugins": ["emotion"]
}

オススメの設定

Recommended config

babelrc
{
  "env": {
    "production": {
      "plugins": [["emotion", { "hoist": true }]]
    },
    "development": {
      "plugins": [
        [
          "emotion",
          { "sourceMap": true, "autoLabel": true }
        ]
      ]
    }
  }
}

CSS

https://emotion.sh/docs/css

Emotion において、スタイリングをする第一の方法は css を用いて (訳注: あくまで emotion の method の一つとしての css のこと)、これに template literal や object や object からなる array を渡し、返り値として class 名を受け取る方法です。

The primary way to style things in emotion is with css, it accepts styles as a template literal, object, or array of objects and returns a class name.

css は tagged template literal として使用することができます。(訳注: someFunction`string` と書くことで someFunction に文字列を引数として渡すことができます。正確な情報に関しては別資料をご覧ください。)

css can be used as a tagged template literal.

someComponent
import { css } from 'emotion'

const color = 'darkgreen'

render(
  <div
    className={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>
)

css は style を object として受け取ることもできます。より踏み込んだ使用法についてはこのページをご覧ください。(訳注: あとでリンクを貼る)

css also accepts styles as an object, for more usage with objects, go here.

someComponent
import { css } from 'emotion'

render(
  <div
    className={css({
      backgroundColor: 'hotpink',
      '&:hover': {
        color: 'lightgreen'
      }
    })}
  >
    This has a hotpink background.
  </div>
)

CSS Props

https://emotion.sh/docs/css#css-prop (訳注: 自分があまり使わなそうなので、後でやる。)

Styled Component

(訳注: 自分が使わないのでパス)