[RELATED TO #19]: Ponyfill doesn't work for CSS Rule mutations

[isocroft]

Hey @jhildenbiddle , i could take another stab at this.

What if you use the CSSOM interface to send custom events to another processing function that records and analyses any mutations made to a specific stylesheet element while also using a setInterval(...) to poll on the textContent property of the stylesheet element to correctly access all rule insertions/deletions and after word call a function to re-process everything (within a requestIdleCallback(...) workLoop to keep the main thread free of any janky-ness) or just the parts of styles that changes due to the rule insertions/deletions.

const insertRuleFn = CSSStyleSheet.prototype.insertRule;

CSSStyleSheet.prototype.insertRule =function(ruleStr,index) {
  /* mutation observation logic go in here */
};

I could firstly create a custom CSS rule mutation observer by monkey-patching .insertRule(...) and deleteRule(...) like specified above by @chenyulun and using custom events from the monkey-patching to start the setInterval(...) polling and finally call back into the already existing logic in window.cssVarsSync(...)

What do you think ? I have older browser i will like to support for this