Настройка PostCSS в Next.js

Поведение по умолчанию

Next.js компилирует CSS для своей встроенной поддержки CSS с использованием PostCSS.

Без дополнительной конфигурации Next.js компилирует CSS со следующими преобразованиями:

• Autoprefixer автоматически добавляет вендорные префиксы к CSS-правилам (вплоть до IE11).
• Исправлены кросс-браузерные баги Flexbox, чтобы поведение соответствовало спецификации.
• Новые возможности CSS автоматически компилируются для совместимости с Internet Explorer 11:
  • Свойство all
  • Свойства break
  • Свойство font-variant
  • Свойства gap
  • Диапазоны медиазапросов

По умолчанию CSS Grid и Пользовательские свойства (CSS-переменные) не компилируются для поддержки IE11.

Чтобы скомпилировать CSS Grid Layout для IE11, вы можете добавить следующий комментарий в начало CSS-файла:

/* autoprefixer grid: autoplace */

Вы также можете включить поддержку IE11 для CSS Grid Layout во всем проекте, настроив autoprefixer с конфигурацией, показанной ниже (свернуто). Подробнее см. в разделе "Настройка плагинов".

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

CSS-переменные не компилируются, потому что это невозможно сделать безопасно. Если вам необходимо использовать переменные, рассмотрите возможность использования переменных Sass, которые компилируются с помощью Sass.

Настройка целевых браузеров

Next.js позволяет настроить целевые браузеры (для Autoprefixer и компилируемых возможностей CSS) через Browserslist.

Чтобы настроить browserslist, добавьте ключ browserslist в ваш package.json:

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

Вы можете использовать инструмент browsersl.ist для визуализации целевых браузеров.

CSS Modules

Для поддержки CSS Modules не требуется дополнительной настройки. Чтобы включить CSS Modules для файла, переименуйте его, добавив расширение .module.css.

Подробнее о поддержке CSS Modules в Next.js.

Настройка плагинов

Предупреждение: При определении пользовательского файла конфигурации 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
        }
      }
    ]
  ]
}

Полезно знать: Next.js также позволяет использовать файлы с именами .postcssrc.json или читать конфигурацию из ключа postcss в package.json.

Также можно настроить PostCSS с помощью файла postcss.config.js, что полезно, когда нужно условно включать плагины в зависимости от окружения:

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // Без преобразований в development
        ],
}

Полезно знать: Next.js также позволяет использовать файл с именем .postcssrc.js.

Не используйте require() для импорта плагинов PostCSS. Плагины должны быть указаны в виде строк.

Полезно знать: Если ваш postcss.config.js должен поддерживать другие инструменты в проекте, используйте совместимый объектный формат:

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