【Next.js和訳】Advanced Features/Customizing PostCSS Config
この記事について
この記事は、Advanced Features/Customizing PostCSS Configの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Customizing PostCSS Config
デフォルトの動作
Next.js は、PostCSS を使って、ビルドインの CSS のサポート用に CSS をコンパイルします。
何も設定しなくても、Next.js は以下のような変換を行って CSS をコンパイルします。
- Autoprefixerが CSS ルールにベンダーの接頭辞を自動的に追加するようになりました(IE11 に戻る)。
- クロスブラウザの Flexbox のバグが修正され、スペック通りの動作をするようになりました。
- CSS の新機能を Internet Explorer 11 との互換性を考慮して自動的にコンパイルします。
デフォルトでは、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 の設定をカスタマイズするには、プロジェクトのルートにpostcss.config.json
ファイルを作成します。
これは、Next.js で使用されるデフォルトの設定です。
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
また、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,
},
},
],
]
: [
// 開発中のトランスフォームはありません
],
}
PostCSS プラグインのインポートには、require()
を使用しないでください。プラグインは文字列で提供しなければなりません。
Discussion