Форматировщик CSS

CSS выглядит достаточно простым, чтобы переформатировать его парой правил «найти и заменить» — добавить перенос строки после каждой точки с запятой, добавить отступ внутри фигурных скобок, — пока в файле не появляются вложенность, медиазапросы и современные возможности вроде пользовательских свойств и container query. У подхода на основе регулярных выражений нет реального понятия глубины вложенности, поэтому он не может правильно расставить отступы в медиазапросе с несколькими вложенными селекторами, и он не способен отличить точку с запятой, завершающую декларацию, от той, что находится внутри строкового значения или пользовательского свойства с произвольным текстом. Именно разбор таблицы стилей в настоящую структуру — понимание того, какое правило вложено в какое и где начинается и заканчивается каждый блок, — делает форматирование корректным на реальном, нетривиальном CSS, а не только на игрушечных примерах.

Минификация в этом инструменте ограничена удалением пробелов и комментариев — той части таблицы стилей, которая существует исключительно для человека, читающего код, и не имеет никакого значения для движка рендеринга браузера. Инструмент намеренно не объединяет одинаковые селекторы, не меняет порядок деклараций и не сокращает цветовые значения вроде превращения `#ffffff` в `#fff`, хотя более агрессивный минификатор мог бы делать всё это и получать файл ещё меньшего размера. Такие преобразования могут незаметно изменить поведение: объединение двух правил с одинаковым селектором, но написанных в разных местах каскада, способно изменить, какая декларация побеждает при конфликте, и изменение порядка деклараций несёт тот же риск. Одно только удаление пробелов такого риска не несёт — оно не может повлиять на то, что рендерит браузер, а влияет лишь на то, сколько байт нужно, чтобы это описать.

Веб-серверы практически повсеместно сжимают текстовые ресурсы с помощью gzip или brotli перед отправкой по сети, и оба алгоритма сжатия отлично умеют использовать именно ту избыточность, которую представляют собой пробелы и единообразные отступы, — повторяющиеся последовательности пробелов и так сжимаются очень хорошо. Это значит, что разница между отформатированной и минифицированной таблицей стилей после прохождения через gzip заметно меньше, чем можно предположить по разнице в несжатом размере. Минификация всё равно полезна — в первую очередь потому, что полностью убирает комментарии, а не просто сжимает их, — но стоит понимать, что основную часть выгоды по объёму передачи, которую обещают современные инструменты, даёт именно сжатие, а минификация добавляет к ней лишь небольшой дополнительный слой.

Форматирование файла Sass или Less означает применение единообразных отступов и пробелов к исходному коду ровно в том виде, в каком он написан, — вложенность, переменные, миксины и управляющие директивы остаются нетронутыми, в исходном синтаксисе препроцессора. Это совершенно другая операция по сравнению с компиляцией, которая разрешает переменные в их фактические значения, преобразует вложенные селекторы в самостоятельные плоские правила CSS и выполняет все миксины, получая их развёрнутый результат. Тот, кто ожидает получить скомпилированный CSS из SCSS-файла, будет удивлён, увидев тот же вложенный код с переменными, только отформатированный, а не разрешённый, — этот инструмент форматирует язык препроцессора, а не компилирует его.