PostCSS: quais plugins usar?

[luisfmsouza]

Fala galera. Alguém ai usando PostCSS?

Quais plugins vocês tem utilizado nos projetos?

[felipefialho]

Opa, beleza @luisfmsouza?

Atualmente estou usando o Rucksack e o nanoCSS.

Sobre o Rucksack, eu escrevi um post ano passado.

[afonsopacifer]

@luisfmsouza eu tenho usado o conjunto de plugins que vem no bolo doido do cssnext!

Eu meio que troquei os pre-processadores pelo PostCSS, isso para escrever CSS de forma mais nativa,
e nesse aspecto o pacote do cssnext cai como uma luva :)

[mikejavier]

Eu gosto muito de trabalhar com .scss e quando vi o postcss tb gostei, então procurei um jeito de juntar os dois e to usando o precss + autoprefixer mais algun modulos do Rucksack.

[luisfmsouza]

Massa, eu não conhecia o Rucksack, vou dar uma fuçada lá!

Valeu pessoal!

[simaodeveloper]

@lfeh e o autoprefixer

[felipefialho]

@simaodeveloper Não uso o Autoprefixer porque o Rucksack já vem com ele, hehe :p

[felipefialho]

Deixa eu chamar o deus do PostCSS aqui -> @fernandofleury

[fernandofleury]

Oi

[fernandofleury]

é uma pergunta muito subjetiva. qual seu objetivo com seu projeto? você quer só ter acesso as features de preprocessador com um tempo de compilação menor? então é https://github.com/jonathantneal/precss.

[luisfmsouza]

@fernandofleury meu foco é estudar e explorar o PostCSS, alguns plugins que o pessoal comentou eu encaixei em projetos pessoais meus.

Inclusive, alguém de vocês já usou o postcss-font-magician com Stylus?

[felquis]

Estou usando Less, depois uso apenas autoprefix.

[felipefialho]

@luisfmsouza Ainda não usei em projetos reais. Quem me mostrou essa ferramenta foi o @neysimoes.

[luisfmsouza]

@neysimoes para de jogar Xadrez e dá um luz aqui...

[fernandofleury]

cara, não tem muito segredo não. postCSS é JS, não tem estudo, eu pelo menos acho. o ideal é dar uma olhada nos plugins, e ver se tem algo que você se sente ais confortável pra escrever CSS, só isso.

Eu usei pra algumas coisas fora desse pipeline, tipo pra gerar uma folha de estilos pra tipografia a partir dos glyphs

[fernandofleury]

como é JS, a limitação desse cara é o seu problema atual a ser resolvido, basicamente.

[felipefialho]

@neysimoes, carario mano, eu, você, o @Mendrone e o @willianjusten praticamente compartilha o Workflow. \o

[fernandofleury]

Me sinto mais confortável com sintaxe normal, principalmente por isso possibilitar o pipeline com folhas de estilo padrão também. O Stylus possibilita importar .css normal? Usei por um bom tempo, mas nunca tentei isso.

[luisfmsouza]

@neysimoes vc usa o font magician, ou encontrou alguma alternativa?

[felipefialho]

@fernandofleury

Usando o @import ele renderiza como @import do CSS mesmo =(

Parece que é possível adicionar através das options do Stylus, mas nunca tentei.

[bernardodiasc]

Comecei a usar o CSS Modules, é uma sacada bem boa pra lidar com o (potencial) problema de cascata.

Resumindo a ideia, voce importa o arquivo css no template (js) e então usa as classes css como objetos js, cada nome de classe é transformado em outro nome único. Simples e prático, tão simples que da pra usar a mesma teoria direto no css pegando a treta de criar nome de classes únicos manualmente. Aliás é exatamente isso que muitas metodologias como BEM, SMACSS e SUIT tentam resolver, regras de nomenclatura pra manter a sanidade.

Tem uma apresentação de um dos criadores do bootstrap que passa correndo pela história do css desde 1994 até o css modules com ênfase no efeito cascata do css, super recomendo https://www.youtube.com/watch?v=iniwPUEbPUM

[rubenmarcus]

para projetos novos e escalaveis vocês recomendariam já iniciar com PostCSS ou SASS?

[bernardodiasc]

Bem legal essa lista http://postcss.parts/

[luisfmsouza]

@rubenmarcus se o projeto já vai nascer pra ser longo, vale a pena mesclar PostCSS e Preprocessador(Sass ou Stylus).

Autoprefixer e cssnano funcionariam bem nesse caso.

[rubenmarcus]

@luisfmsouza Valeu! e pra quem está acostumado a fazer tudo em css puro, e já fez poucas coisas em SASS, existe algum tutorial recomendado, a curva de aprendizado é longa??

Se você tem um prazo curto tipo 1 mes pra fazer 10 telas por exemplo...
E não tem dominio de pré processadores
você
-CSS Puro
-SASS
-postcss + stylus?

[luisfmsouza]

Fala @rubenmarcus !

A curva de aprendizado de Sass e/ou Stylus é muito pequena, basicamente é só dar uma olhada na documentação pra ter em mente o que você pode fazer com eles, o principal é:

• variável
• nested
• mixins

No máximo, procura algum get started no google. Mas acredite, é muito fácil! É praticamente CSS.

Se você tiver domínio de Gulp/Grunt ou até mesmo desenvoltura pra usar linha de comando, eu recomendaria somente o PostCSS, com Rucksack ou cssnext.

Utilizar Stylus + PostCSS também é uma boa ideia, assim você se acostuma com os dois de uma vez. Dá uma olhada nesse tutorial de instalação: http://webdesign.tutsplus.com/tutorials/using-postcss-together-with-sass-stylus-or-less--cms-24591

Qualquer coisa chama!

[rubenmarcus]

@luisfmsouza e talvez @fernandofleury uma coisa aqui..

estou querendo desenvolver um projeto com esses plugins de Post-CSS:
Css Next: CSS 4 variaveis, Resposive Grid com media query range
Rucksack: Tipografia Responsiva , Property Aliases, Placeholder Styling,Font Src,Automatic Prefixing
Css Nano: Optimização
Style Lint
Svg Fallback
Responsive Images

Nao vou usar o Pre CSS , porque isso tudo ja me atende, ao que eu preciso, a minha dúvida é ,pra que usar o Stylus, seria dois passos a se fazer e eu ia perder todo o poder desses plugins se utilizasse o Stylus..

uma duvida eu to vendo os plugins de import mas eles só importam arquivos css.. eu queria poder separar os arquivos em variaveis e funcionalidades, e depois importar igual é no SASS, e tambem no final compilar um arquivo final só minificado, mas até agora não achei como.

[fernandofleury]

não entendi seu problema. porque não pode fazer variables.css?

[rubenmarcus]

@fernandofleury
tem que usar um plugin de import certo?
https://github.com/postcss/postcss-import
https://github.com/jonathantneal/postcss-partial-import

qual o melhor dos dois?

hmm entendi, foi uma duvida bem leiga mesmo. Eu pensei que no arquivo final ele ia acabar gerando código sujo.
acho que o ultimo post foi por desencargo de consciencia porque to colocando o hands on agora , pra um projeto grande, e quero fazer da melhor forma possivel

o postcss vcs usam algum plugin pra concatenação e minificação?

alias essa pratica de concatenar e minificar é correta certo?

[fernandofleury]

usa o postcss-import;

mas pra ser honesto, vai lá e faz um pouco do projeto... você tá se preocupando demais, e criando uma base enorme antes de se sentir confortável com ela.

se não quiser já no projeto principal, faz um projeto básico pra entender como funciona, senão isso não sai do papel.

só usar o cssnano que ele se responsabiliza pela minificação/otimização.

[luisfmsouza]

Boa Fleury! Coloca a mão na massa, qq coisa vai falando...

On Wednesday, 2 March 2016, Fleury [email protected] wrote:

usa o postcss-import;

mas pra ser honesto, vai lá e faz um pouco do projeto... você tá se
preocupando demais, e criando uma base enorme antes de se sentir
confortável com ela.

se não quiser já no projeto principal, faz um projeto básico pra entender
como funciona, senão isso não sai do papel.

só usar o cssnano que ele se responsabiliza pela minificação/otimização.

—
Reply to this email directly or view it on GitHub
#31 (comment).

Att,

Luís Felipe Souza