CSS のカスタムプロパティ定義と var() 参照をマッピングし、未定義、フォールバックの使用、重複宣言を確認します。
ブラウザ内でローカルに実行スタイルシートを貼り付けると、ページはそれをテキストとして読み、定義されているカスタムプロパティ、var() で参照されているトークン、そして両者のずれを一覧にします。定義も有効なフォールバックもない参照や、貼り付けた範囲で使われていない定義がそれです。
コメントと引用符で囲まれた文字列は対象外なので、コメントアウトしたルールや content 内の "var(--x)" を実際の使用として数えません。ブロック最後の宣言はセミコロンがなくても読み取ります。
カスタムプロパティとは、名前が 2 つのハイフンで始まる宣言で、場所は問いません。:root でも、クラスの中でも、メディアクエリの中でも同じです。値は最初のセミコロンか閉じ波括弧までなので、ブロック最後の宣言はセミコロンがなくても読み取れ、rgb(0, 0, 0) のように括弧を含む値もそのまま扱います。
参照は var() 呼び出しです。トークン名は大文字と小文字を区別するため、--Brand と --brand はブラウザと同じく別のトークンです。関数名は区別しないので VAR(--x) も参照として数え、ほかの呼び出しのフォールバック内に書かれた var() も独立して記録します。フォールバックは内容がある場合だけ有効です。var(--x,) は --x が無いと宣言が無効になるため、フォールバックなしの呼び出しとして扱います。
指標は定義数・参照数・確認項目数を示し、マップはトークンごとに、定義された回数、それを参照する var() の数、そのうち有効なフォールバックを持つものの割合を表示します。貼り付けた範囲で参照されていない定義は未使用として、2 つのブロックで宣言されたトークンは上書きの可能性として報告され、どちらも判断の範囲が貼り付けたテキストであることを文面で示します。
定義もフォールバックもない参照だけが、ブラウザで必ず問題になる指摘であり、エラーとして表示されます。カスタムプロパティが 1 つも無い CSS も「合格」とはしません。すべてが定義済みだと述べる代わりに、見つからなかったことを伝えます。
解析はあえてテキストベースです。セレクタの適用範囲、継承、カスケードは解決せず、実行時にブラウザが使う値も計算しません。別のスタイルシートで定義されたトークン、JavaScript が注入するトークン、デザインシステムが配布するトークンは、ここでは未定義として表示されます。未使用とは、この貼り付けたテキスト内で未使用という意味です。
処理はすべてブラウザ内で行われ、貼り付けた内容は送信されず、それを理由にした通信も発生しません。オフラインでも動作します。コピーとダウンロードはレポートができるまで動作しないため、空のクリップボードや 0 バイトのファイルを結果と誤認することはありません。