fix: Fix CSS rules captured in Safari

[mydea]

Safari does not capture some css selectors correctly, so we need to fix them, or else playback fails for them.

Closes #1208

ref getsentry#86

[changeset-bot]

🦋 Changeset detected

Latest commit: d591538

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

This PR includes changesets to release 8 packages

Name	Type
rrweb-snapshot	Patch
rrweb	Patch
rrdom	Patch
rrdom-nodejs	Patch
rrweb-player	Patch
@rrweb/types	Patch
@rrweb/web-extension	Patch
rrvideo	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]

@mydea thanks for submitting this, could you add a Changeset then I can merge this issue?

[mydea]

@mydea thanks for submitting this, could you add a Changeset then I can merge this issue?

Added a changeset 👍

[eoghanmurray]

In light of performance efforts in #1271 I wonder whether it's desirable to run a browser check before employing the validateStringifiedCssRule function?

I believe (correct me if I'm wrong) that the if (cssStringified.includes(':')) { check will succeed for nearly 100% of css strings, so the regex will be needlessly run in non-safari browsers. Is that correct?

[eoghanmurray]

@mydea I've done a slight rewrite of the includes test in #1280
if you have a chance, could you validate that that still does the right thing in Safari?

[JonasBa]

In light of performance efforts in #1271 I wonder whether it's desirable to run a browser check before employing the validateStringifiedCssRule function?

I believe (correct me if I'm wrong) that the if (cssStringified.includes(':')) { check will succeed for nearly 100% of css strings, so the regex will be needlessly run in non-safari browsers. Is that correct?

Correct, + regexp.replace will always allocate a new string for you, so you are also performing an unnecessary copy