Como usar o PostCSS para limpar seu design da Web

Digamos que você aprenda sobre um recurso CSS muito legal, como aninhamento. Mas quando você vai em frente e experimenta, percebe que o suporte é péssimo e levará anos até que você possa finalmente usá-lo. Isso costumava ser um grande problema em CSS até a introdução de pré-processadores como o PostCSS.

Saiba como PostCSS permite que você use CSS moderno e futuro hoje durante o desenvolvimento. Você descobrirá exatamente o que é PostCSS, como usá-lo e a melhor maneira de aproveitar seus recursos.

Configurando o Projeto

Navegue até uma pasta vazia, crie um arquivo chamado index.html e adicione a seguinte marcação HTML no arquivo:

html>
<htmlidioma="en">
<cabeça>
<linkrele="folha de estilo"href="src/estilos.css">
cabeça>
<corpo>
<p>Parágrafop>
<div>divisãodiv>
corpo>
html>

Este documento HTML renderiza um parágrafo e elemento. Ele também importa um arquivo de folha de estilo chamado

estilos.css que está dentro do origem pasta. Crie o arquivo no origem pasta e inclua as seguintes regras de estilo CSS:

corpop {
cor: laranja;
}
corpodiv {
cor: azul;
}
corpo {
mostrar: grade;
}

Este CSS estiliza a cor de ambos os elementos na página e cria um layout de grade. A maioria dos navegadores suporta sintaxe CSS normal como esta. Mas quando você estiver de olho na sintaxe mais recente, precisará trazer o PostCSS.

Criando um projeto Node.js e instalando o PostCSS

Em termos simples, PostCSS permite converter CSS moderno em algo que a maioria dos navegadores pode entender; um processo comumente conhecido como transpiling. Isso é perfeito se você quiser experimentar propriedades CSS novas, experimentais ou fora do padrão em seu código que os principais navegadores podem não suportar.

O PostCSS também oferece um rico ecossistema de plug-ins JavaScript que você pode instalar para habilitar determinados recursos, como minificação de CSS, suporte a cores e suporte a linting.

Para usar o PostCSS, a primeira coisa que você precisa fazer é inicializar um novo projeto Node.js:

npm init -y

Este comando irá gerar um arquivo package.json que contém os valores padrão para seu aplicativo.

Em seguida, instale o PostCSS e o PostCSS CLI. O segundo pacote permite que você execute o PostCSS a partir da linha de comando:

npm i --save-dev postcss postcss-cli

O --save-dev bandeira instala ambos pacotes npm como dependências de desenvolvimento; você só vai usar o PostCSS e seus plugins para processar o código CSS durante o desenvolvimento.

Para começar a usar o PostCSS através do interface da Linha de comando, entre no seu pacote.json arquivo e criar o simples construção: css comando para transpilar com PostCSS:

"scripts": {
"construir: css": "postcss src/styles.css --dir dest -w"
}

Este comando pegará seu CSS simples (armazenado em src/styles.css), transpile o código e, em seguida, envie-o para o destino pasta. Executando o compilação npm: css comando cria esta pasta e a preenche com o estilos.css arquivo contendo código legível pelo navegador.

Ao importar seu CSS para o HTML, certifique-se de importar da pasta de destino onde está compilando seu CSS, e não da pasta de origem de onde o PostCSS compila. Este, no nosso caso, é o dist. pasta, não o origem pasta.

Se você abrir seu site em um navegador, verá que o site ainda acessa o CSS. Sempre que você fizer alterações no arquivo de origem, o PostCSS recompilará o código e as alterações serão refletidas na página da web.

Usando plug-ins PostCSS

Existem centenas de Plug-ins PostCSS para adicionar prefixos, linting, novo suporte de sintaxe e dezenas de outros recursos ao PostCSS. Depois de instalar um plugin PostCSS, você o ativa dentro do postcss.config.js file — um arquivo JavaScript que você pode usar para definir todas as configurações do PostCSS.

Instale o cssnano Plugin PostCSS com o seguinte comando:

npm i --save-dev cssnano

Mais uma vez, você só precisa salvar essas dependências como dependências de desenvolvimento. A razão é que tudo isso acontece enquanto você está se desenvolvendo. Você não precisa do PostCSS ou de qualquer um de seus plugins depois de colocar o site em produção.

Para usar o plug-in cssnano recém-instalado, você deve adicionar o seguinte código dentro do postcss.config.js arquivo:

const cssnano = exigir("cssnano")
módulo.exportações = {
 plug-ins: [
 cssnano({
 predefinido: 'padrão'
 })
 ]
}

Agora, se você voltar ao terminal e executar novamente o comando build, isso reduzirá o CSS de saída (ou seja, tornará o código o menor possível). Portanto, quando você enviar para um site pronto para produção, seu CSS ficará o menor possível.

Usando recursos modernos como aninhamento

Suponha que você queira usar a sintaxe de aninhamento em sua folha de estilo, então você substitui o bloco de parágrafo em src/styles.css com isso:

corpo {
 & p {
cor: laranja;
 }
}

Este código é o mesmo que a versão em seu código inicial. Mas isso gerará um erro porque a sintaxe é muito nova e a maioria dos navegadores da Web não a suporta. Você pode ativar o suporte para esta sintaxe com PostCSS instalando o postcss-preset-env plugar.

O plug-in compila vários plug-ins diferentes para lidar com CSS com base no estágio em que está. O estágio 0 representa os recursos superexperimentais que podem nem chegar ao CSS. Visto que o estágio 4 é para recursos de linguagem que já fazem parte da especificação CSS.

Por padrão, ambiente presente usa recursos do estágio 2 (que têm maior probabilidade de entrar em CSS). Mas você pode alterar o estágio para o que quiser no arquivo de configuração.

Para instalar o plug-in, execute o seguinte comando:

npm i --save-dev postcss-preset-env

Então no seu postcss.config.js arquivo, você deve importar o plugin e registrá-lo:

const cssnano = exigir("cssnano")
const postcssPresetEnv = exigir("postcss-preset-env")
módulo.exportações = {
 plug-ins: [
 cssnano({
 predefinido: 'padrão'
 }),
 postcssPresetEnv({ estágio: 1})
 ]
}

Você só deve passar da fase do novo código CSS que pretende usar. Nesse caso, estamos assumindo que o recurso de aninhamento está no estágio 1. Ao executar novamente o comando build e verificar o navegador, você verá que ele compilou o código aninhado em CSS padrão que o navegador pode entender.

Usando PostCSS com Frameworks

Configurar o PostCSS manualmente pode ser um pouco trabalhoso. É por isso que quase todos os frameworks modernos vêm com ferramentas de empacotamento (por exemplo, Vite, Snowpack e Parcel), e essas ferramentas terão suporte para PostCSS integrado. E mesmo que não tenham, o processo de adicionar suporte a PostCSS é incrivelmente fácil.

Lembre-se sempre que o Vite e a maioria dos outros empacotadores usam Sistema de módulos ES6, não CommonJS. Para contornar isso, você precisa usar o importar declaração no lugar de requerer() na tua postcssconfig.js arquivo:

importar cssnano de"cssnano"
// O código de configuração vai aqui

Contanto que você tenha os plugins instalados, tudo funcionará bem.

Saiba mais sobre SaSS

PostCSS é apenas uma das dezenas de pré-processadores CSS atualmente disponíveis. Um deles é o SaSS, que significa folhas de estilo sintaticamente impressionantes.

Aprender a usar outro pré-processador importante pode ser útil para um desenvolvedor de CSS.