Gatsby.js v4 + TypeScript にCSS in JSのLinariaを導入する。

この記事は、Zero-Runtime CSSinJSであるLinariaをGatsby.jsのv4環境に導入した時の忘備録になります。

この記事ではGatsbyにLinariaを導入するた為の記事となっています。
Gatsbyの環境構築は別途実施ください。

https://linaria.dev/

0. この記事で扱う環境

環境	バージョン
gatsby	4.4.0
typescript	4.5.4
linaria	2.3.1
gatsby-plugin-typescript	4.6.0
gatsby-plugin-linaria	3.2.0

1. gatsby-plugin-linariaをインストールする。

gatsby-plugin-linariaとlinaria本体を追加します。
https://www.gatsbyjs.com/plugins/gatsby-plugin-linaria/

yarn add linaria gatsby-plugin-linaria gatsby-plugin-typescript

Gatsby.jsには既にgatsby-plugin-typescriptがすでに組み込まれているのですが、gatsby-plugin-linariaを用いる都合上、pluginの読み込み順序を確定させてあげる必要がある為、追加しています。

2. gatsby-config.jsに追加する。

gatsby-config.js

module.exports = {
  // ...
  plugin: [
    `gatsby-plugin-typescript`,
    {
      resolve: `gatsby-plugin-linaria`,
      loaderOptions: {
        cacheDirectory: './.cache/caches/gatsby-plugin-linaria'
      }
    },
    // ...
  ]
}

デプロイ先にもよりますが、vercelでデプロイする場合、ビルド時にキャッシュエラーが発生して、ビルドが通らない事がある為、linariaのキャッシュ先をgatsbyのキャッシュ先に固定してあげます。
https://zenn.dev/rabbit/articles/ea23288dd84f40

3. あとはLinariaでコーディングするだけ。

環境設定は以上になります。
あとはLinariaの利用方法に従い、コーディングするだけです。https://github.com/callstack/linaria/blob/master/docs/BASICS.md

今回の環境の注意点として、linariaの本体を追加しているので、
docsにあるimport方法だと、コーディングできない場合があります。

主に使うstyledとcssの互換について最後に掲載します。

styledの場合

// import { styled } from '@linaria/react'
import { styled } from 'linaria/react'

const Main = styled.main`
  color: red;
`

const Home = () => {
  return (
    <Main>
      <h1>Index Page</h1>
    </Main>
  );
}

export default Home;

cssの場合

// import { css } from '@linaria/core'
import { css } from 'linaria'

const main = css`
  color: red;
`

const Home = () => {
  return (
    <main clasName={main}>
      <h1>Index Page</h1>
    </main>
  );
}

export default Home;

終わりに

他のZero-Runtime CSSinJS で有名なvanilla-extractもTypeSafeでとても良いライブラリです。

https://vanilla-extract.style/

現場によってはCSS, SCSS慣れしたデザイナーコーダーが多い場合もあると思うので、
Linariaも同じくらい普及していってほしいなぁという気持ちです。