Por que Stylus é o melhor pré-processador de CSS que ninguém usa

Não teve até hoje nenhum compilador de CSS que eu amei mais do que o Stylus. Por ser baseado em JavaScript, era possível fazer coisas incríveis (e malucas) com ele. Naquela época, eu rejeitava o Bootstrap internamente e criava meus próprios frameworks artesanais em app.styl .

Meu adeus para o Stylus foi triste, mas necessário. Agora que o drama acabou, vamos para a história que é o que realmente importa.

Aviso de nostalgia: este é um post de "tiozão dev" relembrando os bons tempos. E quer saber? Aqueles tempos nem eram tão bons assim. Memoráveis? Com certeza. Mas com tanto trabalho manual, o programador clássico era quase um pedreiro de bits!

O nascimento do Sass e Compass

Quando tudo ainda era mato, meu conhecimento do css era, obviamente, css plano. Era um caso de amor e ódio, você odiava ter que se repetir, trabalhar de forma engessada, era mais fácil e organizado ter um menu.css, header.css, article.css do que aquele monolito de 400 andares.

E piorou: com o nascimento de navegadores "modernos" (aliás ainda estou esperando um moderno de verdade aparecer, mas só vem Chromium personalizado), começamos a ter que trazer mais verbosidade com --webkit, --moz, --o. Sem contar as adaptações para navegadores legados (sim, aquele dinossauro no meio da sala chamado Internet Explorer).

Pra resolver esse problema, surgiram Sass e Compass. Era uma confusão enorme, o Compass usava .sass (sintaxe identada), mas o mercado preferia Sass, que usava .scss (com chaves). O Compass era incrível, mas trazia um peso (literalmente): ele rodava em Ruby, o que tornava o build lento e sofrido.

E por que eu usava o Compass? Por um motivo simples:

• Eu não precisava usar ponto e vírgula
• Eu não precisava usar colchetes

Até que o dia chegou:

Deprecated: Compass is no longer supported

Confesso que eu não tinha braço para manter uma biblioteca daquelas, era melhor aceitar a derrota. O trabalho web sempre foi sobre usar as melhores ferramentas disponíveis, e o Compass tinha perdido o fôlego. Foi nessa busca por um novo teto que encontrei o Stylus.

Stylus abriu a caixinha de pandora do CSS

Criado pelo lendário TJ Holowaychuk - sim, nada menos que a mesma pessoa por trás do Express e Mocha - Stylus chegou com uma premissa transformadora: modernizar ao máximo os estilos em cascata. Se o Sass tirou as chaves, o Stylus tirou tudo. Você não precisava de dois pontos :, ponto e vírgula ; ou chaves {}.

logoH = 60px

.toolbar
	display flex
	align-items center
	justify-content space-between
	gap 4px
	.logo
		height logoH
		img
			height 100%
			object-fit contain

Isso era - e ainda é! - mágico. Na época, os puristas diziam que a falta de sintaxe rígida confundia o compilador e atrasava o build em alguns milissegundos. Um preço pequeno para ter essa obra de arte. Mas o poder real aqui estava no JavaScript. Como o Stylus era "JS-first", você podia criar lógica complexa como se estivesse programando o backend:

// Sim, esse é um comentário estilo js em uma folha de estilos.
// Lembra de como era um saco criar utilitários de margem? 
// Então... No Stylus, basta um loop que parecia JS puro:

generate-spacings(limit)
  for i in (1..limit)
    .m-t-{i}
      margin-top: (i * 10)px
    .p-a-{i}
      padding: (i * 8)px

// 🗿 Chama! (a função)
generate-spacings(5)

// Tem mais: funções que aceitam parâmetros como JS?
apply-glassmorphism(opacity = 0.5, blur = 10px)
  background rgba(255, 255, 255, opacity)
  backdrop-filter blur(blur)
  border 1px solid rgba(255, 255, 255, (opacity / 2))

.card
  apply-glassmorphism: 0.3, 15px

Não tinha nada mais prazeroso que usar aqueles grids automatizados, elegantes e lindos, feitos com js.

Ferramentas não morrem por serem ruins. Morrem quando o custo humano de usá-las supera o benefício técnico

A mão do mercado é implacável

Stylus ainda existe, então por que parei?

Porque na nossa carreira, muitas vezes temos que abrir mão do que é "bom" para nós, em prol do que é "bom" para o time. Eu era - e parece que ainda sou - o único cara do Stylus. Ninguém queria aprender aquela "sintaxe estranha". O resultado foi o retorno forçado ao Sass (SCSS), o padrão que colocava comida na mesa.

O presente e o futuro têm um nome

E esse nome é Tailwind.

Dura confissão: Não sinto falta do Stylus no dia a dia. Sinto nostalgia da liberdade de escolher ferramentas pelo prazer técnico, e às vezes, debugando uma classe hover:focus:ring-2, me pego com saudade daquela função apply-glassmorphism. Eu gosto da eficiência atual, o tempo que eu gastaria com pré-processadores, sobra para ter e aplicar novas ideias, conhecer novos conceitos e testar aplicações.

Mas esse post não é sobre Tailwind, fica para um próximo!