Gatsby.js+Emotionで出力される名前をわかりやすくする

この記事では、Emotionで出力されるclass名を分かりやすくする際にGatsby.jsだとハマりやすいところについて説明します。

Emotionの出力class名を分かりやすくする

Emotionを使ってスタイリングをする場合、通常だと以下のようなclass名が自動付与され、CSSが当たります。
しかし、自動付与された名前は非常に分かりづらいですよね。

デフォルトでの出力


<div class="css-wa7ge8 ei2z3ih2">

どのコンポーネントのどの要素かが分かりづらく、CSSのコード修正の際にどこを直せばいいかを把握するのに手間がかかってしまいます。

通常の場合、この問題はEmotionのbabelプラグインを適用することで簡単に解決することができます。

プラグインを適用すると Contextual Class Names という機能が有効になり、以下の要素を組み合わせた文字列を自動生成のclass名に付与してくれます。

この機能を使えば、例えばHeaderファイルのTitleという要素の場合には以下のように出力してくれます。

分かりやすくなった出力


<div class="css-wa7ge8-Header--Title>

先ほどよりもグッと分かりやすくなりましたね！

Gatsby.jsの場合も同じような設定をすれば良いのですが、少し書き方が違って悩んだので、その説明をしていきます。

まずはbabelプラグインをインストールしましょう。

インストールコマンド


yarn add --dev @emotion/babel-plugin

この後は設定を記述していきます。

Emotionのbabelプラグインの説明では「.babelrcファイルを作成して、設定を追記してください」というようなことが書いてありますが、Gatsbyを併用している際に書くべき場所はGatsby-config.jsに変わります。

Gatsby-config.jsファイル内のplugins指定の中にgatsby-plugin-emotionを読み込んでいるところがありますので、以下のようにoptionsを追記していきましょう。

設定の追加


{
  resolve: `gatsby-plugin-emotion`,
  options: {
    autoLabel: true,
    labelFormat: '[filename]--[local]'
  }
},

この際にも注意点が一つあります。

公式の説明では「autoLabelの値には 'dev-only' | 'always' | 'never' が設定できる」と書いてありますが、それらの値を指定しようとすると「"autoLabel" must be a boolean」とエラーが出てしまいます。

どうやらgatsby-plugin-emotionでは指定の方法が変わっているようなので、autoLabel: trueと指定するようにしましょう。

※2020年12月末追記：gatsby-plugin-emotionの5系から公式の説明通りautoLabel: "always"のような書き方が可能になっていました。

labelFormatについては[local]、[filename]、[dirname]や記号などを自由に組み合わせて出力できます。

上記の設定の場合は以下のように出力され、どのファイルのどのコンポーネントに関係する記述なのかが一目でわかるようになりました。

Gatsby環境でEmotionのclass出力を変更するときの注意点は以下の２点でした。

複数の技術を組み合わせていくと、詰まるところが増えてくるので、安定した組み合わせを模索していきたいですね。

この記事をシェアしてくれると小躍りします