Formateador de CSS

CSS parece lo bastante simple como para reformatear con un puñado de reglas de buscar y reemplazar — añadir un salto de línea después de cada punto y coma, indentar dentro de llaves — hasta que el anidamiento, las media queries, y características modernas como las propiedades personalizadas y las container queries realmente están en el archivo. Un enfoque basado en expresiones regulares no tiene ningún concepto real de profundidad de anidamiento, así que no puede indentar correctamente una media query que contiene varios selectores anidados, y no tiene forma de distinguir un punto y coma que termina una declaración de uno que aparece dentro de un valor de cadena o una propiedad personalizada que contiene texto arbitrario. Analizar primero la hoja de estilo en una estructura real — entendiendo qué regla está anidada dentro de cuál, dónde empieza y termina cada bloque — es lo que hace que el formateo sea correcto en CSS real y no trivial, en lugar de solo en ejemplos de juguete.

La minificación de esta herramienta se limita a eliminar espacios en blanco y comentarios — las partes de una hoja de estilo que existen puramente para un humano que la lee y no llevan ningún significado para el motor de renderizado del navegador. Deliberadamente no fusiona selectores duplicados, no reordena declaraciones, ni acorta valores de color como reescribir `#ffffff` a `#fff`, aunque un minificador más agresivo podría hacer las tres cosas y producir un archivo más pequeño. Esas transformaciones pueden cambiar el comportamiento de formas fáciles de pasar por alto: fusionar dos reglas con el mismo selector pero escritas en puntos distintos de la cascada puede cambiar qué declaración gana cuando entran en conflicto, y reordenar declaraciones tiene el mismo riesgo. La eliminación de espacios en blanco por sí sola no lleva ese riesgo — no puede cambiar lo que un navegador renderiza, solo cuántos bytes toma describirlo.

Los servidores web casi universalmente comprimen los recursos de texto con gzip o brotli antes de enviarlos por la red, y ambos algoritmos de compresión son muy buenos explotando exactamente el tipo de redundancia que representan los espacios en blanco y la indentación consistente — secuencias repetidas de espacios ya se comprimen extremadamente bien. Esto significa que la brecha entre una hoja de estilo formateada y una minificada, una vez que ambas pasan por gzip, es considerablemente menor de lo que sugiere la diferencia de tamaño sin comprimir. Minificar sigue ayudando, particularmente al eliminar comentarios directamente en lugar de solo comprimirlos, pero vale la pena saber que la mayor parte del beneficio de transferencia de red que promete la herramienta moderna proviene de la compresión, y la minificación de CSS contribuye una capa adicional más pequeña encima.

Formatear un archivo Sass o Less significa aplicar indentación y espaciado consistentes al código fuente exactamente como está escrito — el anidamiento, las variables, los mixins y las directivas de control permanecen intactos, en su sintaxis original de preprocesador. Eso es una operación completamente distinta a compilar, que resuelve las variables a sus valores reales, aplana los selectores anidados en reglas CSS planas independientes, y ejecuta cualquier mixin para producir su salida expandida. Alguien que espere CSS compilado a partir de una entrada SCSS se sorprenderá al ver el mismo código fuente anidado y lleno de variables formateado en lugar de resuelto — esta herramienta es un formateador para el lenguaje del preprocesador, no un compilador para él.