Verificar o escopo de propriedades personalizadas CSS

Este verificador compara o seletor que define uma variável com aquele que a utiliza. Ele valida os dois textos, aceita listas de seletores e informa se cada ramo de uso está estruturalmente coberto por algum ramo de definição. Assim, você pode encontrar uma causa comum de tokens de design ausentes antes de depurar estilos computados no navegador.

Informe os pontos de definição e de uso

Digite no campo de definição o seletor da regra que declara a propriedade personalizada e, no campo de uso, o seletor da regra que chama <code>var()</code>. Por exemplo, um token definido em <code>.theme-dark .card</code> está disponível para um uso em <code>.theme-dark .card &gt; .title</code>, pois o título é selecionado abaixo do cartão que recebe a declaração. Uma definição em <code>:root</code> é considerada global porque o elemento raiz é ancestral do conteúdo do documento. Os dois campos podem conter listas de seletores separadas por vírgulas. O verificador avalia cada ramo de uso separadamente e exige que todos estejam cobertos para que a resposta geral seja verdadeira. Ele também informa qual ramo de definição correspondeu a cada uso coberto, facilitando a auditoria de listas extensas. Este é um teste de relação entre seletores; você não precisa colar uma folha de estilos, um bloco de declarações, o nome da propriedade ou seu valor. Ao fornecer somente os dois seletores relevantes, o resultado permanece concentrado no escopo da cascata, sem misturar ordem de origem ou sintaxe do valor.

Entenda a decisão de escopo estrutural

O verificador representa a parte da disponibilidade de uma propriedade personalizada que pode ser determinada apenas pelos seletores. Ele pergunta se o seletor de definição pode identificar o mesmo elemento identificado pelo seletor de uso ou um ancestral dele. Requisitos compostos são respeitados: uma definição em <code>.card.featured</code> não é considerada suficiente para um uso que menciona somente <code>.card</code>. Combinadores de filho precisam continuar como combinadores de filho, enquanto uma relação de descendência pode atravessar compostos adicionais no seletor de uso. Listas de seletores funcionam como alternativas no lado da definição e como obrigações no lado do uso. Essa abordagem intencionalmente conservadora evita afirmar que uma variável está disponível quando a relação não aparece no texto dos seletores. Fatos de execução ainda podem mudar a cascata real. Ordem de origem, regras condicionais, limites de Shadow DOM, estilos inline, camadas, especificidade, redefinições explícitas e a árvore real do documento ficam fora da entrada de dois seletores. Considere um resultado verdadeiro como confirmação de contenção estrutural e consulte os estilos computados do navegador quando precisar comprovar o valor final em um documento renderizado específico.

Use erros de validação para corrigir entradas ambíguas

Cada seletor é analisado antes da comparação. Ramos vazios em listas, colchetes ou parênteses sem fechamento, combinadores incompletos, pontuação de declarações, tokens incompletos de classe, ID ou pseudoseletor e outras formas inválidas geram um erro de entrada, em vez de um palpite. Essa diferença é relevante na automação: falso indica que os seletores fornecidos são válidos, mas o uso solicitado não está estruturalmente coberto; um erro indica que nenhuma conclusão sobre o escopo foi produzida. Mantenha apenas seletores nos campos. Não inclua chaves, ponto e vírgula, uma declaração de propriedade personalizada nem uma regra CSS inteira. Caracteres escapados, valores de atributo entre aspas, seletores de atributo e pseudoclasses funcionais permanecem agrupados durante a tokenização, para que vírgulas e combinadores internos não sejam confundidos com sintaxe de nível superior. O algoritmo é determinístico, não faz solicitações de rede e aplica um limite fixo ao tamanho da entrada. Portanto, você pode usá-lo em uma etapa de lint, em uma revisão de alterações ou em um script de migração de tokens e obter o mesmo resultado para o mesmo par. Se seletores relacionais avançados expressarem fatos que só um DOM ativo resolve, interprete com cautela um resultado sem cobertura e confira-o no markup de destino.