vanilla-extract の class 名出力をハッシュのみにしない方法

こんにちは森田です。
今回は、vanilla-extract の小ネタを紹介します。

vanilla-extract は、TypeScript で CSS をスタイリングするライブラリです。
以前、弊社メンバーが基本の記事も書いておりますので、概要は以下を参照ください。

vanilla-extract が出力する class 名

vanilla-extract は出力する class 名にユニークな文字列を付与し、スコープを与えます。
CSS Modules と同じイメージです。

例えば以下のような class を付与している場合、

<div className={Myfile.Styles}>

上記をプロダクションビルドすると、以下のようなランダムな文字列の class名に変換されます。

<div class="hnw5tz3">

このような6桁のランダムなハッシュ値に置き換えられます。
CSS Modules などはコンポーネント名＋ハッシュ値なのですが、vanilla-extract はハッシュ値のみになりますね。

基本的には、このままの設定でスタイリングするには問題はありません。
が、今回はイレギュラーな問題が発生しました。

アップデートでハッシュ値が変わった

付与されるハッシュ値は固定化され基本的には変わることはありません。
しかし、Node.js や vanilla-extract のアップデートを行ったところハッシュ値が変わってしまいました。

ハッシュ値が変わっても何も困らないことも多いと思います。
しかし、Google オプティマイズなどの後から設定する CSS などでハッシュをセレクタとして使っている場合、ハッシュが変わると CSS が外れてしまいます。

ハッシュのみにしない設定

vanilla-extract には出力する class を設定する identifiers オプションが用意されています。

オプションには、次の 2 つの値のいずれかを設定できます。

• "short" ：6桁のハッシュのみ
• "debug" ：ファイル名＋コンポーネント名＋ハッシュ
  

vanilla-extract は開発環境では debug 、本番環境では short でデプロイされます。
なので、本番環境でも debug になるように設定します。

options: {
  identifiers: 'debug', 
}

オプションの設定方法は、webpack, Vite, Next.js プラグインなどそれぞれ微妙に違うのでドキュメントを確認してください。

この設定で、本番環境でも以下のように出力されるようになりました。

<div class="myfile_mystyle_hnw5tz3">

個人的には常時この設定でもいいのでは？と思ったりしています。