Cómo configurar PostCSS en Next.js

Comportamiento por defecto

Next.js compila CSS para su soporte CSS incorporado usando PostCSS.

Sin configuración adicional, Next.js compila CSS con las siguientes transformaciones:

• Autoprefixer agrega automáticamente prefijos de vendedor a las reglas CSS (compatible hasta IE11).
• Se corrigen errores de Flexbox entre navegadores para comportarse como la especificación.
• Las nuevas características de CSS se compilan automáticamente para compatibilidad con Internet Explorer 11:
  • Propiedad all
  • Propiedades Break
  • Propiedad font-variant
  • Propiedades Gap
  • Rangos de Media Queries

Por defecto, CSS Grid y Custom Properties (variables CSS) no se compilan para soporte en IE11.

Para compilar CSS Grid Layout para IE11, puede colocar el siguiente comentario al inicio de su archivo CSS:

/* autoprefixer grid: autoplace */

También puede habilitar el soporte para IE11 de CSS Grid Layout en todo su proyecto configurando autoprefixer con la configuración mostrada abajo (colapsada). Consulte "Personalización de Plugins" más abajo para más información.

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

Las variables CSS no se compilan porque no es posible hacerlo de forma segura. Si necesita usar variables, considere usar algo como variables de Sass que son eliminadas durante la compilación por Sass.

Personalización de navegadores objetivo

Next.js le permite configurar los navegadores objetivo (para Autoprefixer y características CSS compiladas) a través de Browserslist.

Para personalizar browserslist, cree una clave browserslist en su package.json así:

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

Puede usar la herramienta browsersl.ist para visualizar qué navegadores está targeteando.

Módulos CSS

No se requiere configuración para soportar Módulos CSS. Para habilitarlos en un archivo, renómbrelo con la extensión .module.css.

Puede aprender más sobre el soporte de Módulos CSS en Next.js aquí.

Personalización de plugins

Advertencia: Cuando define un archivo de configuración personalizado de PostCSS, Next.js deshabilita completamente el comportamiento por defecto. Asegúrese de configurar manualmente todas las características que necesite compilar, incluyendo Autoprefixer. También debe instalar manualmente cualquier plugin incluido en su configuración personalizada, ej. npm install postcss-flexbugs-fixes postcss-preset-env.

Para personalizar la configuración de PostCSS, cree un archivo postcss.config.json en la raíz de su proyecto.

Esta es la configuración por defecto que usa Next.js:

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

Dato útil: Next.js también permite nombrar el archivo como .postcssrc.json, o leerlo desde la clave postcss en package.json.

También es posible configurar PostCSS con un archivo postcss.config.js, lo cual es útil cuando quiere incluir plugins condicionalmente basado en el entorno:

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // Sin transformaciones en desarrollo
        ],
}

Dato útil: Next.js también permite nombrar el archivo como .postcssrc.js.

No use require() para importar los Plugins de PostCSS. Los plugins deben proporcionarse como strings.

Dato útil: Si su postcss.config.js necesita soportar otras herramientas no-Next.js en el mismo proyecto, debe usar el formato interoperable basado en objetos:

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