はじめに

こんにちは、エンジニアの佐野です。
とあるプロジェクトで tailwindcss というCSSフレームワークを利用しているのですが、今回 tailwindcss をupgradeすることになりました。
upgrade前のversionが v0.7 で、upgrade後のversionは v1.1.2 です。
メジャーバージョンが上がるので変更点がかなり多いです。
職人による手作業でやろうとすると、ファイル数 × 変更点 という膨大な量になります……
これは手作業でやりたくない……ということで、できる限り自動化してみました。

最終的には、正規表現でカバーしきれない部分以外は自動化できてとても楽だったので紹介します。

tailwindcssとは

tailwindcss.com

CSSフレームワークでは Bootstrap が有名ですが、 tailwindcss は Bootstrap とは大きく異なります。
Bootstrap がボタンなどのレイアウトを準備してくれているのに対し、 tailwindcss はCSSのユーティリティを提供してくれます。
迅速なUI開発のためのユーティリティファーストCSSフレームワーク というのがキャッチコピーのようです。
実際に使ってみると軽快にCSSを記述していけますし、 Bootstrap っぽい見た目にならないというのも嬉しい点です。

The State of CSS というプロジェクトで、CSSフレームワークの満足度調査がされていました。

2019.stateofcss.com

知名度こそ低いものの、満足度が 81% でとても高い数値になっています。
今後もきっと盛り上がっていく ~~と期待している~~ ので、使ってみてはいかがでしょうか。
具体的な利用方法については割愛……

tailwindcss v0.7 -> v1.xへ……

今回の本題である tailwindcss のversion upgradeについて。
tailwindcss 公式にupgrade guideが準備されており、かなり丁寧に記載されています。

Upgrading from v0.x to v1.0 - Tailwind CSS

大雑把に大きい変更だけかいつまむと、

configファイルの記述方法が変更
一部class名の変更
カラーパレットの定義変更

あたりでしょうか。
他にも <ul><ol> タグがデフォルトでCSSリセットされるようになったり、<img><video> タグに display:block がつくようになったりと変更ありますが、雰囲気的にはそんな感じ

上記の 一部class名の変更、 カラーパレットの定義変更 が作業量が多くなってしまうので手作業でやりたくない……
↓
そうだ、自動化しよう
というのがモチベーションでした。

手動でやりたくないので出来るだけ自動化する

今回のプロジェクトでは、バックエンドに Laravel、フロントエンドに Vue.js という構成だったので、

bladeファイル(Laravel)
scssファイル
vueファイル

と3種類のファイルで置換を行う必要がありました。
いろいろ考えた末に、sedコマンドで置換を行うことに決定。
そして出来上がったものがこちら

👀目がチカチカする

こちらのsed scriptを作業環境に配置して、 sed -i -f ./tailwind-replacer.sed {対象ファイル名} で実行すればclass名が置換されます。
cssファイルだけ一括で実行したいというときには find ./resources/css -name '*.css' | xargs -t -n 1 sed -i -f ./tailwind-replacer.sed という感じにfindコマンドで対象ファイルを選択して実行してください。
このscriptでは tailwindcss をカスタマイズしないで使っている環境向けに記載してあるので、カラーパレット定義など変更している際は、合わせて変更してください。
(ちなみに弊社はカスタムして使っているので書き換えました)

css class名に上手くマッチさせるために
(単語境界)(置換前class名)(スペース or 改行 or タブ or :;") と条件を書いたあたりが肝です。
前後とも単語境界でマッチさせてしまうと、各class名の - が単語境界と認識されてしまって、 bg-blue を bg-blue-500 に置換した際に、 bg-blue-500-900 みたいなclass名が生成されてしまいます……
置換先で、class名後部にてマッチした文字を後方参照して、再度配置すれば構文エラーも発生しません。