一索

クジャクは夜にプログラミングします

CSS Refactor(仮)を作りました。

CSSリファクタリングするツールを自作のCSSパーサーを窓から投げ捨てて作りました。超チューニング祭の反省会その1って感じです(多分CSS Spriteがその2に続く)。

このツールは、HTMLファイルを指定するとそのファイルが読み込んでいるCSSを調べて、全てのHTMLで使われていないセレクタやプロパティを削除してCSS上書きします。

超チューニング祭のCSSだと、猫の日セレクターを消し去ったり、上書きされまくっているgradientを消し去ったりを全部やってくれます。

注意点

  • 上書きします。dry runは作っていません。
    • オリジナルのファイルがgit管理下にある場所で使うだろう、という考えで現在こうなっています。
  • HTMLに記述されていないJSから動的に使われるクラスは消えます。
    • これは対応が厳しい。
  • テストとか無い、プロトタイプな実装です……。
    • 当分npmとかに登録するつもりはないです。

使い方

まだ、npmに登録したりはしていないので、git cloneで取得し、binディレクトリにパスを通し、css-refactor *.htmlみたいな感じでコマンドを実行してください。

$ git clone https://github.com/ylqjk/css-refactor.git ~/css-refactor
$ echo 'export PATH="$HOME/css-refactor/bin:$PATH"' >> ~/.bash_profile
$ css-refactor refactoring-site/*.html

超チューニング祭のCSSとかかなり綺麗になります。

主な未実装な機能

  • @import, styleタグへの対応。
    • linkタグのみ。外部ホストのものも未対応。
  • 省略系プロパティで使われているかの判定。
  • 擬似クラス、擬似要素のプロパティの最適化。
  • 使っていないkeyframesなどの削除。

反省点

普通に三時間ほどで作れました……(いらないセレクターの削除だけなら三十分ほどです)。既存のライブラリをうまく組み合わせることをそろそろ憶えたほうが良いと思いました。バグっていた自作CSSパーサーはお蔵入りしました。