Create React App で CSS-in-JS ライブラリ Linaria を使ってみる

プロジェクトの作成

Create React Appでプロジェクトを作成します。
今回はTypeScriptで作成。

$ npx create-react-app linaria-test --template typescript

作成したlinaria-test をカレントにします。

$ cd linaria-test

Linariaのインストール

$ yarn add @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker

webpack-loaderもインストールします。

$ yarn add -D @linaria/webpack-loader

Create React App用のWebpack設定ライブラリ

Linariaはwebpack.config.jsを編集する必要があります。
Create React App 環境ではwebpack.config.jsが隠蔽されているので、これを編集できるようにします。
（Create React App を使用していなく、webpack.configを編集できる環境の場合は飛ばしてください）

ejectして編集する方法もありますが、今回はライブラリを導入して上書きで動作させます。

$ yarn add -D customize-cra react-app-rewired

package.jsonを編集してreact-app-rewiredから起動するようにします。

package.json

"scripts": {
	"start": "react-app-rewired start",
	"build": "react-app-rewired build",
	"test": "react-app-rewired test --env=jsdom",
	"eject": "react-scripts eject"
},

webpack.configの編集

通常はwebpack.config.jsを編集しますが、先ほどreact-app-rewiredを使えるようにしたので、config-overrides.jsというファイルを作成します。
このファイルを編集することで、Create React App 標準のwebpack.config.jsを生かしつつ上書きで設定ができるようになります。

config-overrides.js

const { useBabelRc, override, addWebpackModuleRule } = require('customize-cra')

module.exports = override(
  useBabelRc(),
  addWebpackModuleRule({
    test: /\.(tsx|ts)$/,
    use: [
      { loader: 'babel-loader' },
      {
        loader: '@linaria/webpack-loader',
        options: {
          cacheDirectory: 'src/.linaria_cache',
          sourceMap: process.env.NODE_ENV !== 'production',
        },
      },
    ],
  }),
)

jsの場合はtsx|tsをjsx|jsに置き換えてください。

次に、.babelrcを下記のように新たに作成します。

.babelrc

{
	"presets": [
		["react-app", { "flow": false, "typescript": true }],
		"@linaria"
	]
}

これで設定は完了です。Linariaを使う準備ができました。

$ yarn start

で、開発をはじめましょう。

スタイルの書き方

styled-componentsのようにコンポーネントとして作成する方法と通常のスタイルのようにclassNameで指定する方法があります。

最初はコンポーネントの書き方。

import { styled } from '@linaria/react'
const Title = styled.h1`
	font-size: 23px;
`
function App() {
	return (
	<div className="App">
		<Title>タイトル</Title>
	</div>
	)
}

次は、classNameに指定する書き方。
インポートするファイルが違うのに注意しましょう。

import { css } from '@linaria/core'
const title = css`
	font-size: 30px;
`
function App() {
	return (
	<div className="App">
		<h1 className={title}>タイトル</h1>
	</div>
	)
}

HTMLの出力はこのようにクラス名が変換されます。

<h1 class="tuwg8pj">スタイル設定</h1>

ファイルの書き出し

ビルドしてファイルの確認をしてみましょう。

$ yarn build

デフォルト設定の場合build/static/cssにCSSファイルが書き出されいてると思います。