Stylus + PostCSS

Minha atual stack de CSS

5 min readJun 26, 2016

Esses dias escrevi um artigo falando sobre o Stylus e comparando ele com o Sass, também contei uma breve história de como foi minha evolução nos pré-processadores de CSS, mas eu ainda não terminei aquela história.

A pouquíssimo tempo atrás descobri o PostCSS, a princípio achei que ele fosse só mais um pré-processador de CSS ou algo do tipo. Porém é muito mais que isso, ele abre um novo mundo de possibilidades e novidades. Inicialmente tentei me adaptar a usar puro substituindo o Stylus pelo Post, mas logo descobri que ele poderia ser usado com qualquer pré-processador ou até mesmo com CSS puro.

Sobre o PostCSS

É engraçado, mas a maioria das pessoas que conheci que já ouviram falar dele e ainda não usam no dia-a-dia não sabe definir ao certo o que é essa ferramenta. Basicamente o PostCSS é um wrapper, uma caixa de ferramentas, algo em que podemos encaixar vários plugins e personalizar totalmente a experiência de um pré-processador. Entro em mais detalhes no meu post O que é postCSS?

Sozinho ele não faz nada, assim como o Gulp ou Grunt sozinhos pouco poder tem. A grande magia são os plugins que você adiciona ao PostCSS para criar o seu pré-processador personalizado, com features que nenhum pré-processador atual tem. Ele roda em cima do CSS puro ou do CSS gerado por um pré-processador, assim você pode combinar tudo que já existe num pré-processador e adicionar mais poder a ele com o PostCSS.

Plugins PostCSS

Autoprefixer:
Serve para adicionar ou remover prefixos dependendo dos navegadores que você precisa dar suporte. A grande sacada é que você pode configurar o suporte que desejar e usando a API do Can I Use ele prefixa o seu CSS de acordo com a necessidade e não adiciona onde não precisa de suporte. Por exemplo border-radius não precisa de prefixos e muita gente adiciona sem necessidade.
PxToRem:
É uma boa prática quando se está fazendo sites responsivos ou aplicativos mobile usar valores relativos como EM ou REM para as fontes, porém o layout que o designer faz é todo em PX e você precisa converter na mão ou criar um mixin que faça isso no pré-processador. Usando o PxToRem você não precisa fazer nada, quando o PostCSS rodar ele já converte todos os valores automagicamente e você não precisa se preocupar com nada.
CSSNano:
O mais poderoso minifier de CSS do mercado. Não só remove os espaços em branco, mas não vou listar todas as features para não alongar o post e são tantas que daria para fazer um post só sobre esse plugin. Veja mais no site do CSSNano.
CSS-Mqpacker:
Na minha opinião é o melhor complemento para usar junto com o CSSNano (será adicionado ao Nano na versão 4.0). Serve para juntar todos os media-queries iguais num único media-querie. Quando se trabalha com o código modularizado é comum ter várias regras de media-queries em vários arquivos separados e o mqpacker junta todas elas de uma forma inteligente.
Lost Grid:
É o mais completo grid que existe na atualidade. Baseado no finado Semantic Grid (less) e do mesmo criador do Jeet (Sass/stylus) que também foi descontinuado. Funciona tanto com Calc, quanto com flexbox. Futuramente farei um post só sobre ele também.
Flexibility:
Melhor fallback para flexbox o flexibility.js deve ser usado junto com o PostCSS-flexibility. Suporte IE8+.

Existem muito mais plugins para PostCSS do que esses listados, mas esses são os que eu uso hoje na minha stack.

Plugins Stylus, ou melhor plugin

Sim, uso apenas um plugin para Stylus e não achei nada em PostCSS que substitua ele.

Rupture:
Baseado no breakpoint-slicer (Sass), o rupture é um conjunto de mixins feito para facilitar a vida na hora de trabalhar com media-queries. Documentação simples e direta, vale a pena adicionar na stack. O Vitor Mendrone escreveu um excelente artigo sobre essa ferramenta.

Task Runner

Para fazer toda a magia acontecer você precisa de um task runner, no meu caso utilizo Gulp, mas daria para fazer com Grunt ou Webpack também. Se você nunca configurou ou usou o Gulp, leia esse tutorial.

No começo cheguei a testar o PostStylus, que torna o PostCSS num plugin do Stylus onde você adiciona mais plugins do Post, porém achei que fica amarrado de mais ao pré-processador. Queria uma forma de usar Post com qualquer pré-processador.

Lendo a documentação e o código do Lost Grid, percebi que a task do Gulp na branch de gh-Pages deles roda Stylus e PostCSS juntos, sem precisar do PostStylus. O que o Cory Simmons fez foi encadear a task do Post, logo no output da task do Stylus.

Usando essa técnica como base, o código fica dessa forma:

‘use strict’;
let gulp          = require(‘gulp’),
    cssnano       = require('gulp-cssnano'),
    postcss       = require('gulp-postcss'),
    stylus        = require('gulp-stylus'),
    lost          = require('lost'),
    pxtorem       = require('postcss-pxtorem'),
    autoprefixer  = require('autoprefixer'),
    rupture       = require('rupture'),
    mqpacker      = require('css-mqpacker'),
    sourcemaps    = require('gulp-sourcemaps'),
    flexibility   = require('postcss-flexibility');let paths = {
  cssSource: 'src/css/',
  cssDestination: 'dist/css/'
};gulp.task('styles', function() {
  let config = {
    'include css': true,
    'use': [rupture()],
    define: customVars || {}
  };
  return gulp.src(paths.cssSource + '**/*.styl')
    .pipe(sourcemaps.init())
    .pipe(stylus(config))
    .pipe(postcss([
      lost(),
      pxtorem(),
      mqpacker(),
      autoprefixer({
        browsers: [
         'last 2 versions', 
         'Android >= 4', 
         'IE >= 9'
        ]
      }),
      flexibility(),
      cssnano({ zindex: false })          
    ]))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(paths.cssDestination));
});gulp.watch('src/**/*.*', ['styles']);
gulp.task('default', ['styles']);

(Uso ECMAScript 6 em tudo que é feito em NodeJS)

Acabou? Ainda não… E o framework?

Agora entro num assunto polêmico, mas cabe um framework CSS nessa stack? Boostrap, Fundation ou algo assim?

Sim, inclusive eu uso. Atualmente estou usando o Bootstrap-Stylus, mas não uso todo o bootstrap já que nessa stack já existe um Grid e também acredito que nem tudo do bootstrap seja necessário.

No meu caso uso os seguintes componentes:

@import 'bootstrap/variables'
@import 'bootstrap/mixins'
@import 'bootstrap/responsive-utilities'
@import 'bootstrap/buttons'
@import 'bootstrap/forms'
@import 'bootstrap/input-groups'
@import 'bootstrap/modals'
@import 'bootstrap/pagination'
@import 'bootstrap/popovers'
@import 'bootstrap/tooltip'
@import 'bootstrap/tables'

Por muito tempo eu fui contra o uso de bootstrap, mas conversando com algumas pessoas e depois de trabalhar em grandes projetos percebi que algumas coisas não precisam ser reinventadas. O Bootstrap foi desenvolvido e é usado por milhares de desenvolvedores que testaram arduamente nos mais diversos casos e praticamente tudo que você teria de problemas já foi solucionado.

Sendo assim usamos componentes feitos com bootstrap como forms, modais, paginação, popovers, tooltip e alterando as variáveis do bootstrap estilizamos os compontenes da nossa maneira. Também tem a vantagem de podermos usar o JavaScript do Angular Bootstrap junto com o estilo do Bootstrap Stylus.

Conclusão

Estamos usando essa stack em dois projetos na empresa que trabalho hoje, ela se alinha bem com as nossas necessidades no projeto que trabalhamos. Tudo que fomos adicionando foi sendo sugerido e alinhado com a equipe, em alguns momentos discordamos e concordamos.

Outros plugins do PostCSS já estiveram nessa stack, mas saíram quando percebemos que não tinham o suporte aos navegadores que trabalhamos ou por não achar muita vantagem adicionar mais um plugin que faça pouco.

Se você tiver alguma sugestão de plugin ou quiser saber minha opinião sobre algum deles, deixe nos comentários. Sugestões e correções também são bem vindas.

Outros artigos relacionados:

O que é postCSS?
https://medium.com/%40neysimes/o-que-%C3%A9-o-postcss-be462abb5298

Sass vs stylus
https://medium.com/@neysimes/sass-vs-stylus-28c7e2884f1a#.7vltdi4re