prettier-plugin-tailwindcssを適用したらスタイルが壊れた話

皆さんこんにちは。株式会社バベルでエンジニアをしている uhyo です。バベルが提供しているaileadというプロダクトではスタイリングにTailwind CSSを使用しています。

恥ずかしながら、これまでTailwind CSSを十分に活用するための環境が整っていませんでした。具体的には、Tailwind CSSのクラス名を書くところにリンターが適用されていなかったり、クラスの並び順がとても自由で開発に支障をきたしたりしていました。

そこで、今回prettier-plugin-tailwindcssをコードベースに導入しました。これは、言わずと知れたコードフォーマッターPrettier向けのプラグインで、Tailwind CSSのクラス名をいい感じに並び替えることでコードに少し秩序をもたらしてくれるものです。

コードフォーマッターの原則は、コードの挙動を変えないことです。そのため、理想的にはprettier-plugin-tailwindcssを適用してもプロダクトの見た目が変わることはないはずでした。しかし、現実は甘くなく、我々のプロダクトでは見事にスタイルが壊れてしまったのです。幸い、この変更のリリースまでに1週間ほど余裕を持たせていたため、本番環境にデプロイされる前に問題に気づくことができました。

この記事ではどのようにprettier-plugin-tailwindcssがスタイルを壊したのか、そしてその対策について解説します。

prettier-plugin-tailwindcssの動き

prettier-plugin-tailwindcssの動きについて解説しておきます。基本的には、例えばReactであればJSXのclassName属性に与えられた文字列が並び替えの対象となります。

例えばこんな感じのdivがあった場合、

<div className="relative flex justify-center items-center w-12 h-full text-gray-800">Hello</div>

prettier-plugin-tailwindcssは、className属性の値を次のように並び替えます。

<div className="relative flex h-full w-12 items-center justify-center text-gray-800">Hello</div>

何となく少し分かりやすくなったような気がします。（順番が内部の定義順に由来しているからか、px→pyの順なのにh→wになっているなど完璧にセマンティックな順番になっていない点が個人的にあまり好きではないですが）

CSSでは、クラス名の順番は結果に全く影響しません。後に書かれたクラス名のほうが優先されるといったことはありません（スタイルの適用順に関してはクラス名の並び方が参照されることはなく、CSSの宣言のカスケーディングのルールにしたがって決められます）。そのため、どのように並び替えてもコードの意味には影響を与えないはずです。

どのようにスタイルが壊れたか

しかしながら、我々のプロダクトではprettier-plugin-tailwindcssが行った修正が原因でスタイルが崩れてしまう事件が発生しました。スタイル崩れの原因となった変更はこれです。

-<div className="relative w-full px-1　z-10">
+<div className="relative z-10 w-full　px-1">

どこがまずいかお分かりでしょうか。

そう、変更前のクラス名においてpx-1とz-10の間のスペースが全角スペース (U+3000) なのです。prettier-plugin-tailwindcssの挙動は順番を入れ替えつつスペースはそのままにするというもので、変更後は全角スペースがw-fullとpx-1の間にあります。

実は、Web仕様上クラス名の区切りとして使えるのはASCII Whitespaceだけです。つまり全角スペースはクラス名の区切りではなく、上の場合はpx-1　z-10という名前の1つのクラスとしてブラウザに解釈されていました。このことは次のようなJavaScriptコードで確かめられます。

const div = document.createElement('div');
div.className = "relative w-full px-1　z-10";
[...div.classList] // (3) ['relative', 'w-full', 'px-1　z-10']

一方で、prettier-plugin-tailwindcssはクラス名の区切りを正規表現の\sで判定していたため、U+3000のような非ASCIIの空白も区切りとして扱っていました。ここで実際のセマンティクスとの乖離が生じたため、prettierを走らせるとブラウザが認識するクラス名が変わってしまい、実際の挙動が変わってしまう事態に至ったのです。これはprettier-plugin-tailwindcssのバグです。全角スペースなんか混ぜるのが悪いとはいえ、与えられたクラス名文字列の意味を勝手に変えてはいけません。

全角スペースが混ざると両隣のクラスが巻き込まれて無効化されるので意図したデザインにならないはずです。そのため大抵の場合は気づけそうですが、CSSというのはデザインの変更に伴って気付かないうちに形骸化することは日常茶飯事なので、テストやQAでは気づけない場合もあります。上の例ではpx-1とz-10が意味を成していませんでしたが、px-1はともかくz-10はこの時点では不要でした。むしろ、prettier-plugin-tailwindcssの適用後にz-10が意図せず有効化されたことによって逆にデザイン崩れが発生したのです。

対策

筆者がこの問題を認識したとき、まずこの問題の影響範囲を知る必要がありました。そのためにはクラス文字列に全角スペース (U+3000) が混ざっているところを見つける必要がありますが、良く考えたらそもそもクラス名に全角スペースが混ざっているのに気づけないのは良くありません。それはそうですね。そして、このような問題は機械的に検知すべきです。

実はこのプロダクトではeslint-plugin-tailwindcssが導入されていませんでした。このプラグインにはno-custom-classnameというTailwindのクラス名以外を弾いてくれるルールがあるため、これを導入すればpx-1　z-10のように間に全角スペースが入ったクラス名を検知できるようになります。

……と思っていたのですが、実はeslint-plugin-tailwindcssにも同じバグがあったため、全角スペースが混ざっていても検知できませんでした。

真の対策

筆者がprettier-plugin-tailwindcssとeslint-plugin-tailwindcssにそれぞれプルリクを送り、修正されました。

• https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/166
• https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/246

eslint-plugin-tailwindcssは3.12.1でこの変更がリリースされています。prettier-plugin-tailwindcssはマージされていますが、リリース時期は不明です。

とりあえずeslint-plugin-tailwindcssを最新版に上げてエラーがないことを確認すれば、この記事で紹介した問題は回避できます。とても安心ですね。

まとめ

この記事では、Tailwindのクラス名に全角スペースが混ざってしまったことにより発生した問題とその対応策を紹介しました。