[Bug]: Empty css rules break replay with "CssSyntaxError CssSyntaxError: Unclosed string" error

[KuznetsovRoman]

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

Version

latest

Expected Behavior

"Record" produces valid css rules without empty ones, which are invalid and can't be parsed by "replay"

Actual Behavior

Because "cssText" is invalid css, "replay" fails with:

CssSyntaxError
CssSyntaxError: Unclosed string
    at Input.error (webpack-internal:///../../node_modules/@rrweb/replay/dist/replay.js:1103:17)
    at unclosed (webpack-internal:///../../node_modules/@rrweb/replay/dist/replay.js:2041:18)
    at Object.nextToken (webpack-internal:///../../node_modules/@rrweb/replay/dist/replay.js:2125:15)
    at Parser.other (webpack-internal:///../../node_modules/@rrweb/replay/dist/replay.js:2708:30)
    at Parser.parse (webpack-internal:///../../node_modules/@rrweb/replay/dist/replay.js:2749:16)
    at parse$3$1 (webpack-internal:///../../node_modules/@rrweb/replay/dist/replay.js:2878:13)
    at new LazyResult (webpack-internal:///../../node_modules/@rrweb/replay/dist/replay.js:3010:17)
    at Processor.process (webpack-internal:///../../node_modules/@rrweb/replay/dist/replay.js:3513:14)
    at adaptCssForReplay (webpack-internal:///../../node_modules/@rrweb/replay/dist/replay.js:3733:6)
    at applyCssSplits (webpack-internal:///../../node_modules/@rrweb/replay/dist/replay.js:3759:45)

Steps to Reproduce

1. Open any web page

2. Execute following script:

const stylesElement = document.createElement("style");
stylesElement.innerHTML = ".cl {border: 1px solid var(--border-color); border-color: var(--border-color);}";
document.head.appendChild(stylesElement);
console.log(stylesElement.sheet.rules[0].style.cssText);

3. "cssText" would output:

border-top-style: ; border-top-width: ; border-right-style: ; border-right-width: ; border-bottom-style: ; border-bottom-width: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-color: var(--border-color);

4. Later it would be saved that way into rrweb snapshot, and, when replaying with "replay", it would fail with "CssSyntaxError: Unclosed string" because of empty css rules.

Testcase Gist URL

No response

Additional Information

No response

[eoghanmurray]

I believe the empty rules would be fixed by my proposal here:
#1322 (comment)