遂に別々に管理するのが面倒になったので、PostCSSを使ったツールにGruntプラグインも同梱するようにした。grunt-postcssなどから使う方が効率的なので、もはや単体のGruntプラグインはメンテナンスが放棄されがちだ。CSSWring v2.1.0CSS MQPacker v2.1.0には既に同梱されている(まだPostCSS v4.0.0にはなっていない)。

load-grunt-tasksなどのGruntプラグイン読み込み自動化パッケージの恩恵には預かれないため、Gruntfile.jsで自前で読み込んでやる必要がある。

module.exports = function (grunt) {
  grunt.loadNpmTasks('css-mqpacker');
  grunt.loadNpmTasks('csswring');
};

両者とも設定はないが、PostCSSのprocess()の第二引数にしていするオプションをoptionsを使って指定できるようにはなっている。のでSource Mapsも自在に吐ける。継承したい場合はmap: trueを指定してやるだけで、PostCSSが賢いのでだいたい動く。


PostCSSを利用する単体のGruntプラグインのgrunt-postcssに対する優位性は、peerDependenciesによるPostCSSのバージョンの束縛を無視できることだ。

grunt-postcssを使う場合、要求するPostCSSのバージョンが食い違っているもの同士を組み合わせることができなくなる。peerDependenciesでそれぞれバージョンを束縛できるが、そうなると食い違うものがそもそもインストール出来なくなる。解決のためにはパッケージ側のアップデートが必須になる。

単体のGruntプラグインの場合はそれぞれが独自にPostCSSをインストールして使うので、ほとんどのケースで組み合わせることが可能になる。その分、無駄が多くなるということでもあるけれども。

この辺りはGruntもPostCSSもプラグイン・システムとして失敗した感がある部分で、もうちょっとなんとかしないとメンテナンスが放棄されているけどまだ動くものが最新版の環境ではうまく動かせなくなってしまう。その点、gulpではgulpパッケージがdependenciesにもpeerDependenciesにも現れないように書くべきとしており、柔軟性と将来性で優っている。