PostCSS Preset Env は、W3C の CSS 標準化プロセスに沿って、Stage 0（実験的提案）から Stage 4（標準化完了）までの各段階に対応した CSS 機能を、既存ブラウザ向けに安全に変換する PostCSS プラグインです。その本質は「仕様の成熟度に応じたトランスフォーメーション戦略」であり、開発者は将来の言語機能を即座に採用しつつ、互換性を担保できます。

CSS 標準化ステージの意味と役割

W3C の仕様進捗は、以下の5段階で分類されます。Preset Env はこの分類を直接活用し、各ステージのサポート範囲を明確に制御します：

• Stage 0（Strawman）：個人による初期アイデア段階。構文や動作が未定義で、将来的な廃止・大幅変更の可能性が高い。
• Stage 1（Proposal）：正式な仕様草案の作成が始まり、最低限のユースケースと設計意図が提示される。
• Stage 2（Draft）：文法とセマンティクスが概ね固まり、実装可能な仕様書が公開される。
• Stage 3（Candidate Recommendation）：複数の実装（例：Blink, WebKit）で検証済み。API の安定性が確認され、広範な採用が期待される。
• Stage 4（Recommendation）：W3C 公式勧告として承認済み。主要ブラウザでデフォルト有効または十分なベンダーサポートあり。

設定方法と実行時制御

インストールは npm を通じて行います：

npm install postcss-preset-env --save-dev

設定ファイル postcss.config.cjs では、stage オプションで全体の基準を指定し、features オブジェクトで個別機能の有効／無効を細かく調整可能です：

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      stage: 2,
      features: {
        'custom-properties': true,
        'logical-properties-and-values': false,
        'nesting-rules': { preserve: false }
      },
      // 対象ブラウザを明示（Browserslist 統合）
      targets: {
        chrome: '95',
        firefox: '91'
      }
    })
  ]
};

内部アーキテクチャと依存関係

Preset Env は単体の変換器ではなく、モジュラーなサブプラグイン群を統合・管理する「オーケストレーター」として機能します。代表的なコンポーネントには以下があります：

• postcss-custom-properties：CSS 変数（--color-primary）の展開とフォールバック挿入
• postcss-nesting：ネスト構文（&, @nest）をフラットなセレクタに変換
• postcss-color-mix：color-mix() 関数の色空間補間を静的値に解決
• autoprefixer：gap, aspect-ratio など、ベンダープレフィックスが必要なプロパティを自動付与

これらのプラグインは、Preset Env のバージョンごとに適切な互換性が保証されており、ユーザーは個別導入や更新を意識せず、一元的な設定で全機能を活用できます。

変換前後のコード比較

次の CSS ファイルを Stage 3 で処理した場合：

section.card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  
  &__header {
    padding: var(--spacing-md);
    background: color-mix(in srgb, #007bff 70%, white);
  }

  &__content {
    padding: var(--spacing-lg);
    inline-size: max-content;
  }
}

出力結果は以下のようになります（一部簡略化）：

section.card {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto-fit minmax(280px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

section.card__header {
  padding: 1rem;
  background: #2a90ff;
}

section.card__content {
  padding: 1.5rem;
  width: -moz-max-content;
  width: max-content;
}

このように、ネスト、カスタムプロパティ、カラーミックス、論理プロパティなどが、対象環境に合わせて逐次展開・代替処理されます。