PostCSS

Core Idea

Next.js compila CSS via PostCSS com um conjunto default de transformações (autoprefixer, fix de flexbox, features pra IE11); criar um postcss.config.json/.js customizado desativa completamente esse default, exigindo reconfiguração manual.

Key Concepts

• Comportamento default: Autoprefixer, correção de bugs cross-browser de Flexbox, e compilação de features CSS novas pra IE11 (all, break properties, font-variant, gap, media query ranges). CSS Grid e Custom Properties (variáveis CSS) não são compilados pra IE11 por padrão.
• Habilitar CSS Grid pra IE11: comentário /* autoprefixer grid: autoplace */ no topo do arquivo CSS, ou config global de autoprefixer com grid: 'autoplace'.
• Browserslist: chave browserslist no package.json controla quais browsers o Autoprefixer/features alvo.
• CSS Modules: sem config extra, só renomear arquivo pra .module.css.
• Custom PostCSS config: criar postcss.config.json (ou .postcssrc.json, ou chave postcss no package.json) desativa totalmente o comportamento default; é preciso reconfigurar manualmente tudo que se precisa, inclusive Autoprefixer, e instalar os plugins usados.
• postcss.config.js: alternativa que permite incluir plugins condicionalmente por ambiente (NODE_ENV); plugins devem ser passados como strings, nunca via require().
• Formato interoperável (objeto): necessário se o postcss.config.js também precisa servir outras ferramentas não-Next.js no mesmo projeto.

Code Examples

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

• O que demonstra: config default exata que o Next.js usa internamente, ponto de partida pra customização.

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

• O que demonstra: desligar transformações em desenvolvimento e aplicar só em produção.

Anti-patterns

• Criar postcss.config.json custom sem reincluir Autoprefixer: perde o comportamento default inteiro, incluindo prefixos de vendor.
• Usar require() pra importar plugins no postcss.config.js: plugins precisam ser strings, não referências de módulo importado.
• Esperar CSS Grid/variáveis CSS funcionarem em IE11 sem config explícita: não são compilados por padrão, exigem opt-in manual.

Key Takeaways

1. Customizar PostCSS é tudo ou nada: qualquer config própria substitui completamente o default do Next.js.
2. Plugins em postcss.config.js precisam ser strings, nunca require().
3. Browserslist no package.json controla o alvo de compatibilidade de Autoprefixer e features CSS.

Connects To

• ch291 CSS: PostCSS é o motor por trás do suporte a CSS/Tailwind descrito lá.
• ch296 Babel: mesmo padrão de extensão de pipeline de build, só que pro lado JS em vez de CSS.