O que é o PostCSS?

PostCSS é um ecossistema de plugins personalizados e ferramentas.

Você ai jovem padawan que sempre se perguntou o que diabos é PostCSS ou nunca conseguiu definir de fato o que seria esse filho do demônio. Esse post tem como objetivo explicar o que é e o que é possível fazer com PostCSS.

Como citado no subtítulo desse post, o PostCSS é melhor definido como um ecossistema e não como um pré/pós-processador ou wrapper de CSS, mesmo que ele também se comporte dessas formas.

Diferente dos pré-processadores que existem no mercado como Less, Sass e Stylus, que foram feitos por uma pessoa e mantido por um grupo de pessoas que cuida das atualizações, updates e features. O PostCSS em si apenas transforma o CSS acessível ao JavaScript e assim você pode escrever o plugin que quiser para ele ou usar/contribuir em algum plugin já existente.

Alguns pré-processadores também dão a possibilidade de criação de plugins, mas você fica limitado a aquele pré-processador que pode morrer a qualquer momento ou deixar de ser o hipe do momento. Por ser feito em JavaScript alguns plugins do PostCSS já foram portados para task runners.

Por exemplo, o projeto do CSS Nano que é uma dos plugins mais famosos e fodas do PostCSS, também tem versão para Gulp, Grunt, etc… Isso torna o plugin muito mais versátil e fácil de usar/disseminar.

Outra grande vantagem dos plugins do PostCSS é que eles cuidam apenas de uma feature e por ser algo expecífico os desenvolvedores que o mantém podem focar apenas nisso. No caso do CSS Nano ele é um minify de CSS os desenvolvedores focam em deixar o CSS cada vez menor. Esse foco em features torna cada plugin do PostCSS mais poderoso ainda.

Conclusão

PostCSS pode ser usado como pré ou pós processador, substituindo ou sendo usado junto com um pré-processador. Ele sozinho apenas torna o CSS acessível em JavaScript possibilitando uma infinidade de plugins e ferramentas personalizadas.

Por isso o PostCSS é mais bem definido como um ecossistema de plugins e ferramentas.

Mais sobre PostCSS:
https://medium.com/@neysimes/stylus-postcss-25e6f3b338f6#.pw4abifhv

Mais sobre pré-processadores:
https://medium.com/@neysimes/sass-vs-stylus-28c7e2884f1a#.7vltdi4re

Escrito em 1 pomodoro.