¡Cómo simplificar Tailwind CSS usando ESLint, literales de plantillas etiquetadas y más!

Después de años de desarrollo, decidimos estandarizar la interfaz de usuario de uno de nuestros productos más importantes: nuestro tablero de múltiples aplicaciones.

Hicimos esto para nuestros clientes y usuarios internos (facilidad de uso), así como para nuestro equipo de productos (proceso de diseño, toma de decisiones y codificación más sencillos). También necesitábamos alinearnos de manera más consistente con la marca de nuestra empresa.

Para ello, construimos un sistema de diseño interno , llamado Satélite.

Al desarrollar Satellite, observamos diferentes soluciones CSS para la biblioteca de UI, todas con sus ventajas y desventajas: Saas , módulos css, css-in-js .

Después de considerar marcos similares a Bootstrap, nos decidimos por el marco CSS Tailwind CSS . ¿Por qué?

• CSS puro (sin tiempo de ejecución JS): bueno para el rendimiento.

  
  

• Tiende a generar archivos de hoja de estilo CSS más pequeños (después de la purga), lo que también es bueno para el rendimiento.

  
  

• No cambie entre un archivo CSS y su código javascript mientras desarrolla nuevos componentes.

  
  

• No pierda tiempo tratando de encontrar buenos nombres para las clases de servicios públicos.

  
  

• Ayuda a promover la coherencia de la interfaz de usuario.

  
  

• Le permite definir una colección de espacios y colores que se asignan bien a los tokens de diseño (una "Paleta restringida").

  
  

Sin embargo... Tailwind tenía un inconveniente: la legibilidad de los componentes complejos. La sopa de Tailwind puede ser difícil de digerir cuando no estás acostumbrado a sus nombres de clase.

En nuestro caso, empeoró porque tuvimos que usar una versión prefijada de las clases CSS ( stl- ) para evitar conflictos con nuestro CSS heredado, agregando aún más ruido y longitud a nuestras cadenas de nombre de clase.

Este artículo muestra cómo mitigamos el problema de legibilidad. Para empezar, usamos varias técnicas de desarrollo web, como literales etiquetados e interpolación, para acortar la longitud de nuestras cadenas.

Luego simplificamos el uso de los nombres de clase con la herramienta de linter ESLint, proporcionando un mejor DX con dos herramientas:

• Un complemento de ESLint, porque no había un complemento oficial de ESLint-Tailwind en ese momento.

  
  

• Una extensión de Visual Studio Code para simplificar el uso al proporcionar un sentido inteligente de las muchas clases de Tailwind. La extensión oficial de ESLint VS no funcionó para nosotros porque esperaba que un archivo de configuración ( tailwind.config.js ) estuviera presente en el proyecto, mientras que en ese momento habíamos usado una versión precompilada. Entre otras tareas, necesitábamos VS para trabajar con nuestro archivo de configuración.

  
  

Ese es más o menos el trasfondo. Ahora entremos en la implementación.

Tailwind: los nombres de clase son buenos, pero pueden volverse complejos

Los nombres de clase son buenos

Un marco CSS que prioriza la utilidad como Tailwind viene con un gran conjunto de clases de utilidad preexistentes que puede usar directamente en su HTML y JavaScript. Estas clases permiten la coherencia en todo el código.

Y son totalmente configurables: con los mismos nombres de clase, podríamos marcar fácilmente nuestra aplicación con variantes. Por lo tanto, el uso de los nombres de clase CSS de Tailwind nos permitió crear un conjunto uniforme de colores, espacios, fuentes (esencialmente, todo lo relacionado con CSS) e implementar un sistema de diseño fácil de implementar.

Pero las clases Tailwind pueden volverse complejas

Queríamos simplificar nuestro uso de las clases de Tailwind.

Para ello, utilizamos técnicas como literales de plantillas etiquetadas, interpolación y condiciones.

Comenzamos con una larga cadena de clases CSS como la siguiente:

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

Pero pronto nos dimos cuenta de que esto no era fácil de leer. Además, contenía ruido innecesario, como el prefijo stl- , utilizado para evitar conflictos con otras clases.

Así que solicitamos la ayuda de los literales de plantilla etiquetados para eliminar el prefijo de la cadena. Creamos una etiqueta stl :

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

Finalmente, queríamos más legibilidad. Así que agregamos:

• Líneas separadas para mayor legibilidad y agrupación de elementos comunes
• Interpolación con literales de plantilla etiquetados en línea
• Condiciones para un peinado más potente y adaptable

El resultado es una elegante pieza 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: corrección de errores humanos sin esfuerzo

La elegancia es una cosa. Correcto es otro. Es fácil escribir mal las clases, especialmente cuando hay muchas clases sobre las que aprender inicialmente en Tailwind.

He aquí un ejemplo de lo que puede salir mal:

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

¿Puedes detectar los errores?

• Cambio de letras (felx por flex)
• Clases incompletas o inexistentes (espacio intermedio)
• Ortografía americana vs británica (gris)

ESLint al rescate: creación de un complemento de ESLint

Necesitábamos verificar que las clases que la gente usaba eran las correctas. Así que usamos la herramienta de linter ESLint para analizar el código, analizarlo e informar errores.

Creamos un complemento ESLint para la calidad del código y para informar errores en nombres de clases que no existían.

Aquí está el código ESLint central que realiza la validación:

ESLint utiliza un árbol de sintaxis abstracta (AST) que da acceso a líneas de código individuales.

El AST esencialmente convierte las cadenas del código en nodos, que puede analizar como colecciones y elementos.

Aquí está el desglose de cómo ESLint analiza el código. La expresión completa es un node de tipo VariableDeclataion :

Queremos analizar la expresión del lado derecho, TaggedTemplateExpression .

Como puede ver, hay una devolución de llamada que maneja este tipo de expresión:

En la devolución de llamada TaggedTemplateExpression , recopilamos todas las cadenas en esa plantilla. Por ejemplo:

• El TemplateElement

  
  

• los Literals

  
  

Una vez que se realiza la recopilación, hay otra devolución de llamada registrada que recorre los nombres de clase recopilados y confirma si existen.

Hace esto con la colección, validClassNames :

Eso es todo.

Sabíamos de inmediato que crear este complemento de validación era lo correcto, porque en realidad encontramos algunos errores ortográficos en nuestro sistema, ¡así como en el código base del tablero existente!

Proponer sugerencias con nuestra extensión ESLint VisualStudio

La última herramienta que creamos fue una extensión en Visual Studio Code. Usando la misma lógica que en nuestro complemento, ESLint sugiere clases de mecanografiado a medida que un desarrollador escribe.

Esta inteligencia evita que los desarrolladores adivinen o tengan que ir al sitio web de Tailwind para buscar y encontrar las clases correctas.

Como puedes ver en el GIF, no solo propone nombres de clases, también muestra los colores o iconos útiles para cada sugerencia.

Con Tailwind CSS y ESLint, hemos podido hacer cumplir nuestros estándares (accesibles internamente en Github) al mejorar el DX al implementarlos.