linariaで生成されるクラス名を名付けた通りのクラス名にする

小ネタです。

ちょくちょくlinariaを使ってコンポーネントのスタイリングをしているのですが、linariaを通して生成されるクラス名がランダムな文字列になってしまいます。

大きく困るわけではないのですが、少なくとも開発時はブラウザの検証ツールで見たときのクラスメイト、自分が名付けたクラス名が一致している方が開発しやすいです。

ということで、その設定方法を紹介します。

displayName

なんてことはない、Configrationの説明の最初に書いてありました。

https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md

displayNameというプロパティをtrueにすればOKです。

Enabling this will add a display name to generated class names, e.g. .Title_abcdef instead of `.abcdef'. It is disabled by default to generate smaller CSS files.

ランダムな文字列にしているのは少しでもCSSのファイルサイズを小さくしたいからだそうです。

開発時のみ有効にする

Next.jsと統合して利用している場合は、以下のように実装することで開発時のみdisplayNameを有効にできます。

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
const withLinaria = require('next-linaria');

module.exports = phase => {
  return withLinaria({
    linaria: {
      /**
       * Dev Serverのときだけ意味あるクラス名にする
       */
      displayName: phase === PHASE_DEVELOPMENT_SERVER,
    },

ポイントは以下の2点です。

設定全体を関数にする

関数にすることで、引数からphaseを受け取ることができます。

phaseを定数と比較することで、Dev Server起動中かどうかを判定する

定数PHASE_DEVELOPMENT_SERVERと比較し、一致していれば開発サーバーの起動中です。これがTrueのときだけ、クラス名を意図した通りのものにできます。

---

以上です。