Single style capture

[eoghanmurray]

Prep PR for async <style> serialization via assets: refactor stringifyStylesheet to happen in a single place during initial snapshot.

• initial motivation was to change the approach on stringifying <style> elements to do so in a single place
• I then learned that we need the style content present on child text elements, in order to support mutation
• this is still supported, however the css content is now preferably stored in parent <style> element in that _cssText attribute, rather than in the (natural) position in the child text elements of that element. This is to support the stylesheet-assets PR which will delay population of the _cssText attribute, as in both cases the snapshot will be recorded with empty child text elements
• on rebuild, this content can now be 'spread' out to child text nodes (usually there's only one!) in order to give a correct target for any further text mutations on these children.
• there is a new complex but comprehensive test 'can record and replay style text mutations' which covers all of this; it has been designed to ensure that it fails if css text is populated in the wrong way (e.g. putting the entire cssText on the first of many text children and leaving the others blank)

[changeset-bot]

🦋 Changeset detected

Latest commit: 58bfecc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
rrweb-snapshot	Patch
rrweb	Patch
rrdom	Patch
rrdom-nodejs	Patch
rrweb-player	Patch
@rrweb/all	Patch
@rrweb/replay	Patch
@rrweb/record	Patch
@rrweb/types	Patch
@rrweb/packer	Patch
@rrweb/utils	Patch
@rrweb/web-extension	Patch
rrvideo	Patch
@rrweb/rrweb-plugin-console-record	Patch
@rrweb/rrweb-plugin-console-replay	Patch
@rrweb/rrweb-plugin-sequential-id-record	Patch
@rrweb/rrweb-plugin-sequential-id-replay	Patch
@rrweb/rrweb-plugin-canvas-webrtc-record	Patch
@rrweb/rrweb-plugin-canvas-webrtc-replay	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Juice10]

Thanks for tackling this Eoghan!

[otan]

i don't have an exact page to reproduce this problem, but i find that /* rrweb-split */ is introduced in places which creates invalid CSS, e.g. this beast:

"_cssText": "@keyframes intercom-lightweight-app-launcher { \n  0% { opacity: 0; transform: scale(0.5); }\n  100% { opacity: 1; transform: scale(1); }\n}@keyframes intercom-lightweight-app-gradient { \n  0% { opacity: 0; }\n  100% { opacity: 1; }\n}@keyframes intercom-lightweight-app-messenger { \n  0% { opacity: 0; transform: scale(0); }\n  40% { opacity: 1; }\n  100% { transform: scale(1); }\n}.intercom-lightweight-app { position: fixed/* rr_split */; width: 0px; height: 0px; font-family: intercom-font, \"Helvetica Neue\", \"Apple Color Emoji\", Helvetica, Arial, sans-serif; }.intercom-lightweight-app-gradient { position: fixed; width: 500px; height: 500px; bottom: 0px; right: 0px; pointer-events: none; background: radial-gradient(at right bottom, rgba(29, 39, 54, 0.16) 0%, rgba(29, 39, 54, 0) 72%); animation: 200ms ease-out 0s 1 normal none running intercom-lightweight-app-gradient; }.intercom-lightweight-app-launcher { position: fixed; border: none; bottom: 20px; right: 20px; max-width: 48px; width: 48px; max-height: 48/* rr_split */px; height: 48px; border-radius: 50%; background: rgb(22, 38, 148); cursor: pointer; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px; transition: transform 167ms cubic-bezier(0.33, 0, 0, 1); box-sizing: content-box; padding: 0px !important; margin: 0px !important; }.intercom-lightweight-app-launcher:hover { transition: transform 250ms cubic-bezier(0.33, 0, 0, 1); transform: scale(1.1); }.intercom-lightweight-app-launcher:active { transform: scale(0.85); transition: transform 134ms cubic-bezier(0.45, 0, 0.2, 1); }.intercom-lightweight-app-launcher:focus { outline: none; }.intercom-lightweight-app-launcher-icon { display: flex; align-items: center; justify-content: center; position: absolute; top: 0px; left: 0px; width: 48px; height: 48px; transition: transform 100ms linear, opacity 80ms linear; }.intercom-lightweight-app-launcher-icon-open { opacity: 1; transform: rotate(0deg) scale(1); }.intercom-lightweight-app-launcher-icon-open svg { width: 24px; height: 24px; }.intercom-lightweight-app-launcher-icon-open svg path { fill: rgb(255, 255, 255); }.intercom-lightweight-app-launcher-icon-self-serve { opacity: 1; transform: rotate(0deg) scale/* rr_split */(1); }.intercom-lightweight-app-launcher-icon-self-serve svg { height: 44px; }.intercom-lightweight-app-launcher-icon-self-serve svg path { fill: rgb(255, 255, 255); }.intercom-lightweight-app-launcher-custom-icon-open { max-height: 24px; max-width: 24px; opacity: 1; transform: rotate(0deg) scale(1); }.intercom-lightweight-app-launcher-icon-minimize { opacity: 0; transform: rotate(-60deg) scale(0); }.intercom-lightweight-app-launcher-icon-minimize svg path { fill: rgb(255, 255, 255); }.intercom-lightweight-app-messenger { position: fixed; overflow: hidden; background-color: white; animation: 250ms cubic-bezier(0, 1, 1, 1) 0s 1 normal none running intercom-lightweight-app-messenger; transform-origin: right bottom; width: 400px; height: calc(100% - 40px); max-height: 704px; min-height: 250px; right: 20px; bottom: 20px; box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px; border-radius: 16px; }.intercom-lightweight-app-messenger-header { height: 64px; border-bottom: none; background: rgb(255, 255, 255); }.intercom-lightweight-app-messenger-footer { position: absolute; bottom: 0px; width: 100%; height: 80px; background: rgb(255, 255, 255); font-size: 14px; line-height: 21px; border-top: 1px solid rgba(0, 0, 0, 0.05); box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 25px; }@media print {\n  .intercom-lightweight-app { display: none; }\n}"

now fails to replay despite being "valid" on the browser

[otan]

here's a repro - run this on any page with rrweb recording:

const s = document.createElement("style"); s.append(document.createTextNode("a {")); s.append(document.createTextNode("color: red; }"));
document.head.appendChild(s);