fix: nested css selector splitting

[daibhin]

Problem

Ticket https://posthoghelp.zendesk.com/agent/tickets/11767

Customers website was not rendering correctly due to a CSS rule of the form

body > ul :is(li:not(:first-of-type) a:hover, li:not(:first-of-type).active a) {
    background: 'red';
}

The CSS parser included in RRWeb attempts to find the selector for a given rule. It uses these selectors to generate hover classes necessary during playback.

However the parser was misinterpreting the , in the above rule and splitting it into two separate selectors e.g. body > ul :is(li:not(:first-of-type) a:hover and li:not(:first-of-type).active a). Both of which were malformed. This broke the rest of the stylesheet and meant that the rules were not being loaded.

Changes

The problem arises from the split regex

.split(/\s*(?![^(]*\)),\s*/)

It does not account for nesting. An arbitrary level of nesting cannot be handled in CSS so I opted to create a new JS function in the parser called splitRootSelectors

The customers website playback now looks perfect!

Does this work well for both Cloud and self-hosted?

Yes

[marandaneto]

Nice debugging and a very detailed PR desc.