Description
Preflight Checklist
- I have searched the issue tracker for a bug report that matches the one I want to file, without success.
What package is this bug report for?
rrweb-snapshot
Version
2.0.0-alpha.18
Expected Behavior
Snapshot should be built successfully and can be played with the rrweb replayer.
More details:
buildStyleNode receives cssText with /* rr_split */ as following (using ... before and after the split because it's too long - see events.json in the rrweb debuger) and should be able to handle and process into a valid css to be applied
'.pfruits-widget-newsfeed { position: fixed; top: 0px; right: 0px; left: 0px; bottom: unset; z-index: 10000991; display: flex; max-height: 100vh; min-height: 100%; min-width: 100%; flex-direction: column; overflow: hidden; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(243 244 246 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); transition-property: opacity, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }@media ....ot(:where([class~="not-prose"], [class~="not-prose"/* rr_split */] *)) { color: inherit; }.pfruits-banner-v3 .banner-content-wrapper :where(blockquote strong):not(:where([class~="not-prose"], ... rgba(0, 0, 0, 0.15); }.pfruits-banner-v3 .banner-main-container.limit-height { max-height: 250px; }'
Actual Behavior
In reality, building the snapshot fails and the replayer final HTML is corrupted, throwing an error
CssSyntaxError: <css input>:25:1093: Unclosed bracket
at Input.error (rrweb-snapshot.js:2378:17)
at Parser.unclosedBracket (rrweb-snapshot.js:4117:22)
at Parser.other (rrweb-snapshot.js:3986:35)
at Parser.parse (rrweb-snapshot.js:4024:16)
at parse$3$1 (rrweb-snapshot.js:4153:13)
at new LazyResult (rrweb-snapshot.js:4285:17)
at Processor.process (rrweb-snapshot.js:4788:14)
at adaptCssForReplay (rrweb-snapshot.js:5008:6)
at applyCssSplits (rrweb-snapshot.js:5034:45)
at buildStyleNode (rrweb-snapshot.js:5041:5)
More details:
applyCssSplits calls adaptCssForReplay with cssTextSection equal to the first half of the split, which is not valid CSS, ending with ...:not(:where([class~="not-prose"], [class~="not-prose"'
Within adaptCssForReplay, postcss.process is called
const ast = postcss$1([
mediaSelectorPlugin,
pseudoClassPlugin
]).process(cssText);
and maintains and error
which is thrown at the next line
const result2 = ast.css;
Steps to Reproduce
In the case of this app, it happens immediately - try to record and replay and it will fail with that CSS error
Testcase Gist URL
Additional Information
This seems to work with alpha-15, but fails on alpha-18.