特定の要素のスタイルで使用されるCSS変数は、どのようにして見つけることができますか？

Question

私はCSS変数として定義されたカラーパレットを持っています。

:root { 
    --background-normal: #fffff; 
    --text-normal: #212a32; 
    --background-warning: #ff0000; 
    --text-warning: #ffffff; 
} 

要素のCSSクラスは、これらの変数を使用しています。

#article-body { 
    background-color: var(--background-normal); 
    color: var(--text-normal); 
} 

異なるクラスは異なる変数を使用しています。私ができる必要があるのは、レンダリングされたページ上の特定の要素を分析し、そのスタイルで使用するCSS変数を教えることです。たとえば、div#article-bodyは、変数background-normalとtext-normalを使用します。

getComputedStyleを使用して要素の計算されたスタイルを取得できますが、返されるスタイルにはすべてのCSS変数が実際の値に置き換えられています。

どのように私はそれに変数名でCSSを抽出することができますか？

Answer 1

私が今までに見つけた唯一の回避策は、各CSS変数を変更して、その変更がいずれの要素にも現れるかどうかを確認することです。このようなもの：

var bodyStyles = window.getComputedStyle(document.body); 
var check = "rgb(12, 34, 56)"; 
var vars = ["--background-normal", "--text-normal", "--background-warning", "--text-warning"]; 

function checkUsage (element, index, array) { 
    var origValue = bodyStyles.getPropertyValue(element); 
    document.body.style.setProperty(element, check); 
    var found = false; 
    $("#article-body *").each (function(index, el) { 
    var allCSS = getComputedStyle(el).cssText; 
    if (allCSS.indexOf(check) >= 0) { 
     found = true; 
    } 
    }); 
    document.body.style.setProperty(element, origValue); 
    if (found) console.log(element); 
} 

vars.forEach(checkUsage); 

これはかなり速く動作し、色の変化によるちらつきに気づくことはありません。少なくともコンテナ内の少量の要素。 このメソッドは、CSS変数の1つの元の値がcheckと同じ場合に誤検出する可能性があります。それは私の場合は容認できますが、私はよりクリーンな方法があることを望みます。