Formateur CSS

Le CSS paraît assez simple à reformater avec une poignée de règles de recherche-remplacement — ajouter un saut de ligne après chaque point-virgule, indenter dans les accolades — jusqu'à ce que l'imbrication, les media queries, et des fonctionnalités modernes comme les propriétés personnalisées et les container queries soient réellement présentes dans le fichier. Une approche basée sur des expressions régulières n'a aucune vraie notion de profondeur d'imbrication, donc elle ne peut pas indenter correctement une media query contenant plusieurs sélecteurs imbriqués, et n'a aucun moyen de distinguer un point-virgule terminant une déclaration d'un qui apparaît dans une valeur de chaîne ou une propriété personnalisée contenant du texte arbitraire. Analyser d'abord la feuille de style en une vraie structure — comprendre quelle règle est imbriquée dans laquelle, où chaque bloc commence et finit — est ce qui rend le formatage correct sur du vrai CSS non trivial, pas seulement sur des exemples jouets.

La minification de cet outil se limite à supprimer les espaces blancs et commentaires — les parties d'une feuille de style qui existent purement pour un humain qui la lit et ne portent aucun sens pour le moteur de rendu du navigateur. Elle ne fusionne délibérément pas les sélecteurs dupliqués, ne réordonne pas les déclarations, ni ne raccourcit les valeurs de couleur comme réécrire `#ffffff` en `#fff`, même si un minificateur plus agressif pourrait faire les trois et produire un fichier plus petit. Ces transformations peuvent changer le comportement de façons faciles à manquer : fusionner deux règles avec le même sélecteur mais écrites à des points différents de la cascade peut changer quelle déclaration l'emporte en cas de conflit, et réordonner les déclarations porte le même risque. La suppression des espaces blancs seule ne porte pas ce risque — elle ne peut pas changer ce qu'un navigateur rend, seulement combien d'octets il faut pour le décrire.

Les serveurs web compressent presque universellement les ressources texte avec gzip ou brotli avant de les envoyer sur le réseau, et les deux algorithmes de compression sont très bons pour exploiter exactement le type de redondance que représentent les espaces blancs et l'indentation cohérente — les séquences répétées d'espaces se compressent déjà extrêmement bien. Cela signifie que l'écart entre une feuille de style formatée et une minifiée, une fois toutes deux passées par gzip, est nettement plus petit que ne le suggère la différence de taille non compressée. Minifier aide toujours, en particulier en supprimant les commentaires directement plutôt que de simplement les compresser, mais cela vaut la peine de savoir que l'essentiel du bénéfice de transfert réseau promis par l'outillage moderne vient de la compression, et la minification CSS n'apporte qu'une couche supplémentaire plus petite par-dessus.

Formater un fichier Sass ou Less signifie appliquer une indentation et un espacement cohérents au code source exactement tel qu'il est écrit — l'imbrication, les variables, les mixins et les directives de contrôle restent intacts, dans leur syntaxe de préprocesseur d'origine. C'est une opération complètement différente de la compilation, qui résout les variables en leurs valeurs réelles, aplatit les sélecteurs imbriqués en règles CSS plates indépendantes, et exécute tout mixin pour produire sa sortie développée. Quelqu'un s'attendant à du CSS compilé à partir d'une entrée SCSS sera surpris de voir le même code source imbriqué et plein de variables formaté plutôt que résolu — cet outil est un formateur pour le langage du préprocesseur, pas un compilateur pour lui.