使用するバージョン
react : 17.0.2
linaria : 3.0.0-beta

プロジェクトの作成

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ファイルが書き出されいてると思います。