O Que É o PostCSS? Transformando CSS Com Plugins
O PostCSS é uma ferramenta que faz o parse do CSS em uma estrutura e roda plugins sobre ela, permitindo transformações como autoprefixing, minificação e suporte a sintaxe moderna.
Diferentemente de um pré-processador com sua própria linguagem, o PostCSS trabalha sobre CSS puro. Ele faz o parse da sua folha de estilo, a entrega a uma cadeia de plugins, e escreve o CSS transformado de volta. Como tudo é um plugin, você monta exatamente as transformações de que precisa. É uma parte quase universal dos pipelines modernos de CSS e roda como uma etapa de build no CI.
Como o PostCSS funciona
O PostCSS faz o parse do CSS em uma árvore de nós, roda cada plugin configurado para modificar essa árvore, e então a converte de volta em CSS. O pipeline de plugins é o que dá ao PostCSS sua flexibilidade.
Plugins comuns
- Autoprefixer adiciona prefixos de vendor com base nos browser targets.
- cssnano minifica a saída.
- postcss-preset-env permite que você use o CSS do futuro hoje.
- Tailwind roda como um plugin do PostCSS em muitas configurações.
Autoprefixing e browser targets
O Autoprefixer lê sua lista de suporte a navegadores para decidir quais prefixos adicionar. Mude a lista de targets e os prefixos emitidos mudam, o que vincula a saída do CSS à mesma configuração que orienta os polyfills de JS.
Onde ele se encaixa no build
O PostCSS normalmente roda depois de um pré-processador (se houver) e como parte do bundling, de modo que o CSS final está prefixado, modernizado e minificado antes de ser publicado. Os bundlers o integram para que rode automaticamente.
O PostCSS no CI/CD
Como o Autoprefixer depende dos dados de navegadores, fixar o browser target e a versão dos dados de navegadores no repositório mantém a saída do CI reproduzível entre execuções. O CSS transformado e com hash é parte do artifact deployável, e o cache evita reprocessar folhas de estilo inalteradas.
Principais conclusões
- O PostCSS transforma CSS puro através de uma cadeia de plugins em JavaScript.
- Os plugins de Autoprefixer e minificação são os usos mais comuns.
- Fixar os browser targets mantém a saída do PostCSS reproduzível no CI.