Formatador de CSS

CSS parece simples o bastante para reformatar com um punhado de regras de buscar e substituir — adicionar uma quebra de linha depois de cada ponto e vírgula, indentar dentro de chaves — até que aninhamento, media queries, e recursos modernos como propriedades personalizadas e container queries realmente estejam no arquivo. Uma abordagem baseada em expressões regulares não tem nenhum conceito real de profundidade de aninhamento, então não consegue indentar corretamente uma media query contendo vários seletores aninhados, e não tem como distinguir um ponto e vírgula que termina uma declaração de um que aparece dentro de um valor de string ou uma propriedade personalizada contendo texto arbitrário. Analisar primeiro a folha de estilo em uma estrutura real — entendendo qual regra está aninhada dentro de qual, onde cada bloco começa e termina — é o que torna a formatação correta em CSS real e não trivial, em vez de apenas em exemplos de brinquedo.

A minificação desta ferramenta se limita a remover espaços em branco e comentários — as partes de uma folha de estilo que existem puramente para um humano que a lê e não carregam nenhum significado para o motor de renderização do navegador. Ela deliberadamente não funde seletores duplicados, não reordena declarações, nem abrevia valores de cor como reescrever `#ffffff` para `#fff`, embora um minificador mais agressivo pudesse fazer as três coisas e produzir um arquivo menor. Essas transformações podem mudar o comportamento de formas fáceis de passar despercebidas: fundir duas regras com o mesmo seletor mas escritas em pontos distintos da cascata pode mudar qual declaração vence quando entram em conflito, e reordenar declarações carrega o mesmo risco. A remoção de espaços em branco sozinha não carrega esse risco — não pode mudar o que um navegador renderiza, apenas quantos bytes leva para descrevê-lo.

Servidores web quase universalmente comprimem recursos de texto com gzip ou brotli antes de enviá-los pela rede, e ambos os algoritmos de compressão são muito bons em explorar exatamente o tipo de redundância que espaços em branco e indentação consistente representam — sequências repetidas de espaços já se comprimem extremamente bem. Isso significa que a diferença entre uma folha de estilo formatada e uma minificada, uma vez que ambas passam pelo gzip, é consideravelmente menor do que a diferença de tamanho não comprimido sugere. Minificar ainda ajuda, particularmente removendo comentários diretamente em vez de apenas comprimi-los, mas vale saber que a maior parte do benefício de transferência de rede prometido pela ferramenta moderna vem da compressão, e a minificação de CSS contribui uma camada adicional menor por cima.

Formatar um arquivo Sass ou Less significa aplicar indentação e espaçamento consistentes ao código-fonte exatamente como está escrito — aninhamento, variáveis, mixins e diretivas de controle permanecem intactos, em sua sintaxe original de pré-processador. Isso é uma operação completamente distinta de compilar, que resolve variáveis para seus valores reais, achata seletores aninhados em regras CSS planas independentes, e executa quaisquer mixins para produzir sua saída expandida. Alguém esperando CSS compilado a partir de uma entrada SCSS ficará surpreso ao ver o mesmo código-fonte aninhado e cheio de variáveis formatado em vez de resolvido — esta ferramenta é um formatador para a linguagem do pré-processador, não um compilador para ela.