Note: The problem this is addressing is in creating JavaScript polyfills for CSS. This likely wouldn’t be useful in regular web dev work.
Looking at the CSS Toggles polyfill, I realized that it was finding and parsing every stylesheet in order to find the future syntax, analyze it and apply it to the elements specified in the selector. This is a lot of work that the browser has already done, and it misses some avenues for how CSS can be modified (media queries or classes toggling that change custom properties, style attribute values, JavaScript changing property values).
It would be great if there were a browser API that returned a list of properties with their hierarchy of authored values, like you see in the “computed” tab of the devtools element style inspector.
display:
#my-component > 'flex'
.block > 'block'
user agent > 'inline'
In short, I’d like to know what authored value the computed value (say 300px) comes from (say 24em, calc(200px + 10vw), or 75%).