Apply CSSRule insertion/deltetion on Flush event

[VladimirMilenko]

Currently, during the node replacement, the sheet property is being automatically assigned to null.
In order to support virtual sheet mutation, we need to store that sheet in another structure.
We also cannot reuse the existing reference to sheet, as the value at this reference would be removed at the replaceChild call.

To avoid that, we will create:

  private virtualStyleRulesMap!: Map<INode, CSSRule[]>;

This rule array map would keep the latest CSSRule array for each node during the virtual processing of events and would ensure, that at the Flush event, style node has exact same array of css rules, as the one in memory.

I've also added a test which is able to check, whether the stylesheet rule exists in the sheet after insertion.

Fixes #525

[Yuyz0112]

LGTM

@Mark-Fenng PTAL

[YunFeng0817]

A great way to fix the issue.
BTW, is placeholderNode still necessary to exist?

[Juice10]

Really loving this, great work @VladimirMilenko!

I found a couple spots where we could make the tests a little more readable

[Juice10]

Would be nice if we could simplify this a little

Suggested change

	const rules = Array.from(replayer.iframe.contentDocument.head.children)
	.filter(x=>x.nodeName === 'STYLE')
	.reduce((acc, node) => {
	acc.push(...node.sheet.rules);
	return acc;
	}, []);
	rules.some(x=>x.selectorText === ".css-1fbxx79")
	const rules = [...replayer.iframe.contentDocument.styleSheets].map((sheet)=> sheet.rules);
	rules.some(x=>x.selectorText === ".css-1fbxx79")

[Juice10]

Same goes for here

Suggested change

	const rules = Array.from(replayer.iframe.contentDocument.head.children)
	.filter(x=>x.nodeName === 'STYLE')
	.reduce((acc, node) => {
	acc.push(...node.sheet.rules);
	return acc;
	}, []);
	rules.some(x=>x.selectorText === ".css-1fbxx79")
	const rules = [...replayer.iframe.contentDocument.styleSheets].map((sheet)=> sheet.rules);
	rules.some(x=>x.selectorText === ".css-1fbxx79")

[Juice10]

A great way to fix the issue.
BTW, is placeholderNode still necessary to exist?

As far as I can remember it is necessary the first time the .sheet is accessed.
But for performance reasons it would be advisable skip the placeholder/adding-stylesheet-to-dom part when the node already exists in the virtualStyleRulesMap.

[Juice10]

It looks like constructible stylesheets (new CSSStyleSheet) is still in the proposal phase and is only implemented in Chrome, and Firefox (behind experimental flag).
In Safari I couldn't get it working directly but I was able to access it via a workaround: Object.create(CSSStyleSheet.prototype)

We might be able to get it working by using this polyfill: https://github.com/calebdwilliams/construct-style-sheets

[Juice10]

@VladimirMilenko feel free to close this PR. I ended up incorporating most of it in #618 which fixes this issue.