created: 2024-04-08T06:00:19.223Z

pup をつかって使われていない css 定義を探す

CSS 定義というのはとにかく消し忘れしやすいもので、簡単に「使ってるかどうかわからない」CSS 定義が増えがち。react ではなく erb のようなテンプレートエンジンをつかって html を生成しているプロジェクトでは、pup を使うと簡単に不要になっている CSS 定義を見つけることができて便利だった。

pup とは

  • grep のように条件にマッチするものだけ出力してくれるツール
  • grep とは違って正規表現ではなく CSS セレクタを指定する
  • html をパースしてマッチする DOM を出力してくれる

具体的な使い方

該当する DOM があると表示される。

$ pup --color --plain --file ./index.html '.is-hidden'
<span class="max-length-caption is-hidden" data-max-length="255"></span>

例 2

ディレクトリ配下すべてを探す用例。

  • 拡張子が *.html.ep となっているファイルをあつめて
  • xargx で pup を実行
    • この例では class="logout" といった指定がされている DOM を探させている
$ find ./templates -name '*.html.ep' \
    | xargs -I{} pup --color --plain --file {} '.logout li'

オプションはこの辺りをつけている。

-c --color print result with color -f --file file to read from -p --plain don't escape html

アレ何? 大事典
[ad] アレ何? 大事典
佐々木 正孝, 篠崎 晃一 (単行本)