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:
- 1️⃣ Simplificar la configuración de la herramienta por parte del desarrollador
- 2️⃣ Transpilar CSS modernizando las features que ofrece, incluidas de serie
- 3️⃣ Crear transformaciones CSS personalizadas
- 4️⃣ Permitir usar CSS Modules o crear bundles
- 5️⃣ Crear un sistema de optimización y minificación personalizada.
- 6️⃣ Desarrollarlo en Rust para mejorar su velocidad y rendimiento
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.