PostCSS e algumas novidades do CSS

Depois do surgimento de pré-processadores como SASS e Less ganhamos uma quantidade imensa de coisas para melhorar a forma como escrevemos “CSS”. Mas como aconteceu com o JS depois do surgimento de várias lib e frameworks, temos algumas novidades nativas do CSS e você pode usar isso e mais um infinidade de plugins com PostCSS.

CSS level 4

CSS vem com algumas novidades, ainda está em working draft mas o PostCSS ta ai pra ajudar ❤.

Parent selector
Agora você pode selecionar um elemento pai baseado no seu filho.

$div > .lorem { /* seleciona a div que é pai do .lorem */}

Pera que tem mais

:matches() — plugin — spec

Seleciona elementos em uma lista de argumentos:

/* Old way */
p:first-child, p.special {
  color: red;
}
/* Com :matches */
p:matches(:first-child, .special) {
  color: red;
}

:not() — plugin — spec

Você já conheceu esse seletor do CSS3 mas a diferença dele agora é que você pode passar uma lista de seletores ao invés de somente um:

/* Old way */
p:not(:first-child), p:not(.special) {
  color: red;
}
/* With selector list */
:not(:first-child, .special) {
  color: red;
}

:has() — spec

Seleciona o elemento baseado na condicional passada como argumento:

/* Seleciona somente elementos <a> que contenham uma imagem dentro*/
a:has(> img)
/* Seleciona a <section> que não contem heading dentro */
section:not(:has(h1, h2, h3, h4, h5, h6))

:dir() — spec

Seleciona elemento baseado na direção da linguagem:

p:dir(ltr) {}
p:dir(rtl) {}

:lang() — spec

Seleciona o elemento baseado do atributo lang:

p:lang(pt-br) {}

Custom selectors — spec — plugin

@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;

:--button {}

Inputs pseudo-classes — spec

/* Field is enabled */
input[type="text"]:enabled {}
/* Field is disabled */
input[type="text"]:disabled {}
/* Field is read-only */
input[type="text"]:read-only {}
/* Field is showing the placeholder attr text */
input[type="text"]:placeholder-show {}
/* Field is checked */
input[type="radio"]:checked {}

Media queries — spec

Tem várias coisas novas sobre media queries no CSS e você pode encontrar tudo aqui:

Resolution

@media (resolution >= 2dppx)
@media print and (min-resolution: 300dpi) { }

Range — spec — plugin

Permite substituir min-/max- com <= & >=:

/* Old way */
@media (min-width: 500px) and (max-width: 1200px) { }
/* Using range  */
@media (width >= 500px) and (width <= 1200px) { }

Custom media queries — spec — plugin

@custom-media --small-viewport (max-width: 30em);
/* check out media queries ranges for a better syntax */

@media (--small-viewport) { }

Tem coisa legal pra caramba aqui que eu mostrei mas tem mais coisa ainda que você pode encontrar aqui:

• cssnext/features
• https://drafts.csswg.org/css-extensions
• https://drafts.csswg.org/mediaqueries
• https://drafts.csswg.org/selectors-4

PostCSS

É uma ferramenta para pré-processar seu CSS com plugins JS. O PostCSS por si só não faz muita coisa. O que ele faz é prover um parser CSS e um framework para criar plugins.

Com PostCSS você pode instalar cada plugins separadamente, você pode escrever seus própios plugins e também como polyfill de novas features do CSS. Hoje são mais de 200 plugins e tem para todos os gostos.

Nesse post iremos cobrir como utilizar os plugins do PostCSS se você deseja saber como criar novos ou editar algum existente recomendo a leitura da documentação.

Para mostrar como PostCSS pode ser flexível, vamos olhar esses dois plugins:

jonathantneal/precss

MoOx/postcss-cssnext

Ambos foram feitos com o PostCSS e ambos tem a sintaxe completamente diferente.

O primeiro, precss permite você usar uma sintaxe parecida com a do SASS (variáveis, nesting, etc) no seu arquivo CSS.

Já o cssnext tem uma série de polyfills para podermos usar as novas features do CSS hoje (tipo um Babel para CSS).

Instalando PostCSS

$ npm install -g postcss-cli

Usando o PostCSS

Nesse post eu vou mostrar como você pode usar um plugins fantásticos que facilitam muito a vida quando você está desenvolvendo.

Autoprefixer com PostCSS cli

Se você não conhece Autoprefixer, corre lá que ta tarde.

Vamos criar um arquivo chamado index.css e dentro dele vamos colocar o seguinte código:

/* index.css */
.container {
  display: flex;
}

Agora vamos instalar o autoprefixer:

$ npm install -g autoprefixer

Precisamos de uma pasta que é onde o nosso código processado sera salvo:

$ mkdir dist

E agora é só rodar o PostCSS:

$ postcss -u autoprefixer styles.css -d dist

O que fizemos acima é dizer para o PostCSS rodar utilizando (-u) o plugin Autoprefixer e o destino (-d) do nosso código compilado é a pasta dist.

Se você abrir o arquivo gerado dist/index.css você vai ver o seguinte:

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Como você pode ver o Autoprefixer colocou todos os prefixos de browsers para a gente sem nenhum esforço, e ao contrário dos outros prefixers que ficavam desatualizado facilmente o Autoprefixer utiliza dados do caniuse.com para sempre adicionar somente os prefixos necessários.

Não para por ai, você pode usar PostCSS com qualquer task runner que temos hoje como o Grunt, Gulp, Brocolli ou Fly.

Vale muito a pena “perder” um tempo dando uma olhada nos plugins do PostCSS pode ser muito útil para o seu projeto.