ECSStatic: CSS-in-JS en templates

Varias de las librerías del ecosistema CSS-in-JS empezaron utilizando la sintaxis de objetos desde Javascript. Esta sintaxis, aunque tiene varias ventajas, no es muy amigable para desarrolladores que se sienten más cómodos trabajando con una sintaxis más cercana a CSS, ya que se debe convertir el código CSS a la sintaxis de objeto.

Por esta (y otras razones), se idea una nueva sintaxis basada en los string templates de Javascript, que permiten escribir el código CSS dentro de una cadena de texto para procesarlo posteriormente. ECSStatic es una librería que permite utilizar esta modalidad.

Instalación

Para instalar la librería ECSStatic sólo tenemos que instalar el paquete @acab/ecsstatic con NPM. Este paquete contiene tanto la librería como la integración para utilizar en un proyecto de Vite:

$ npm install -D @acab/ecsstatic

Una vez instalado el paquete, editamos el fichero vite.config.js, importamos la librería y añadimos como plugin la función ecsstatic que importamos de la carpeta vite:

import { ecsstatic } from '@acab/ecsstatic/vite';

export default defineConfig({
  plugins: [ecsstatic()],
});

Con esto estaremos listos para utilizar la librería en nuestra aplicación web. Ahora veremos como se utiliza.

Uso de la librería

Utilizar la librería ECSStatic es un proceso muy sencillo. Lo primero es importar el helper css desde la librería. Utilizaremos ese helper para definir todos los estilos que queremos agrupar y guardarlos en una constante:

import { css } from '@acab/ecsstatic';

const styles = css`
  all: unset;
  font: inherit;
  color: #862e9c;
  border: 1px solid;
  border-radius: 4px;
  padding: 0.5rem 1rem;

  &:hover,
  &:focus {
    color: #be4bdb;
  }
`;

const html = /* html */`
<div class="${styles}">
  Contenido de texto
</div>`;

document.body.insertAdjacentHTML("beforeend", html);

Dicha constante styles no va a guardar ninguna estructura, sino el nuevo nombre de clase autogenerada, un similar a este .🎈-1yibmfx. Esto es el nombre de la clase que ECSStatic la genera para asegurarse que esos estilos sólo afectan a ese componente o elemento, y no sufrir colisiones de clases accidentales. Luego, solo se trata de añadir la clase al elemento que queremos que tenga los estilos.

Esta forma de trabajar nos proporciona varios puntos interesantes:

• 1️⃣ El código CSS del string template es literalmente código CSS.
• 2️⃣ Con extensiones como es6-string-html podemos tener resaltado de color de sintaxis.
• 3️⃣ Los estilos solo afectan a ese elemento, para evitar colisiones de nombres.
• 4️⃣ También puedes utilizar Sass (mixins, funciones, etc...).

Alternativas a ECSStatic

Existen muchas librerías CSS-in-JS que soportan la sintaxis de string templates. Algunas muy conocidas son Emotion, Styled Components, Linaria o Panda CSS, por ejemplo.

Un detalle muy importante, es que algunas librerías como Emotion o Styled Components, aunque son muy populares, generan los estilos en código Javascript. Sin embargo, otras como ECSStatic, Panda CSS o Linaria generan los estilos en código CSS, por lo que son mucho más eficientes y reducen el tamaño del código Javascript, que es más costoso en términos de rendimiento.

Veamos algunas alternativas de librerías CSS-in-JS:

Si no lo has visto aún, echa un vistazo a Vanilla Extract, un post donde vemos una librería CSS-in-JS con sintaxis de objetos Javascript.