postcss-preset-envでpostcss-nestingを使う

postcss-preset-envを使っていて、CSSをネストさせたいなと思いました。

しかし、普通にオプション付け加えずに書いても、もちろん反映されない。

ググっても、あまりpostcss-preset-envとの組み合わせの情報はなく、postcss-nesting単体のものが多かったため、書き残しておく。

'nesting-rules': true を features に追記すればよいだけ

postcss.config.jsのfeatures欄に'nesting-rules': trueを追記すればよいだけでした。

postcss.config.js

  postcssPresetEnv({
    features: {
      'nesting-rules': true,
    },
  }),

他のpostcss-custom-propertiesとかは'custom-properties'のようにしてfeatureを設定するので、同じ流れで'nesting'を使おうとしたら、上手くいかず少し困った経緯があります。

postcss-preset-envのissueにいたこの人のコードで、設定方法を知りました。一応、公式にも記載がありました。ちゃんちゃん

postcss-nestedよりpostcss-nesting

蛇足ですが、2つの違いについて。

Sassっぽいほうはpostcss-nestedで、なんならnestingのほうよりいい感じの書き方な気がするのですが、公式のCSSの草案？に準拠しているほうはpostcss-nestingなので、そっちを採用しました。

やっぱり、Sassではなく未来のCSSに準拠したいという思いからです。