PostCSS

Comportamiento por defecto

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

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

• Autoprefixer añade automáticamente prefijos de proveedor a las reglas CSS (hasta IE11).
• Se corrigen errores de Flexbox entre navegadores para comportarse como la especificación.
• Las nuevas características 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, puedes colocar el siguiente comentario al inicio de tu archivo CSS:

/* autoprefixer grid: autoplace */

También puedes habilitar el soporte para IE11 de CSS Grid Layout en todo tu proyecto configurando autoprefixer con la configuración mostrada abajo (plegada). Consulta "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 necesitas usar variables, considera usar algo como variables Sass que son eliminadas durante la compilación por Sass.

Personalización de navegadores objetivo

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

Para personalizar browserslist, crea una clave browserslist en tu package.json así:

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

Puedes usar la herramienta browsersl.ist para visualizar qué navegadores estás seleccionando.

Módulos CSS

No se necesita configuración para soportar Módulos CSS. Para habilitar Módulos CSS en un archivo, renombra el archivo con la extensión .module.css.

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

Personalización de plugins

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

Para personalizar la configuración de PostCSS, crea un archivo postcss.config.json en la raíz de tu 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 leer la configuración desde la clave postcss en package.json.

También es posible configurar PostCSS con un archivo postcss.config.js, lo cual es útil cuando quieres 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 uses require() para importar los plugins de PostCSS. Los plugins deben proporcionarse como strings.

Dato útil: Si tu postcss.config.js necesita soportar otras herramientas no relacionadas con Next.js en el mismo proyecto, debes 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,
      },
    },
  },
}