tailwind-diff check

概要

Tailwind CSSのバージョンや設定ファイルの変更をもとに、利用できるクラスの差分を出力します。
内部的には、Tailwind CSSのビルドを2回実行し、結果をtmpディレクトリに保存し、内容を比較しています。

オプション

※1 configと[before,after]-configがどちらも指定されないときの動作は未定義。どちらかは必ず指定する。
また、たとえばconfigとbefore-configだけを指定した際の動作も未定義。

※2 --packages a bと--packages a --packages bはどちらもOK。詳しくはyargsのドキュメントを参照。

$ npx @charcoal-ui/tailwind-diff check --help
tailwind-diff check

checks diffs due to package updates

Options:
      --version        Show version number                             [boolean]
      --help           Show help                                       [boolean]
      --before-config  tailwind config used in first build              [string]
      --after-config   tailwind config used in second build             [string]
      --packages       packages to be update                             [array]
      --json           print result as JSON format                     [boolean]
  -c, --config         tailwind config file                             [string]

使い方の例

tailwindcssはそのまま、@charcoal-ui/tailwind-configをアップデートする

npx @charcoal-ui/tailwind-diff check -c ./tailwind.config.js --packages @charcoal-ui/tailwind-config@2.8.0

@charcoal-ui/tailwind-configはそのまま、tailwindcssをアップデートする

npx @charcoal-ui/tailwind-diff check -c ./tailwind.config.js --packages tailwindcss@latest

パッケージをアップデートせず、tailwind.config.jsを変更する

手元に一時的にtailwind.config.new.jsのようなファイルを作成した上で以下を実行します。

npx @charcoal-ui/tailwind-diff check --before-config ./tailwind.config.js --after-config ./tailwind.config.new.js

出力の形式

デフォルトの形式

変更内容の詳細は出さず、増減があったかだけを出力します。

$ npx @charcoal-ui/tailwind-diff check --packages @charcoal-ui/tailwind-config@latest --config tailwind.config.js

1 classes added, 0 classes removed.

単に変化が0件であることを確認したいケースなどはこちらが有用です。

JSON形式

--jsonを指定した場合

$ npx @charcoal-ui/tailwind-diff check --packages @charcoal-ui/tailwind-config@latest --json

[{"className":"w-fit","status":"added","css":[".w-fit {\n    width: fit-content;\n}"]}]

この場合、@charcoal-ui/tailwind-configをアップデートするとw-fitというクラスが新しく使えるようになることがわかります。

人間に見やすくするオプションなどはありません。その場合はjqなど、JSONをフォーマットできるコマンドと併用するのが推奨されます。

$ npx @charcoal-ui/tailwind-diff check --packages @charcoal-ui/tailwind-config@latest --json | jq

[
  {
    "className": "w-fit",
    "status": "added",
    "css": [
      ".w-fit {\n    width: fit-content;\n}"
    ]
  }
]

ステータスの種類はaddedまたはremovedの2種類のみです。
クラスが改名した際に「改名した」と教えてくれることはなく、1件の追加と1件の削除としてカウントされます。