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.11

Expected Behavior

Styling should work

Actual Behavior

Replay is crashing due to stylesheet becoming invalid on replay from the addHoverClass function

Steps to Reproduce

Is you have a selector like

[_nghost-ng-c4172599085]:not(.fit-content).aim-select:hover:not(:disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--invalid, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--active) { border-color: rgb(84, 84, 84); }

then it will be replaced in the addHoverClass by

[_nghost-ng-c4172599085]:not(.fit-content).aim-select:hover:not(:disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select.\:hover:not(:disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--invalid, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--active) {
        border-color: rgb(84, 84, 84);
    }

Which is invalid css.

It looks to be something to do with the logic in the parsing, where the selectors looks like

[_nghost-ng-c4172599085]:not(.fit-content).aim-select:hover:not(:disabled

Which is then getting fed into the addHoverClass function

Testcase Gist URL

No response

Additional Information

No response