PostCSS

Comportamiento por defecto

Next.js compila CSS para su soporte de CSS integrado utilizando PostCSS.

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

• Autoprefixer agrega automáticamente prefijos de proveedores a las reglas CSS (compatible hasta IE11).
• Se corrigen errores de Flexbox entre navegadores para que se comporten según 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 en 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 agregar 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 utilizar 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á configurando como objetivo.

Módulos CSS

No se requiere configuración para soportar Módulos CSS. Para habilitar Módulos CSS en un archivo, renómbrelo para que tenga 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, por ejemplo 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 que el archivo se llame .postcssrc.json, o que se lea desde la clave postcss en package.json.

También es posible configurar PostCSS con un archivo postcss.config.js, lo cual es útil cuando desea 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 que el archivo se llame .postcssrc.js.

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

Dato útil: Si su postcss.config.js necesita soportar otras herramientas no relacionadas con 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,
      },
    },
  },
}