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

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

• ericchiang/pup: Parsing HTML at the command line

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