Como simplificar Tailwind CSS usando ESLint, Tagged Template Literals e muito mais!

Após anos de desenvolvimento, decidimos padronizar a interface do usuário de um de nossos produtos mais importantes – nosso painel multiaplicativo.

Fizemos isso para nossos clientes e usuários internos (facilidade de uso), bem como para nossa equipe de produto (processo de design, tomada de decisão e codificação mais fáceis). Também precisávamos nos alinhar de forma mais consistente com a marca da nossa empresa.

Para isso, construímos um sistema de design interno , chamado Satélite.

Ao desenvolver o Satellite, analisamos diferentes soluções CSS para a biblioteca de interface do usuário, todas com seus prós e contras: Saas , módulos css , css-in-js .

Depois de considerar frameworks semelhantes ao Bootstrap, optamos pelo framework CSS Tailwind CSS . Por quê?

• CSS puro (sem tempo de execução JS) – bom para desempenho.

  
  

• Tende a gerar arquivos de folha de estilo CSS menores (após a limpeza) – também bom para o desempenho.

  
  

• Sem alternar entre um arquivo CSS e seu código javascript durante o desenvolvimento de novos componentes.

  
  

• Não perca tempo tentando encontrar bons nomes para classes utilitárias.

  
  

• Ajuda a promover a consistência da interface do usuário.

  
  

• Permite definir uma coleção de espaçamentos e cores que mapeiam bem os tokens de design (uma “Paleta restrita”).

  
  

No entanto… havia uma desvantagem no Tailwind: a legibilidade de componentes complexos. A sopa de Tailwind pode ser difícil de digerir quando você não está acostumado com seus nomes de classe.

Em nosso caso, ficou pior porque tivemos que usar uma versão prefixada das classes CSS ( stl- ) para evitar conflitos com nosso CSS legado, adicionando ainda mais ruído e comprimento às nossas strings de nome de classe.

Este artigo mostra como mitigamos o problema de legibilidade. Para começar, usamos várias técnicas de desenvolvimento web, como literais marcados e interpolação, para encurtar o comprimento de nossas strings.

Então simplificamos o uso dos nomes das classes com a ferramenta linter ESLint, fornecendo um DX melhor com duas ferramentas:

• Um plug-in ESLint, porque não havia um plug-in oficial ESLint-Tailwind na época.

  
  

• Uma extensão do Visual Studio Code para simplificar o uso, fornecendo intellisense das várias classes do Tailwind. A extensão oficial do ESLint VS não funcionou para nós porque esperava que um arquivo de configuração ( tailwind.config.js ) estivesse presente no projeto, enquanto usávamos uma versão pré-construída na época. Entre outras tarefas, precisávamos do VS para trabalhar com nosso arquivo de configuração.

  
  

Isso é mais ou menos o pano de fundo. Agora vamos entrar na implementação.

Tailwind – Nomes de classe são bons, mas podem ser complexos

Os nomes das classes são bons

Uma estrutura CSS de utilitário como o Tailwind vem com um grande conjunto de classes de utilitários pré-existentes que você pode usar diretamente em seu HTML e JavaScript. Essas classes permitem a consistência em todo o código.

E eles são totalmente configuráveis: com os mesmos nomes de classe, poderíamos facilmente marcar nosso aplicativo com variantes. Portanto, o uso de nomes de classe Tailwind CSS nos permitiu criar um conjunto consistente de cores, espaçamento, fontes - essencialmente, tudo CSS - e implementou um sistema de design fácil de implementar.

Mas as classes Tailwind podem se tornar complexas

Queríamos simplificar nosso uso das classes do Tailwind.

Para isso, usamos técnicas como literais de template marcados, interpolação e condições.

Começamos com uma longa sequência de classes CSS como as seguintes:

 const className = 'stl-inline-flex stl-items-center stl-justify-center stl-rounded-full stl-h-10 stl-w-10 stl-bg-blue-100';

Mas logo percebemos que isso não era fácil de ler. Além disso, continha ruído desnecessário, como o prefixo stl- , usado para evitar conflitos com outras classes.

Portanto, contamos com a ajuda de literais de modelo marcados para remover o prefixo da string. Criamos uma tag stl :

 const className = stl 'inline-flex items-center justify-center rounded-full h-10 w-10 bq-blue-100';

Finalmente, queríamos mais legibilidade. Então adicionamos:

• Linhas separadas para maior legibilidade e agrupamento de elementos comuns
• Interpolação com literais de modelo marcados embutidos
• Condições para um estilo mais poderoso e adaptável

O resultado é um elegante pedaço de código (CSS):

 const className = stl ' inline-flex items-center justify-center h-10 w-10 ${round && 'rounded-full'} ${iscool ? 'bg-blue-100' : 'bq-red-100'} ;

ESLint – Corrigindo Erros Humanos Sem Esforço

Elegância é uma coisa. O correto é outro. É fácil soletrar incorretamente as classes, especialmente quando há muitas classes para aprender inicialmente no Tailwind.

Aqui está um exemplo do que pode dar errado:

 cost className = stl 'felx space-between text-gray-200';

Você consegue identificar os erros?

• Trocando letras (felx por flex)
• Classes incompletas ou inexistentes (espaço intermediário)
• Ortografia americana vs britânica (cinza)

ESLint to the Rescue – Criando um plug-in ESLint

Precisávamos verificar se as classes que as pessoas usavam eram as corretas. Portanto, usamos a ferramenta linter ESLint para analisar o código, analisá-lo e relatar erros.

Criamos um plug-in ESLint para qualidade de código e para relatar erros em nomes de classes que não existiam.

Aqui está o código ESLint central que faz a validação:

ESLint usa uma árvore de sintaxe abstrata (AST) que dá acesso a linhas individuais de código.

O AST basicamente converte as strings do código em nós, que você pode analisar como coleções e elementos.

Aqui está o detalhamento de como o ESLint analisa o código. A expressão inteira é um node do tipo VariableDeclataion :

Queremos analisar a expressão do lado direito, TaggedTemplateExpression .

Como você pode ver, há um callback que lida com esse tipo de expressão:

No retorno de chamada TaggedTemplateExpression , coletamos todas as strings desse modelo. Por exemplo:

• O TemplateElement

  
  

• os Literals

  
  

Depois que a coleta é concluída, há outro retorno de chamada registrado que percorre os nomes de classe coletados e confirma se eles existem.

Ele faz isso com a coleção validClassNames :

É isso.

Sabíamos imediatamente que criar esse plug-in de validação era a coisa certa a fazer, porque na verdade encontramos alguns erros ortográficos em nosso sistema, bem como na base de código do painel existente!

Propondo sugestões com nossa extensão ESLint VisualStudio

A última ferramenta que criamos foi uma extensão no Visual Studio Code. Usando a mesma lógica do nosso plug-in, o ESLint sugere classes typescript conforme o desenvolvedor digita.

Esse intellisense evita que os desenvolvedores tenham que adivinhar ou acessar o site do Tailwind para pesquisar e encontrar as classes corretas.

Como você pode ver no GIF, ele não apenas propõe nomes de classes, mas também exibe as cores ou ícones úteis para cada sugestão.

Com Tailwind CSS e ESLint, conseguimos impor nossos padrões (acessíveis internamente no Github) melhorando o DX na implementação deles.