PostCSS: a nova data de jogo de Sass

Ultimamente, o PostCSS é a ferramenta que está circulando no front-end do desenvolvimento web.

PostCSS foi desenvolvido por Andrey Sitnik, o criador do Autoprefixer. É um pacote Node.js desenvolvido como uma ferramenta para transformar todo o seu CSS usando JavaScript, alcançando tempos de compilação muito mais rápidos do que outros processadores.

Apesar do que seu nome parece sugerir, não é um pós-processador (nem é um pré-processador), mas sim um transpilador para transformar a sintaxe específica do PostCSS (ou específica do plugin PostCSS, para ser mais preciso) em baunilha CSS.

Com isso dito, isso não significa que PostCSS e outros processadores CSS não possam trabalhar juntos. Na verdade, se você é novo em todo o mundo de pré/pós-processamento de CSS, usar PostCSS junto com Sass pode lhe poupar muitas dores de cabeça, sobre as quais falaremos em breve.

PostCSS não é um substituto para outros processadores CSS; em vez disso, veja-o como outra ferramenta que pode ser útil quando necessário, outra adição ao seu conjunto de ferramentas.

O uso do PostCSS começou recentemente a aumentar exponencialmente, sendo usado hoje por algumas das maiores empresas do setor de tecnologia, como Twitter, JetBrains e Wikipedia. Sua ampla adoção e sucesso se devem em grande parte à sua modularidade.

Plugins, Plugins, Plugins

PostCSS é tudo sobre plugins.

Ele permite que você escolha os plug-ins que você usará, eliminando dependências desnecessárias e oferecendo uma configuração rápida e leve para trabalhar, com as características básicas de outros pré-processadores. Além disso, permite que você crie uma estrutura mais personalizada para seu fluxo de trabalho, mantendo-o eficiente.

Até a data de redação deste post, o PostCSS possui um repositório de mais de 200 plugins, cada um deles responsável por diferentes tarefas. No repositório GitHub do PostCSS, os plugins são categorizados por “Resolver problemas globais de CSS”, “Usar CSS futuro, hoje”, “Melhor legibilidade de CSS”, “Imagens e fontes”, “Linters” e “Outros”.

No entanto, no diretório de plugins você encontrará uma categorização mais precisa. Aconselho você a dar uma olhada lá para ter uma ideia melhor das capacidades de alguns deles; eles são bastante amplos e bastante impressionantes.

Você provavelmente já ouviu falar do plugin PostCSS mais popular, o Autoprefixer, que é uma biblioteca independente popular. O segundo plugin mais popular é o CSSNext, um plugin que permite usar a sintaxe CSS mais recente hoje, como as novas propriedades personalizadas do CSS, por exemplo, sem se preocupar com o suporte do navegador.

Nem todos os plugins PostCSS são tão inovadores. Alguns simplesmente oferecem recursos que provavelmente vêm de fábrica com outros processadores. Pegue o parent selector por exemplo. Com o Sass, você pode começar a usá-lo imediatamente ao instalar o Sass. Com PostCSS, você precisa usar o postcss-nested-ancestors . O mesmo pode extends aplicar a extensões ou mixins .

Então, qual é a vantagem de usar o PostCSS e seus plugins? A resposta é simples - você pode escolher suas próprias batalhas. Se você acha que a única parte do Sass que você vai usar é o parent selector , você pode evitar o estresse de implementar algo como uma instalação de biblioteca Sass em seu ambiente para compilar seu CSS e acelerar o processo usando apenas PostCSS e o postcss-nested-ancestors .

Esse é apenas um exemplo de caso de uso para PostCSS, mas quando você começar a verificar por si mesmo, sem dúvida perceberá muitos outros casos de uso para ele.

Uso Básico do PostCSS

Primeiro, vamos abordar alguns conceitos básicos do PostCSS e dar uma olhada em como ele é normalmente usado. Embora o PostCSS seja extremamente poderoso quando usado com um executor de tarefas, como Gulp ou Grunt, ele também pode ser usado diretamente a partir da linha de comando usando o postcss-cli.

Vamos considerar um caso de uso de exemplo simples. Suponha que gostaríamos de usar o plugin postcss-color-rgba-fallback para adicionar um valor HEX de fallback a todas as nossas cores formatadas RGBA.

Depois de instalar o NPM postcss , postcss-cli e postcss-color-rgba-fallback , precisamos executar o seguinte comando:

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

Com esta instrução, estamos dizendo ao PostCSS para usar o postcss-color-rgba-fallback , processar qualquer CSS que esteja dentro src/css/all.css e enviá-lo para dist/css/all.css .

Tudo bem, isso foi fácil. Agora, vamos ver um exemplo mais complexo.

Usando PostCSS junto com Task-runners e Sass

PostCSS pode ser incorporado ao seu fluxo de trabalho com bastante facilidade. Como já mencionado, ele se integra perfeitamente com executores de tarefas como Grunt, Gulp ou Webpack, e pode até ser usado com scripts NPM. Um exemplo de uso de PostCSS junto com Sass e Gulp é tão simples quanto o seguinte trecho de código:

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

Vamos desconstruir o exemplo de código acima.

Ele armazena referências a todos os módulos necessários (Gulp, Contact CSS, Sass, PostCSS e CSSNext) em uma série de variáveis.

Em seguida, ele registra uma nova tarefa Gulp chamada stylesheets . Esta tarefa observa os arquivos que estão em ./src/css/ com a extensão .scss (independentemente de quão profundos na estrutura do subdiretório eles estejam), Sass os compila e concatena todos eles em um único arquivo all.css .

Uma vez que o arquivo all.css é gerado, ele é passado para o PostCSS para transpilar todo o código relacionado ao PostCSS (e plugin) para o CSS real, e então o arquivo resultante é colocado em ./dist/css .

OK, então configurar o PostCSS com um executor de tarefas e um pré-processador é ótimo, mas isso é suficiente para justificar o trabalho com PostCSS em primeiro lugar?

Vamos colocar assim: Embora o Sass seja estável, maduro e tenha uma enorme comunidade por trás dele, podemos querer usar o PostCSS para plugins como o Autoprefixer, por exemplo. Sim, poderíamos usar a biblioteca autônoma do Autoprefixer, mas as vantagens de usar o Autoprefixer como um plug-in PostCSS é a possibilidade de adicionar mais plug-ins ao fluxo de trabalho posteriormente e evitar dependências estranhas em um monte de bibliotecas JavaScript.

Essa abordagem também nos permite usar propriedades não prefixadas e tê-las prefixadas com base nos valores obtidos de APIs, como a de Can I Use, algo que dificilmente é possível usando apenas Sass. Isso é bastante útil se estivermos tentando evitar mixins complexos que podem não ser a melhor maneira de prefixar o código.

A maneira mais comum de integrar PostCSS em seu fluxo de trabalho atual, se você já estiver usando Sass, é passar a saída compilada de seu arquivo .sass ou .scss através do PostCSS e seus plugins. Isso gerará outro arquivo CSS que tem a saída de Sass e PostCSS.

Se você estiver usando um executor de tarefas, usar o PostCSS é tão fácil quanto adicioná-lo ao pipeline de tarefas que você tem atualmente, logo após compilar seu arquivo .sass ou .scss (ou os arquivos de seu pré-processador de escolha).

PostCSS funciona bem com os outros e pode ser um alívio para alguns dos principais pontos problemáticos que nós, como desenvolvedores, experimentamos todos os dias.

Vamos dar uma olhada em outro exemplo de PostCSS (e alguns plugins como CSSNext e Autoprefixer) e Sass trabalhando juntos. Você poderia ter o seguinte código:

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

Este trecho de código tem sintaxe vanilla CSS e Sass. As propriedades personalizadas, no dia da redação deste artigo, ainda estão no status de Recomendação de Candidato (CR), e é aqui que o plug-in CSSNext para PostCSS entra em ação.

Este plugin será responsável por transformar coisas como propriedades personalizadas em CSS de hoje. Algo semelhante acontecerá com a propriedade transform , que será prefixada automaticamente pelo plugin Autoprefixer. O código escrito anteriormente resultará em algo como:

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

Plugins de autoria para PostCSS

Como mencionado anteriormente, um recurso atraente do PostCSS é o nível de personalização que ele permite. Graças à sua abertura, criar um plugin personalizado próprio para PostCSS para cobrir suas necessidades específicas é uma tarefa bastante simples se você estiver confortável em escrever JavaScript.

O pessoal do PostCSS tem uma lista bastante sólida para começar, e se você estiver interessado em desenvolver um plugin, verifique seus artigos e guias recomendados. Se você sente que precisa perguntar algo ou discutir qualquer coisa, o Gitter é o melhor lugar para começar.

PostCSS tem sua API com uma base bastante ativa de seguidores no Twitter. Juntamente com outras vantagens da comunidade mencionadas anteriormente neste post, é isso que torna o processo de criação de plugins tão divertido e uma atividade tão colaborativa.

Então, para criar um plugin PostCSS, precisamos criar um módulo Node.js. (Geralmente, as pastas do plugin PostCSS no diretório node_modules/ são precedidas por um prefixo como “postcss-”, que é para deixar explícito que são módulos que dependem do PostCSS.)

Para começar, no arquivo index.js do novo módulo do plugin, precisamos incluir o seguinte código, que será o wrapper do código de processamento do plugin:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

Chamamos o plugin de replacecolors . O plug-in procurará uma palavra-chave deepBlackText e a substituirá pelo valor de cor #2e2e2e HEX:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

O trecho anterior apenas fez o seguinte:

1. Usando walkRules() ele iterou por todas as regras CSS que estão no arquivo .css atual pelo qual estamos passando.
2. Usando walkDecls() , ele iterou por todas as declarações CSS que estão dentro do arquivo .css atual.
3. Em seguida, ele armazenou a declaração dentro da variável de declaração e verificou se a string deepBlackText estava nela. Se fosse, ela substituiu toda a declaração pela seguinte declaração CSS: color: #2e2e2e; .

Quando o plugin estiver pronto, podemos usá-lo assim diretamente na linha de comando:

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

Ou, por exemplo, carregado em um Guplfile como este:

 var replacecolors = require('postcss-replacecolors');

Devo abandonar meu processador CSS atual para usar o PostCSS?

Bem, isso depende do que você está procurando.

É comum ver tanto o Sass quanto o PostCSS usados ​​ao mesmo tempo, já que é mais fácil para os novatos trabalharem com algumas das ferramentas que os pré/pós-processadores oferecem, junto com os recursos dos plugins PostCSS. Usá-los lado a lado também pode evitar a reconstrução de um fluxo de trabalho predefinido com ferramentas relativamente novas e provavelmente desconhecidas, ao mesmo tempo em que fornece uma maneira de manter as implementações atuais dependentes do processador (como Sass mixins , extends , o seletor pai , seletores de espaço reservado , e assim por diante).

Dê uma chance ao PostCSS

PostCSS é a novidade (bem, mais ou menos) no mundo do desenvolvimento front-end. Ele tem sido amplamente adotado por não ser um pré/pós-processador per se, e ser flexível o suficiente para se adaptar ao ambiente em que está sendo inserido.

Muito do poder do PostCSS reside em seus plugins. Se o que você procura é modularidade, flexibilidade e diversidade, então esta é a ferramenta certa para o trabalho.

Se você estiver usando executores de tarefas ou empacotadores, adicionar PostCSS ao seu fluxo atual provavelmente será muito fácil. Verifique o guia de instalação e uso e provavelmente encontrará uma maneira fácil de integrá-lo às ferramentas que já está usando.

Muitos desenvolvedores dizem que está aqui para ficar, pelo menos no futuro próximo. PostCSS pode ter um grande impacto em como estruturamos nosso CSS atual, e isso poderia levar a uma adoção muito maior de padrões na comunidade de desenvolvimento web front-end.