CSS変数抽出ツール
スタイルシートを貼り付けると、すべての --custom-property を抽出し、接頭辞ごとにグループ化して、重複した定義にフラグを立てます。
すべてのセレクタブロックをスキャンします。:root だけではありません。同じ名前でセレクタ間で値が異なる場合は重複としてフラグが立ちます。
グループ化された変数がここに表示されます。
仕組み
入力はルールブロックごとにスキャンされ（メディアクエリのようなネストされたものも含めて selector { ... } のペアにマッチします）、各ブロック内の --name: value; 宣言はすべて、それが属するセレクタとともに記録されます。変数は接頭辞、つまり先頭の -- の後の最初のハイフン区切りセグメントでグループ化されるため、--color-primary-500 と --color-accent はどちらも「color」の下にまとまります。これはほとんどのデザイントークンの命名規則の構造を反映しています。名前が重複としてフラグ付けされるのは、他の場所で本当に異なる値で宣言されている場合のみで、同じ値のまま別のセレクタで再宣言されただけの場合（テーマの上書きの通常のパターン）は対象外です。
すべての処理はこのページのJavaScriptでキー入力のたびに実行され、完全なCSSパーサーではなく軽量な波括弧マッチングのスキャナーを使用します。貼り付けた内容がアップロードされることはありません。
よくある質問
どのカスタムプロパティを見つけられますか?
任意のセレクタブロック内にある「--name: value;」形式の宣言はすべて対象で、:root だけではなく、ネストされたルールやメディアクエリも含まれます。出現ごとに、どのセレクタの下で宣言されたかが記録されます。
重複検出はどのように機能しますか?
同じ変数名が異なる値で複数回宣言されている場合（コピペや一貫性のないトークンによくあるサイン）、フラグが立ちます。同じ名前を複数のスコープ（ライト/ダークテーマの上書きなど）で同じ値のまま宣言するのは通常のパターンであり、フラグは立ちません。
このCSSはどこかに送信されますか?
いいえ、解析は小さなJavaScriptのスキャナーによって、すべてブラウザ内で行われます。貼り付けた内容がアップロードされることはありません。