PostCSS

  • Andrey Sitnik
  • open source

 

Front-End Meetup #1

Tiago Vilas Boas

(Montanha)

  • 10 anos de experiência em TI

  • Desenvolvedor Front-End na CI&T

tiago@artesites.com.br

http://www.artesites.com.br

Quem já usa PostCSS?

PostCSS

  • PostCSS é uma caixa de ferramentas extensiva por plugins JavaScript, que transforma CSS com plugins.

  • PostCSS é um parser de CSS, que cria uma estrutura de dados e depois transforma isso em CSS novamente.

  • Possui um catálogo com mais de 200 plugins.

  • Depende da plataforma Node.js (^v4.6.1) e também funciona com um task runner.

Etapas:

  1. O PostCSS recebe seu código CSS e quebra em partes menores, trata-se de uma análise de entrada de linhas por caracteres ou simbolos léxicos (tokenização).

  2. Faz o parser do código, um algoritimo capaz de processar o array de tokens e criar uma estrutura com significado.

  3. Recebe a estrutura criada, passa a estrutura por uma lista de plugins, sofrendo alterações no caminho. Etapa mágica!

  4. E no final processa o Stringifier, um algoritmo que recebe a árvore modificada e a transforma novamente em CSS.

O que não é?

  • Não é uma alternativa aos pré-processadores.

  • É definido pela comunidade como um ecossistema de plugins e ferramentas, por isso não pode ser definido como um pré/pós-processador.

  • Ele por si só não substituirá o CSS, muito menos os pré/pós-processadores como Sass, Less e Stylus.

  • Não tem nada a haver com CSS4.

O que esses plugins podem fazer?

  • Adicionar ou remover prefixos, conforme os navegadores que você precisar dar suporte. Autoprefixer

  • Adicionar suas custom fonts sem precisar criar mixins. PostCSS Font Magican

  • Otimiza e minifica seu CSS ao máximo, tornando seu CSS muito pequeno e pronto para um ambiente de produção. CSSNano

  • Possibilita que você utilize as novas sintaxes do CSS nos dias de hoje, com suporte a todos navegadores. PostCSS CSSNext

  • Fazer tudo que o Sass faz. Precss

PlayGround =)

Autoprefixer

Adiciona ou remove prefixos conforme as especificações de cada navegador que você precisar dar suporte.



     a {
        display: flex;
     }

 a {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex
   }

CSS:

Compilado:

Font Magician

Adiciona sua custom font sem precisar criar um mixin para ela.


    /* before */
    
    body {
       font-family: "Alice";
    }

CSS:

Font Magician

/* after */

@font-face {
   font-family: "Alice";
   font-style: normal;
   font-weight: 400;
   src: local("Alice"), local("Alice-Regular"),
        url("http://fonts.gstatic.com/alice.eot?#") format("eot"),
        url("http://fonts.gstatic.com/alice.woff2") format("woff2"),
        url("http://fonts.gstatic.com/alice.woff")  format("woff"),
        url("http://fonts.gstatic.com/s/alice.ttf")   format("truetype")
}

body {
  font-family: "Alice";
}

Compilado:

CSSNano

    
    /* normalize selectors */
    h1::before, h1:before {
        /* reduce shorthand even further */
        margin: 10px 20px 10px 20px;
        /* reduce color values */
        color: #ff0000;
        /* drop outdated vendor prefixes */
        -webkit-border-radius: 16px;
        border-radius: 16px;
        /* remove duplicated properties */
        font-weight: normal;
        font-weight: normal;
        /* reduce position values */
        background-position: bottom right;
    }
    /* correct invalid placement */
    @charset "utf-8";

CSS:

CSSNano


    @charset "utf-8";h1:before{margin:10px 20px;
    color:red;border-radius:16px;font-weight:normal;
    background-position:100% 100%}

Compilado:

Otimiza e minifica seu CSS ao máximo, tornando seu CSS muito pequeno e pronto para um ambiente de produção.

Tá! E como uso o PostCSS?

Install


 $ npm install gulp-postcss

Pré-leitura obrigatória: https://github.com/postcss/postcss#usage

 

A instalação de plugins PostCSS deve ser feita separadamente.
Por exemplo: Se quero utilizar o autoprefixer, tenho que instalá-lo também. 


 $ npm install autoprefixer

E como fica no Gulp?

Gulpfile.js (PostCSS com autoprefixer e cssnano)

   
    var postcss = require('gulp-postcss');
    var gulp = require('gulp');
    var autoprefixer = require('autoprefixer');
    var cssnano = require('cssnano');
    
    gulp.task('css', function () {
        var processors = [
            autoprefixer({browsers: ['last 1 version']}),
            cssnano(),
        ];
        return gulp.src('./src/*.css')
            .pipe(postcss(processors))
            .pipe(gulp.dest('./dest'));
    });

Conclusões

  • PostCSS pode ser usado com qualquer task runner que temos hoje como o Grunt, Gulp, Brocolli ou Fly.

  • Os plugins do PostCSS podem ser muito úteis e grandes facilitadores em seu projeto.

  • PostCSS invalida a briga entre os pré-processadores.

  • Remove a responsabilidade de uma única biblioteca resolver todos os nossos problemas.

  • Facilidade de criação do seu próprio plugin.

  • Curva de aprendizado muita rápida, documentação muito completa.

Referências

Dúvidas?

Post CSS - Front-End Meetup #1

By Tiago Vilas Boas

Made with Slides.com

Post CSS - Front-End Meetup #1

Apresentação sobre PostCSS, realizada no primeiro Front-End Meetup de Itatiba e região.

  • 444

More from Tiago Vilas Boas