🚀

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

2021/10/02に公開約5,100字

この記事について

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

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

Customizing PostCSS Config

デフォルトの動作

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

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

  1. Autoprefixerが CSS ルールにベンダーの接頭辞を自動的に追加するようになりました(IE11 に戻る)。
  2. クロスブラウザの Flexbox のバグが修正され、スペック通りの動作をするようになりました。
  3. 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

ログインするとコメントできます