[Observer] Observer doesn't watch for CSSStyleSheet.insertRule

[VladimirMilenko]

Currently, it is impossible to track calls to insertRule(which is used in CSS-in-JS libraries).
With this, it's impossible to get the styles, which are added dynamically during render phase.

I believe this can be solved by proxying calls to styleElement.sheet.addRule/insertRule

[VladimirMilenko]

I was able to do this in following way:

  handleStyleRoot = styleRoot => {
    const handler = {
      apply: function apply(target, thisArg, argumentsList) {
        const result = target.apply(thisArg, argumentsList);
        styleRoot.innerHTML = Array.from(thisArg.rules, x => x.cssText).join('\n');

        styleRoot.sheet.insertRule = new Proxy(styleRoot.sheet.insertRule, handler);

        return result;
      }
    };
    const proxy = new Proxy(styleRoot.sheet.insertRule, handler);
    styleRoot.sheet.insertRule = proxy;
    styleRoot.sheet.insertRule('.rr_track_on {}');
  };

[jperl]

@Yuyz0112 @VladimirMilenko I applied this fix in a hacky way https://github.com/rrweb-io/rrweb/pull/124/files.

It works but if you can provide guidance on how you would like it implemented properly, I would be happy to clean it up into something mergeable.

[dacort]

Is this the same as #58 ?