Hail2u.net

PostCSS v3の変更点

PostCSS v3.0.0がリリースされ、かなり高速化した。一部互換性のないAPIの変更があるが、多くは内部的な変更でそれほど影響はないような印象だ。

一番大きな変更点はノードの配列名の統一だろう。今までルールセット内の定義の配列はdecls、ルールセットの配列はrulesと分けられていたが、v3.0.0でchildsに統一された。At-ruleでは子ノードに定義をとるもの(@font-faceなど)とルールセットをとるもの(@mediaなど)があるので、別々に処理しなければならないパターンもありえたが、その必要が少し減ることになる。

なおchildsという違和感のある名称はv3.1.0でchildren(かnodesなど)に修正される模様。

もうひとつはSource Mapの生成でインラインのものがデフォルトになったことだ。別ファイルに吐きたい場合は明示的に無効にする必要がある。言い換えるとfromtoが事実上必須ではなくなったということでもある。

var postcss = require('postcss');
var css = '.foo { color: black }';

console.log(postcss.process(css, {
  map: true
}));
// .foo { color: black }
// /*# sourceMappingURL=data:application/json:base64,... */

console.log(postcss.process(css, {
  map: {
    inline: false
  },
  from: 'in.css',
  to: 'out.css'
}));
// .foo { color: black }
// /*# sourceMappingURL=to.css.map */

ただし既に外部Source Mapファイルを参照しているCSSを処理する場合は、そのまま外部Source Mapファイルを更新するようになっている。ここらへんを強制的に変更する手段が用意されていないようで、片手落ちっぽい。

またデフォルトで元ソースを埋め込むようにも変更になった。微妙な部分だけれど、元ソースが不要になるとパス解決の面で楽ができると思うので、歓迎できる変更と捉えている。


速度の改善がメインのようなので、既存のコードはちょっとした変更だけで動くように思う。Source Mapsだけには注意してやりたい。

CSSWringは少々手を入れる必要があったが、簡単な変更でだいたい大丈夫そうだ。ついでにCLIツールで出力ファイル名がなかった場合にインラインでSource Mapを埋め込むようにしておいた。CSS MQPackerは特に変更することなく更新出来た……が、テストがテストになってない(undefiend === undefinedで通ってた)ようなので修正した。