[Nuxt.js] postcss-nesting を使用する方法

そろそろ脱 Sass(SCSS)をしていきたいなと思いまして PostCSS を積極的に使うようにしています。

もっとも使用頻度の高い『セレクタのネスト』から導入しようと調べたところ、postcss-nested と postcss-nesting のふたつがありました。なにが異なるのか。

簡単にいうと postcss-nested は Sass の気分で書けるもの、postcss-nesting は CSS Nesting Module に準拠した形のものです。

// postcss-nested
h1 {
  span {
    color: red;
  }
}

// postcss-nesting
h1 {
  // & が必要！
  & span {
    color: red;
  }
}

nesting selector として入れ子にする際に & が必要になります。

postcss-nested のほうがスマートに見えますけど近い将来には postcss-nesting の書き方が一般的になることを信じていまから馴染んでおきたいと思います。

使うための設定

設定といってもなにも難しいことはなく、nuxt.config.js の build.postcss.preset.features に 'nesting-rules': true と一行追加するだけです。

// nuxt.config.js
export default {
  // ...省略

  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},
    postcss: {
      preset: {
        features: {
          'nesting-rules': true
        }
      }
    }
  }
}

よくわかっていないこと

Nuxt.js では postcss/autoprefixer や
CSS カスタムプロパティ はデフォルトで有効になっていますが、今回のように明示的に features に追加する必要があるものとの違いはなんでしょうか。Stage の違い？そもそも features がよくわかっていない。