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などの削除。