Lightning CSS

Qué es

Lightning CSS es un parser, transformador, bundler y minificador de CSS escrito en Rust, creado por Devon Govett y mantenido por el equipo de Parcel. Se apoya en las crates cssparser y selectors de Mozilla, las mismas que usa Firefox, por lo que parsea el CSS con precisión de navegador. Es el motor de CSS que utiliza Parcel internamente, aunque también puede usarse de forma independiente.

Para qué sirve

• Minificar hojas de estilo reduciendo su tamaño con fusión de reglas, consolidación de propiedades y optimización de prefijos.
• Transpilar sintaxis moderna de CSS (anidamiento, custom media queries, propiedades lógicas, colores de gama amplia) a versiones compatibles según los navegadores objetivo.
• Agrupar varios archivos CSS y sus @import en un único bundle.
• Usar CSS Modules con scoping local de clases, IDs, animaciones y variables, generando un mapa JSON para JavaScript.

Cuándo usarlo

Es ideal cuando el rendimiento del build importa y quieres usar CSS de última generación sin renunciar a la compatibilidad con navegadores antiguos. Encaja como reemplazo de PostCSS más autoprefixer y cssnano, ya que combina transpilación, prefijado y minificación en una sola herramienta nativa. Está integrado de serie en Parcel y disponible como plugin en Vite y otros bundlers; si tu proyecto ya depende mucho del ecosistema de plugins de PostCSS, valora la migración con calma.

Ejemplo

Instalación y uso con la API de Node:

npm install --save-dev lightningcss

import { transform } from 'lightningcss';

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

Desde la línea de comandos con el paquete CLI:

npm install --save-dev lightningcss-cli

lightningcss --minify --bundle --targets ">= 0.25%" input.css -o output.css

Puntos clave

• Velocidad extrema: más de 100 veces más rápido que herramientas equivalentes en JavaScript, procesando millones de líneas por segundo.
• Valores de propiedad tipados según la gramática de la especificación CSS, lo que da transformaciones más fiables.
• Manejo automático de prefijos de fabricante según los navegadores objetivo, configurable con browserslist.
• Disponible como CLI, paquete de Node, crate de Rust y build WASM.

Ten en cuenta

Es un proyecto activo bajo licencia MPL-2.0. Las APIs de bundle y de visitors no están disponibles en el build WASM, así que para esos casos necesitas la versión nativa de Node. Al sustituir a PostCSS pierdes acceso a su amplio ecosistema de plugins: si dependes de transformaciones muy específicas de la comunidad, comprueba antes que Lightning CSS cubre lo que necesitas.