PostCSS v2系のRaw Properties

オーガニゼーション化されてロゴもできたPostCSSのv2系では元データの値を格納するキーが追加されている。これのおかげで何もしないと完全に元のCSSと同じCSSを出力できるようになった。ただそれと同時にPostCSSのクリーンアップ機能をそのまま使いたいみたいな時にこの元データを格納するキーを削除する必要があるようにもなった。

例えばプロパティーの値にコメントが含まれるようなケースで気を付ける必要がある。

.test {
  display: block /* comment */;
}

この場合、PostCSSはdecl.valueにクリーンアップ(前後の空白やコメントなどの削除)したblockしか格納しない。そして元データはdecl._value.rawに格納される。decl.valueを見てきれいなのでこのままで良しとして何もしないと、出力されるCSSは上記CSSと同じ、コメントが含まれたものになってしまう。

PostCSSがクリーンアップした値(blockのみ)を出力する場合、以下のように明示的に元データを削除する必要がある。

delete decl._value;

セレクター(rule.selector)やメディア・クエリーのパラメーター(atRule.params)でも同じ。つまりそれらをゴニョゴニョして変更する場合、元データを必ずdeleteすることになる。ちょっと直観的でない感じの挙動がするけど、多分後方互換性のためこうなったんだと思う。