POST CSS
É um ecossistema de plugins personalizados e de ferramentas.
Existe mais de 200 plugins e é possível criar mais.
Pode ser usado como pré ou pós processador.
Como pós processador, você não terá muito controle do que será feito,
diferente do que é feito com o Less ou Sass.
* Como existe vários plugins, cabe a você decidir qual vai querer usar,
quase todos possuem uma boa documentação, para ter mais informações.
POST CSS Exemplo de como seria o funcionamento
** Entrada
p {
_______display: flex;
}
** Saida
p {
_______display: -webkit-box;
_______display: -ms-flebox;
_______display: flex;
}
Na saida ele criou mais dois css diferentes do que eu adicionei,
a vantagem dele fazer é que mais navegadores leia o CSS.
Terá muito mais chances de funcionar em vários navegadores,
mas não é certeza que todos funcionaram.
É bom testar em vários navegadores, o seu projeto.
p {
_______display: flex;
}
p {
_______display: -webkit-box;
_______display: -ms-flebox;
_______display: flex;
}
POST CSS Documentação e mais detalhes
É uma para transaformar CSS com JavaScript.
** Não precisa saber a linguagem JavaScript.
No desenvolvimento podemos usar conceitos já apresentados neste curso,
visando evitar: repetição de código, reuso, código limpo, organizado de fácil manutenção.
O uso pode ser:
* Atráves de linhas de comando ou taskrunners.
É sempre importante consultar as documentações para entender,
e tirar melhores benefícios.
Para usar com Node.js npm install postcss-middleware .
Links para ver as documentações:
https://github.com/jednano/postcss-middleware
https://github.com/postcss/postcss
https://www.postcss.parts/
https://postcss.org/
Consulte as documentações, veja qual é mais adequado para seu projeto.
POST CSS Plugins
Há muitos plugins, mais veremos 3.
PostCSS Brazilian Portuguese Stylesheets
https://www.npmjs.com/package/postcss-brazilian-portuguese-stylesheets
* Faz uma conversão.
* Ajuda a quem não entende nada de inglês e está no início.
* Permite a programação em português e processa para CSS.
Veja um exemplo, que está no site da documentação:
Outro plugin, funciona como um pré processador:
Autoprefixer
https://autoprefixer.github.io/
* Dizem ser o mais utilizado, usado pelo Google e Twitter por exemplo.
Documentação no github:
https://github.com/postcss/autoprefixer
Veja a imagem de um exemplo de entrada e saida de um código usando o Autoprefixer:
** Saida, como fica o código depois de usar o Autoprefixer:
Outro plugin, para ver aplicação de regras:
Canisue
https://caniuse.com/
* Para você pesquisar quais navegadores tem suporte aquilo que você quer usar.
* Tipo, você pesquisa sobre 'margin', o site te dará informações,
não só de margin, mas margin-top, margin-block, entre outros.
E te dará informações de quais navegadores suportam ou não, o margin ou margin + alguma coisa.
Outro plugin, para válida e revisa códigos CSS:
Stylelint
https://stylelint.io/
* Básicamente fará a correção.
* Erros de digitação, entre outros para não fazer nada errado.