Do not restore prototypes

[Joozty]

I noticed that you overwrite some prototypes. For example, in order to record CSS-in-JS, you apply a proxy on insertRule and deleteRule. That's fine to do it. The problem is that when recording is stopped old value is assigned back to the prototype but if the prototype was overwritten in the meantime by another script then this overwrite is removed too.

Example

// your script
let originalInsertRule = CSSStyleSheet.prototype.insertRule
CSSStyleSheet.prototype.insertRule = function(): number {
  schedule(this.ownerNode);
  return insertRule.apply(this, arguments);
};


// other script
CSSStyleSheet.prototype.insertRule = function(): number {
  console.log('calling log from other script. Some logic is happening here.');
  return  CSSStyleSheet.prototype.insertRule.apply(this, arguments);
};

// later in the code you call stop and assign old value to prototype and you also remove `console.log` from the other script
CSSStyleSheet.prototype.insertRule = originalInsertRule;

Solution:

if would be better to never restore prototypes and rather use some flags:

let originalInsertRule = CSSStyleSheet.prototype.insertRule
CSSStyleSheet.prototype.insertRule = function(): number {
  if(!isRecordingStopped) {
      schedule(this.ownerNode);
  }
  return insertRule.apply(this, arguments);
};

[sarveshnagpal]

Thanks @Joozty for explaining the issue. Never restoring also has it's side effects but I've added this as a work item on the team to brainstorm solution here. Meanwhile, if you a repro test case - that will help.

[Joozty]

Thanks @sarveshnagpal

I believe the code I wrote in the description is quite good for understanding the issue. I don't think there is anything to add and there is no need to write repro case.

[Joozty]

Hi guys any luck here? It would be nice to solve it as it is breaking scripts. 😢