Mas que raios é PostCSS? #187
Replies: 31 comments
-
|
Aqui um bom ponto de vista a respeito de quando usar, como usar, porque usar, ganhos, desafios, etc: https://www.youtube.com/watch?v=hWNzhKIa34w |
Beta Was this translation helpful? Give feedback.
-
|
PostCSS não tem a ver com CSS4. Resumindo bastante é uma ferramenta que passa seu CSS por plugins que o transformam. Combinando os plugins certos voce consegue facilmente substituir qualquer um desses preprocessadores pelo PostCSS. |
Beta Was this translation helpful? Give feedback.
-
|
haha, boa, também fiquei assim um bom tempo! hihi |
Beta Was this translation helpful? Give feedback.
-
|
Fiz um post no Medium sobre o assunto há algum tempo atrás. |
Beta Was this translation helpful? Give feedback.
-
|
Tenho um artigo sobre esse assunto, que fala sobre o PostCSS e o CSSNext (que acho que é o que você se refere quando fala "CSS4").
Não perdem, pré-processadores como esses e o PostCSS podem trabalhar juntos! Você provavelmente já utilizou PostCSS com algum desses pré-processadores, quando usou o Autoprefixer (que é um pós-processador). |
Beta Was this translation helpful? Give feedback.
-
|
Obrigado pessoal, agora as coisas começam a fazer sentido 😄 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Falando sobre usar PostCSS junto com pré-processadores, dá uma olhada nesse artigo: https://medium.com/@neysimes/stylus-postcss-25e6f3b338f6#.qc53s1qco |
Beta Was this translation helpful? Give feedback.
-
|
Vou chamar o @neysimoes e o @fernandofleury. Mas basicamente, você pode usar o PostCSS com qualquer preprocessador tranquilamente. O PostCSS faz o PÓS-processamento, então funciona com qualquer coisa, inclusive CSS nativo. |
Beta Was this translation helpful? Give feedback.
-
O PostCSS não se limita ao pós-processamento, tal como o nome parece dizer. É, também, possível adicionar plugins que vão ocorrer durante o pré-processamento dos estilos. |
Beta Was this translation helpful? Give feedback.
-
|
Dessa não sabia. ;) |
Beta Was this translation helpful? Give feedback.
-
|
Sim. PostCSS é uma ferramenta incrível! Você pode construir seu próprio pré-processador com ela, e depois incrementar com tarefas no pós-processamento, como o Autoprefixer. Se não quiser, pode usar um pré-processador já existente como Sass, e usar o PostCSS junto, como você citou. Ele é agnóstico, é apenas uma ferramenta para transformar CSS através de plugins! Por isso é complicado de entender o que exatamente ele faz, porque ele, sem nada plugado, não faz nada com seu CSS. |
Beta Was this translation helpful? Give feedback.
-
|
Acho que o pessoal já falou bem sobre o assunto :) Se você já tiver uma compreensão do que temos de pré-processadores (sass, stylus, less e afins), fica mais fácil de compreender como ele funciona. O PostCSS funciona a partir plugins feitos em JavaScript (o que nos dá a possibilidade de entender como eles funcionam, e até criar os nossos facilmente), e pode ser incluso em qualquer momento de processamento do arquivo(s) O que nós vamos usar na maior parte do tempo, são alguns plugins que já vimos atuando dentro de pré-processadores, por exemplo esse cara aqui: precss. Isso traz a dúvida mais comum: Se eu já tenho uma ferramenta que traz essas funcionalidades, porque eu iria migrar pra mais uma ferramenta? Bom, na real você não precisa começar a usar PostCSS dentro de um projeto que já trabalha com sass, por exemplo. Mas é preciso entender que hoje essas ferramentas (vide sass) vão até um certo ponto no que elas te oferecem pra facilitar na escrita do código. E como já explicaram, é possível continuar usando seu pré-processador, e inserir o PostCSS no meio desse pipeline, para realizar alguma ação que seu pré-processador não consegue, seja ela qual for. Pra tentar abrir um pouco mais a cabeça em como ele funciona, e porque ele não é "limitado" na premissa do que pode fazer, imagine da seguinte maneira: O PostCSS trabalha com JavaScript para gerar (e interpretar) o CSS, isso significa que você tem total flexibilidade pra gerar um superset do css (Gerar propriedades novas, e depois transformar ela em CSS válido no final do processamento), mas isso ainda vai um pouco além. Pensando do ponto de vista que é JavaScript sendo executado (geralmente no contexto do node, mas dá pra rodar no browser com o polyfill devido), então por ser puramente JavaScript, você pode fazer qualquer operação que você faria comumente, e transportar essa operação pra algum código CSS válido (Tipo o que o font-magician faz). E honestamente essa é a graça do PostCSS. Ele vai até onde suas necessidades vão. Já tem muito plugin fazendo muita coisa legal pra ser usada. Não quer dizer que a gente precisa usar tudo isso de fato, mas demonstra uma flexibilidade muito grande na ferramenta, algo que podemos confiar não mais como uma solução blackbox (vide pre-processador) Desculpa o textão |
Beta Was this translation helpful? Give feedback.
-
|
@fernandofleury Continue com textões 😝 |
Beta Was this translation helpful? Give feedback.
-
|
@fernandofleury |
Beta Was this translation helpful? Give feedback.
-
|
@lagden já colocaram lá em cima |
Beta Was this translation helpful? Give feedback.
-
|
Obrigado pessoal! |
Beta Was this translation helpful? Give feedback.
-
|
Um exemplo besta de como o PostCSS trabalha pra interpretar/gerar o código: Vamos criar uma unidade nova, que replica o comportamento de EM (só pra entender um pouco) seletor {
width: 10javascriptzinhos;
}// o arquivo css transformado em uma node-tree. Imagina que o arquivo css virou um objeto javascript (tipo isso)
function (css) {
// uma declaration é uma regra, por exemplo color: #fff. O PostCSS fornece alguns métodos pra facilitar a modificação do objeto css.
css.walkDecls((declaration) => {
// a partir da declaração você tem total flexibilidade pra alterar o valor e a própria regra em si. Se você quer alterar um selector, criar uma @ (at-rule) nova, também é possível. só não é dentro desse contexto aqui, existem outras funções pra isso.
// Seguindo aquele seletor simples, teríamos a declaração `width: 10rem` sendo processada nesse momento, para realizar o fallback é só usar JS puro pra isso :)
// Aqui é a parte interessante, porque eu tenho diversas abordagens que resolvem essa conversão pra mim, mas vamos usar um match simples
const value = declaration.value.match(/(\d+)javascriptzinhos/)
if (value && value.length) {
declaration.value = +value[1] * 16
}
}) |
Beta Was this translation helpful? Give feedback.
-
|
https://gist.github.com/fernandofleury/550051bf15fdc2eb954f E aqui um exemplo de uso mesmo, uso o iconfont pra gerar os glyphs, e o PostCSS pra gerar o css final da fonte. |
Beta Was this translation helpful? Give feedback.
-
|
Por mais textões assim @fernandofleury. Obrigada! |
Beta Was this translation helpful? Give feedback.
-
|
Quem dera todo textão fosse assim |
Beta Was this translation helpful? Give feedback.
-
|
@fernandofleury my bad!!! não sabia que o usem... postCSS é bem power!!! https://github.com/lagden/postcss-inline-base64 o mais legal desse pluguinho é que o um cara twittou pq gostou do teste unitário... bahhh!! sacanagem!! |
Beta Was this translation helpful? Give feedback.
-
|
ajudou bastante! vlw @fernandofleury |
Beta Was this translation helpful? Give feedback.
-
|
PostCSS powers https://ai.github.io/postcss-isolation/ |
Beta Was this translation helpful? Give feedback.
-
|
Acho que já postaram em outra issue mas vale esse link aqui: O que eu mais uso é o Rucksack , esse alias dele ajuda muito na hora de codificar |
Beta Was this translation helpful? Give feedback.
-
|
Falando em Rucksack <3 |
Beta Was this translation helpful? Give feedback.
-
|
Post que eu escrevi definindo PostCSS. |
Beta Was this translation helpful? Give feedback.
-
|
Acabei de ler @neysimoes ! |
Beta Was this translation helpful? Give feedback.
-
|
@fernandofleury Muito Bom o Texto. |
Beta Was this translation helpful? Give feedback.
-
|
Muito bom este podcast falando sobre PostCSS. |
Beta Was this translation helpful? Give feedback.
-
|
@fernandofleury Imagina se você estiver utilizando uns 50 plugins, ele irá fazer o loop no css 50x?! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Pessoal, vi por aqui alguns falando sobre o PostCSS. Dei uma pesquisada e vi que tem relação com o CSS4 mas ainda não consegui enxergar onde ele se encaixa nesse mundão de ferramentas para se trabalhar com CSS.
Qual a vantagem de utilizá-lo? SASS, LESS, Stylus perdem o sentido quando utilizamos o PostCSS?
Beta Was this translation helpful? Give feedback.
All reactions