PostCSS e algumas novidades do CSS

Mar 6, 2016

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:

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:

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.

home