Como revisar definições e referências var() de uma folha de estilo

Cole uma folha de estilo e a página a lê como texto: lista as propriedades personalizadas definidas, as usadas por var() e as diferenças entre elas: uma referência sem definição e sem fallback utilizável, ou uma definição que nada no texto colado usa.

Comentários e textos entre aspas são ignorados, então uma regra comentada ou um "var(--x)" dentro de content não contam como uso real, e a última declaração de um bloco é lida mesmo sem ponto e vírgula.

  1. Cole o CSS na caixa da esquerda ou clique em Carregar exemplo para ver uma folha com um token sem definição, um token sem uso e um fallback.
  2. Clique em Inspecionar variáveis: o mapa de propriedades personalizadas mostra um cartão por token e o relatório lista cada token com seus valores e o número de usos.
  3. Leia a lista de avisos: uma referência sem definição precisa de definição ou fallback, uma definição sem uso pode ser um resto e um token definido duas vezes pode ser uma substituição intencional.
  4. Use Copiar para levar o relatório ou Baixar para salvá-lo como css-variables-report.txt.
  5. Clique em Limpar para esvaziar de uma vez a entrada, o mapa e o relatório.

O que o relatório e as métricas contam, quais avisos aparecem e o que uma análise de texto não vê

O que conta como definição e como referência

Uma propriedade personalizada é uma declaração cujo nome começa com dois hífens, em qualquer lugar: em :root, numa classe ou dentro de uma media query. O valor vai até o primeiro ponto e vírgula ou até a chave de fechamento, então a última declaração de um bloco é lida mesmo sem o ponto e vírgula, e um valor com parênteses como rgb(0, 0, 0) é mantido inteiro.

As referências são chamadas var(), e o nome do token diferencia maiúsculas de minúsculas: --Brand e --brand são dois tokens distintos, como no navegador. O nome da função não diferencia, então VAR(--x) também conta, e um var() escrito dentro do fallback de outra chamada aparece separadamente. Um fallback só conta se tiver conteúdo: var(--x,) deixa a declaração inválida quando falta --x, por isso é tratado como uma chamada sem fallback.

Como ler os avisos e as métricas

As métricas contam definições, referências e itens para revisar; o mapa mostra por token quantas vezes ele é definido, quantas chamadas var() o usam e quantas dessas trazem um fallback utilizável, em forma de proporção. Um token definido mas não referenciado no texto colado é marcado como sem uso, e um declarado em dois blocos é apontado como possível substituição; nos dois casos a mensagem diz que o alcance é o texto colado.

Uma referência sem definição e sem fallback é o único achado que sempre quebra no navegador, e é o único marcado como erro. Um CSS sem nenhuma propriedade personalizada também não é dado como aprovado: a página diz que nada foi encontrado em vez de afirmar que tudo está coberto.

O que a análise de texto não vê e o que fica na sua máquina

A análise é textual de propósito: não resolve escopo de seletores, herança nem cascata, e não calcula o que o navegador usaria em tempo de execução. Um token definido em outra folha, injetado por JavaScript ou distribuído por um design system aparece aqui como não definido, e sem uso significa sem uso neste texto, não no projeto inteiro.

Tudo roda no navegador; o CSS colado não é enviado e nada é pedido por ele, e a ferramenta continua funcionando sem conexão. Copiar e Baixar ficam inativos até existir um relatório, para que uma área de transferência vazia ou um arquivo de zero byte não passem por resultado.

Ferramentas recentes: