🚀

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

5 min read
Next.js
tech

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、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設定ファイルを定義すると、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,
      },
    },
  },
}

Discussion

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