Pra quem ainda não conhece, PostCSS é um processador de folhas de estilo (CSS), assim como Less e Sass. Um processador te dá “poderes adicionais” para criar folhas de estilo, por exemplo, criar variáveis.
Se você ainda não está familiarizado com esse conceito, recomedo os seguintes links antes de prosseguir sua leitura:
Bom, como você já deve saber, muitos consideram PostCSS um pós-processador de CSS, outros, têm a opinião oposta: “PostCSS é como um pré-processador, faz exatamente a mesma coisa”.
Pra tentar entender onde mora a diferença, comecei a tentar imaginar qual seria a origem da palavra pré-processador, e, por analogia, podemos comparar com o PHP (sigla para PHP: Hipertext Preprocessor):
O PHP foi uma linguagem criada para pré-formatar uma saída HTML que deveria ser dinâmica em momento de runtime, e é chamado assim, pois o processamento das informações era feito antes de ser recebido e interpretado pelo navegador, como no diagrama abaixo:
Podemos considerar que um pré-processador funciona da mesma maneira:
Partindo desse princípio, como funciona um pós processador?
Analisando dessa forma, um pós-processador processa os arquivos CSS finais, que já são “interpretáveis” pelo navegador, porém, que ainda podem ser otimizados, “cross-browserificados” (essa palavra existe?), concatenados, comprimidos, etc.
Para reforçar a ideia de que PostCSS é um pós-processador de arquivos, os exemplos de utilização da ferramenta utilizam a extensão .css nos arquivos de entrada e saída (source / destination), porém, não é só isso que devemos levar em consideração.
Para garantir que o PostCSS é um pós-processador, ele deve se enquadrar no mesmo modelo mostrado anteriormente:
Como o PostCSS é uma ferramenta que depende de plugins para funcionar, temos que analisar o comportamento desses plugins para identificar o modelo de processamento da ferramenta.
(uma lista com todos eles pode ser vista / incrementada aqui (http://postcss.parts/))
Alguns deles são feitos apenas para otimizar nosso arquivo CSS, como por exemplo, o autoprefixer. Esse plugin permite você escrever seu CSS sem utilizar os prefixos de vendor, adicionando-os automaticamente, por exemplo:
entrada (source):1
2
3:fullscreen a {
display: flex
}
saída (destination):1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16:-webkit-full-screen a {
display: -webkit-box;
display: flex
}
:-moz-full-screen a {
display: flex
}
:-ms-fullscreen a {
display: -ms-flexbox;
display: flex
}
:fullscreen a {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
Analisando o exemplo, podemos notar que um navegador (mesmo que apenas um moderno), conseguirá interpretar o arquivo CSS de entrada, isso significa que nessa situação, o PostCSS + autoprefixer estão pós-processando nosso arquivo CSS.
Em contrapartida, analisando o plugin short, vemos que é um pouco diferente:
entrada (source):1
2
3.icon {
size: 48px;
}
saída (destination):1
2
3
4.icon {
width: 48px;
height: 48px;
}
No exemplo acima, o PostCSS + Short não se comportam como um pós-processador, e sim como um pré-processador por um simples fato: Apesar de o arquivo de entrada ter a extensão .css, nenhum navegador conseguiria interpretar a propriedade ‘short’, consequentemente, o arquivo de entrada é inválido.
Em resumo, não podemos dizer se PostCSS é uma ferramenta de pós ou pré processamento, mas podemos dizer se um conjunto de plugins é. Por exemplo, um projeto que utiliza PostCSS com os plugins autoprefixer, stylelint e cssnano está sendo usado como um pós-processador.
Já em um projeto que utiliza lost e postcss-safe-parser, o PostCSS atua como um pré-processador.
Tem alguma coisa pra acrescentar ou alguma dúvida? Comenta aí pra se juntar na discussão ou me envia um e-mail pra sou@lucaschain.com,br que podemos discutir esse ou qualquer outro assunto!