【Next.js和訳】Advanced Features/Customizing PostCSS Config

この記事について

この記事は、Advanced Features/Customizing PostCSS Configの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Customizing PostCSS Config

例

• Tailwind CSS Example

デフォルトの動作

Next.js は、PostCSS を使って、ビルドインの CSS のサポート用に CSS をコンパイルします。

何も設定しなくても、Next.js は以下のような変換を行って CSS をコンパイルします。

1. Autoprefixerが CSS ルールにベンダーの接頭辞を自動的に追加するようになりました（IE11 に戻る）。
2. クロスブラウザの Flexbox のバグが修正され、スペック通りの動作をするようになりました。
3. CSS の新機能を Internet Explorer 11 との互換性を考慮して自動的にコンパイルします。

• all Property
• Break Properties
• font-variant Property
• Gap Properties
• Media Query Ranges

デフォルトでは、CSS Gridとカスタムプロパティ（CSS 変数）は IE11 対応のためにコンパイルされていません。

CSS Grid Layoutを IE11 用にコンパイルするには、CSS ファイルの先頭に以下のコメントを記述してください。

/* autoprefixer grid: autoplace */

また、autoprefixer を以下のように設定することで、プロジェクト全体でCSS Grid Layoutの IE11 サポートを有効にすることができます（折りたたまれた状態）。詳しくは、後述の"Customizing Plugins"をご覧ください。

クリックすると、CSS Grid Layout を有効にするための設定が表示されます。

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009",
          "grid": "autoplace"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

CSS の変数は、安全にコンパイルすることができないため、コンパイルされません。どうしても変数を使いたい場合は、SassでコンパイルされるSass variablesなどの使用を検討してください。

ターゲットブラウザのカスタマイズ

Next.js では、Browserslistを使って、（Autoprefixerと compiled css の機能の）ターゲットブラウザを設定することができます。

browserslist をカスタマイズするには、package.jsonに以下のようにbrowserslistキーを作成します。

{
  "browserslist": [">0.3%", "not ie 11", "not dead", "not op_mini all"]
}

browserl.istツールを使って、どのブラウザをターゲットにしているかを可視化することができます。

CSS モジュール

CSS モジュールをサポートするための設定は必要ありません。あるファイルに対して CSS モジュールを有効にするには、そのファイルの名前を変更して拡張子を.module.cssにします。

Next.js の CSS モジュールのサポートについては、こちらをご覧ください。

プラグインのカスタマイズ

警告: カスタム PostCSS 設定ファイルを定義すると、Next.js はデフォルトの動作を完全に無効にします。Autoprefixerを含め、コンパイルが必要な機能は必ず手動で設定してください。また、カスタム設定に含まれるプラグインを手動でインストールする必要があります。例：npm install postcss-flexbugs-fixes postcss-preset-env

PostCSS の設定をカスタマイズするには、プロジェクトのルートにpostcss.config.jsonファイルを作成します。

これは、Next.js で使用されるデフォルトの設定です。

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

Note

Next.js では、ファイル名を.postcssrc.jsonにしたり、package.jsonのpostcssキーから読み込んだりすることもできます。

また、postcss.config.jsファイルで PostCSS を設定することも可能で、環境に応じて条件付きでプラグインを入れたい場合などに便利です。

module.exports = {
  plugins:
    process.env.NODE_ENV === "production"
      ? [
          "postcss-flexbugs-fixes",
          [
            "postcss-preset-env",
            {
              autoprefixer: {
                flexbox: "no-2009",
              },
              stage: 3,
              features: {
                "custom-properties": false,
              },
            },
          ],
        ]
      : [
          // 開発中のトランスフォームはありません
        ],
}

Note

また、Next.js では、ファイル名を.postcssrc.jsとすることができます。

PostCSS プラグインのインポートには、require()を使用しないでください。プラグインは文字列で提供しなければなりません。

Note

postcss.config.jsが、同じプロジェクト内の Next.js 以外のツールをサポートする必要がある場合は、代わりに相互運用可能なオブジェクトベースのフォーマットを使用する必要があります。

module.exports = {
  plugins: {
    "postcss-flexbugs-fixes": {},
    "postcss-preset-env": {
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
      features: {
        "custom-properties": false,
      },
    },
  },
}