Comment puis-je trouver quelles variables CSS sont utilisées dans les styles d'un élément donné?

Question

J'ai une palette de couleurs définie comme variables CSS.

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

Les classes CSS pour les éléments utilisent ces variables.

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

Différentes classes utilisent des variables différentes. Ce que je dois pouvoir faire est d'analyser un certain élément sur une page rendue et de dire quelles variables CSS il utilise dans ses styles. Par exemple: div#article-body utilise les variables background-normal et text-normal.

Je peux obtenir des styles calculés pour un élément en utilisant getComputedStyle mais les styles renvoyés ont toutes les variables CSS remplacées par des valeurs réelles.

Des idées sur la façon dont je peux extraire CSS avec des noms de variables en elle?

Answer 1

La seule solution de contournement que j'ai trouvée jusqu'ici est de changer chaque variable CSS et de voir si cette modification apparaît dans l'un des éléments. Quelque chose comme ceci:

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); 

Ceci fonctionne assez rapidement et vous ne pouvez pas remarquer le scintillement dû au changement de couleur. Au moins sur une petite quantité d'éléments dans le conteneur. Cette méthode a une chance de fausse détection si la valeur d'origine de l'une des variables CSS était la même que check. C'est acceptable dans mon cas, mais j'aimerais qu'il y ait un moyen plus propre.