Gruntプラグイン: selector4096

IE9以下で4096個以上のセレクターがあるとスタイルが反映されなくなるバグのチェックを行うGruntプラグイン、selector4096を作った。CSSプリプロセッサーでネストしつつ@extendするとぽんぽんセレクター増えていくので、最近はまめにチェックするようにしている。自己最多記録は3400くらいで、バグに引っかかったことはまだない。

npmで普通にインストールした後、Gruntfile.jsに以下のように書いて準備完了。

grunt.initConfig({
  selector4096: {
    all: ['src/css/**/*.css']
  }
});

grunt.loadNpmTasks('grunt-selector4096');

読み取り専用タスクなので、destとかは必要ない。

$ grunt selector4096:all

実行すると、src/css/以下のすべてのCSSファイルがチェックされ、2047以下だとセレクター数を教えるメッセージのみ、2048以上だと警告のみで続行、4096以上だと警告してタスクが止まる。

Running "selector4096" (selector4096) task
>> File "test/fixtures/100.css" had 100 selectors. Looks good.
>> File "test/fixtures/2048.css" had 2048 selectors. Not bad, but not good either.
Warning: File "test/fixtures/4096.css" had 4096 selectors. Split to avoid bug on ~IE9. Use --force to continue.

メッセージはこんな感じで、CSSファイルのパス・セレクター数・評価が出力される。4096以上でも警告のみにするオプションとかはあっても良さそう。

grunt-css-metricsがもっと色々総合的にできるならこれで良さそうと思っていたんだけど、ふたつしか機能がなくそれほどでもなかった。それに単機能なGruntプラグインを組み合わせる方が小回り効いて良いんではないかなーとも考えているので、セレクタ数えて殺すみたいなだけのを作ることにした。