¿Qué es Lightning CSS?

Transformador ultrarápido de CSS


Una de las problemáticas que tiene PostCSS es que, aunque es muy potente, suele ser tedioso de configurar. No basta con una instalación, sino que hay que preparar ciertos detalles para que funcione correctamente, instalar plugins, configurarlos, etc.

¿Qué es Lightning CSS?

LightningCSS nace del proyecto Parcel, una alternativa a Webpack y Vite, en la que el autor desarrolló su propia alternativa a PostCSS buscando mejorar varios aspectos de PostCSS. Entre ellos, se encuentran los siguientes:

Por lo tanto, si te interesa alguno de estos aspectos, te recomiendo utilizarlo.

Instalación

En nuestro proyecto de Vite, simplemente instalamos el paquete lightningcss en nuestro proyecto:

$ npm install -D lightningcss

Vite utiliza PostCSS por defecto para procesar los archivos CSS, pero lo podemos cambiar creando o modificando el archivo vite.config.js y añadiendo lo siguiente:

export default {
  css: {
    transformer: "lightningcss",
  },
  build: {
    cssMinify: "lightningcss"
  }
}

Esto hará que procese (transforme) los archivos .css y además también los minifique usando lightningcss. Si deseamos pasarle una configuración personalizada, sólo tenemos que añadir la propiedad lightningcss al objeto css (*justo debajo de transformer, por ejemplo`) y pasarle el objeto de configuración.

Soporte WASM

Una de las cosas interesantes que tiene LightningCSS es que posee soporte WASM en el paquete lightningcss-wasm, por lo que puede ser utilizado en entornos como Deno o directamente en el navegador, para hacer transformaciones en tiempo real.

Por ejemplo, crea este fragmento de código en un archivo index.js:

import init, { transform } from 'https://esm.run/lightningcss-wasm';

await init();

let {code, map} = transform({
  filename: 'style.css',
  code: new TextEncoder().encode('.foo { color: red }'),
  minify: true,
  sourceMap: true
});

console.log(new TextDecoder().decode(code));

Ahora, podemos utilizarlo directamente en un <script> en un navegador, o ejecutarlo con Deno:

$ deno run --allow-net index.js

Lightning CSS desde terminal

Al igual que con PostCSS, podemos utilizar LightningCSS desde una línea de comandos. Mediante el comando npx lightningcss-cli --help podemos ver la lista de todos los parámetros disponibles, pero podemos instalarlo y hacer un uso básico simplemente ejecutando los siguientes comandos:

# Instalamos el paquete de lightningcss desde terminal
$ npm install -D lightningcss-cli

# Procesamos el archivo src/index.css y mostramos el resultado
$ npx lightningcss-cli src/index.css

# Idem, pero además minificamos y lo guardamos en dist/index.min.css
$ npx lightningcss-cli src/index.css --minify -o dist/index.min.css

Aunque en general su uso habitual se hace desde herramientas como Vite, esto puede ser útil en casos concretos donde queremos personalizar el workflow de trabajo e indicar que realice tareas muy específicas.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev