Ferramenta de Formatação CSS

O formatador CSS organiza folhas de estilo em uma estrutura consistente e legível. Seletores, declarações, media queries, keyframes, variáveis e saída de pré-processadores ficam mais fáceis de inspecionar do que em código minificado ou mal indentado. Isso ajuda em depuração, revisão, manutenção de design system, ensino e entendimento de estilos copiados. A formatação não muda automaticamente cascata, especificidade, herança nem compatibilidade de navegador. Uma regra pequena pode ter grande efeito se carregar tarde ou usar seletor forte. Em produção, ainda é preciso verificar estados responsivos, regressão visual, lint, build e o contexto do componente.

A formatação de CSS é um problema de tokenização e pretty-printing, não uma análise completa. Um analisador CSS compatível com a especificação (CSS Syntax Module Level 3, Recomendação W3C) é mais pesado do que um formatador precisa: ele constrói uma AST com regras de estilo, at-rules, declarações e valores de componentes, e resolve casos extremos de análise (strings não terminadas, chaves desbalanceadas, propriedades com prefixo de fornecedor). Esta página utiliza um tokenizador mais leve que percorre o fluxo de caracteres, reconhece as mesmas classes de tokens (ident, at-keyword, hash, string, bad-string, number, dimension, percentage, url, function, punctuation, comment) e os emite como uma lista plana; em seguida, o pretty-printer remonta os tokens com a indentação escolhida, estilo de chaves e regras de espaços em branco. As duas unidades estruturais no CSS são blocos de regra (selector { declarations }) e blocos de at-rule (@media, @supports, @container, @keyframes envolvem um ou mais blocos de regra). O formatador percorre um fluxo de tokens e controla a profundidade das chaves: um `{` incrementa a profundidade (e uma nova linha + indentação segue), um `}` decrementa a profundidade (e a indentação reduz para corresponder ao `{` correspondente). Seletores são emitidos literalmente — o formatador não os analisa, porque analisar um seletor como `.foo > .bar:hover:not(.baz)` é um problema separado (CSS Selectors Level 4). Seletores são mantidos byte a byte, apenas com espaços em branco normalizados (múltiplos espaços colapsados em um, espaços à direita removidos) para que um `.a,.b,.c` minificado se mantenha como `.a, .b, .c`. Declarações são formatadas com um estilo escolhido: 'expanded' (cada propriedade em sua própria linha, o mais legível), 'compact' (uma regra por linha, múltiplas declarações compactadas, o mais comum em CSS de produção) ou 'compressed' (minificado, sem espaços em branco, a menor saída possível). Os dois-pontos após o nome da propriedade são sempre seguidos por um espaço; o valor é emitido literalmente, exceto por algumas normalizações (zeros finais removidos de `0.500` para `.5`, unidades removidas de `0px` para `0`, os truques clássicos de minificação de CSS). A minificação é a direção oposta: remover comentários, colapsar espaços em branco dentro e entre declarações, remover o ponto e vírgula final após a última declaração de um bloco (permitido conforme CSS 2.1 §4.1.7), mesclar blocos de regra adjacentes com o mesmo seletor e contexto de mídia, e normalizar valores de cor (`#ffffff` -> `#fff`, `rgb(255,255,255)` -> `#fff` quando possível). Minificadores modernos (cssnano, lightningcss, clean-css) também fazem otimizações estruturais: mesclar propriedades longhand em shorthand (`margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;` -> `margin: 1px;`), remover declarações duplicadas dentro de uma regra, e remover regras que não correspondem a nenhum elemento (`div:has-no-children { color: red; }` em passes de eliminação de código morto). Para saída minificada, a página aplica as transformações padrão; para saída legível, a página aplica a indentação e o estilo de chaves escolhidos. O CSS Nesting Module (CSSWG, rascunho 2023, Baseline 2024) introduz aninhamento nativo: `.a { color: red; & .b { color: blue; } }` agora é CSS válido em navegadores modernos (Chrome 112+, Firefox 117+, Safari 16.5+). Aninhamento pré-2024 exigia reescrita por pré-processadores (Sass `&` ou Less `&` para encadear seletores). A página trata ambos: CSS aninhado por pré-processador é formatado como se fosse SCSS/Less (preservando o `&`), e CSS aninhado nativo (sem necessidade de `&`) é formatado pela caminhada de blocos de regra independentemente. Outras at-rules que a página trata: @keyframes e @counter-style recebem um corpo de declarações, não blocos de regra aninhados, então se formatam de forma diferente (declarações dentro da at-rule, sem chaves aninhadas). @media, @supports, @container, @layer recebem um corpo de blocos de regra. @import, @charset, @namespace são apenas de nível superior e são emitidos em sua própria linha. @property (propriedades personalizadas registradas) recebe um bloco de declarações. @font-face é um único bloco de regra com declarações complexas sem seletor. A página trata cada uma pelo formato do corpo definido pela especificação, não pelo nome. A armadilha de formatação mais comum é quebrar o conteúdo dentro de literais de string: `content: "hello world";`, `font-family: "Arial Black", sans-serif;`, `background: url("image.png")` — o formatador não deve colapsar o espaço dentro da string, não deve dividir a URL em `/`, e não deve tocar no texto do comentário dentro de `/* ... */`. Um tokenizador que controla corretamente o estado de string e comentário é a diferença entre um formatador que preserva o conteúdo do usuário e um que o corrompe. O tokenizador desta página é feito à mão e é pequeno o suficiente para verificar visualmente; formatadores de produção usam postcss ou lightningcss, que carregam a mesma obrigação em seus léxicos internos.

• Análise léxica (CSS Syntax Level 3): percorre o fluxo de caracteres, emite tokens ident / at-keyword / hash / string / number / dimension / percentage / url / function / punctuation / comment. Strings e comentários têm estado — um tokenizer com comportamento incorreto quebra `content: "hello world";`.
• Duas unidades estruturais: blocos de regra (selector { declarations }) e blocos de at-rule (@media, @supports, @container, @layer envolvem blocos de regra). O formatador caminha pela profundidade das chaves e indenta cada `{` em um novo nível; o `}` correspondente reduz o nível.
• Seletores são emitidos literalmente, com espaços em branco normalizados: `.a,.b,.c` -> `.a, .b, .c`. O formatador não analisa seletores (CSS Selectors Level 4 é um problema separado) — apenas limpa espaços e vírgulas.
• Estilos de saída: 'expanded' (uma declaração por linha, mais legível), 'compact' (uma regra por linha, comum em produção), 'compressed' (sem espaços em branco, minificado). Dois-pontos + espaço após o nome da propriedade é a única regra de formato universal.
• Minificação: remove comentários, colapsa espaços em branco, remove `;` finais, mescla regras com mesmo seletor, normaliza `#ffffff` -> `#fff`, `0.500` -> `.5`, `0px` -> `0`. Mesclagens estruturais: longhand -> shorthand (`margin-top: 1px; ... margin-left: 1px;` -> `margin: 1px;`).
• CSS Nesting (CSSWG 2023, Baseline 2024): `.a { & .b { ... } }` agora é CSS nativo no Chrome 112+, Firefox 117+, Safari 16.5+. Aninhamento de pré-processador pré-2024 (Sass `&`, Less) ainda é válido; a página formata ambos caminhando pela estrutura de blocos de regra.
• Corpos de at-rule: @keyframes e @counter-style recebem declarações; @media / @supports / @container / @layer recebem blocos de regra; @import / @charset / @namespace são instruções de nível superior; @property e @font-face recebem blocos de declarações. A página trata cada uma pelo formato do corpo definido pela especificação, não pelo nome.
• Limite de segurança: literais de string (content, nomes de fontes, URLs) e texto de comentários são deixados intocados por todas as transformações. Um round-trip byte-exato é o teste de correção para um formatador CSS — quebre uma string de content e o usuário nota imediatamente.