Don't serialize all cssRules if multiple text nodes exists #866
Conversation
|
|
||
| it('should serialize individual text nodes on stylesheets with multiple child nodes', () => { | ||
| const styleEl = render(`<style>body { color: red; }</style>`); | ||
| styleEl.append(document.createTextNode('section { color: blue; }')); |
There was a problem hiding this comment.
If a rule is also inserted here, would it be recorded?
There was a problem hiding this comment.
Any rule added before the append would be wiped by the webbrowser. Any rule added after the append will not be picked up in rrweb-snapshot unfortunately. And I don't know of a good way of capturing those.
In rrweb these rule additions are captured by the observers.
This PR hopes that you either add css via the .sheet.inserRule api or .append(TEXT_NODE) api. It's not foolproof but it's better than what we had.
|
I mentioned that emotion.sh is what cases this. But I’ve seen the exact same behavior happen with vue.js too |
|
@Juice10 Would a better solution be to run the |
|
@eoghanmurray if we can grab the unmodified text content from the stylesheet than that is preferred. |
Emotion adds css rules by appending text child nodes to a style element. This currently causes all cssRules to get serialized each time an extra rule gets added. That leads to huge stylesheets in replay (45mb+ in some cases) and can freeze the browser whenever more rules get added.
This PR only serializes all
.cssRuleswhen one text node exists in astyleelement.