Fix chrome grid template

[jaj1014]

Add replaceChromeGridTemplateAreas utility function to fix grid-template-area styles that are improperly improperly parsed by Chrome into rule.cssText and causing broken recordings when attempting to play back.

Approach: rather than using regex to parse and manipulate the cssText directly (see original PR), we can check for when the cssText contains the grid issue and rebuild by iterating through rule.style: CSSStyleDeclaration collection and creating the string directly from the style declarations.

Link to chrome bug: https://issues.chromium.org/issues/40227336
Verified in Firefox and Safari that the issue does not exist. It doesn't try to convert to grid-template shorthand

Examples:

example declared styles 1:

example declared styles 2:

rule.cssText for above declared style examples:

// repeat 4 when there were actually 8
.floating-bars {
    grid-template: "bar1 bar2" repeat(4, 1fr) / 56rem 56rem 1fr 0px;
    content: "{}";
    display: grid;
    height: 100vh;
    gap: 0px;
}
// missing \"footer footer\"
.test-styles {
  display: grid;
  grid-template: \"header header\" \"aside main\" minmax(0px, 1fr) / 14.5em minmax(0px, 1fr);
}

fortunately, values in rule.style collection of CSSStyleDeclaration are correct, so we can use these to rebuild:

example1.style.getPropertyValue('grid-template-areas') === '"bar1 bar2" "bar1 bar2" "bar1 bar2" "bar1 bar2" "bar1 bar2" "bar1 bar2" "bar1 bar2" "bar1 bar2"'
example2.style.getPropertyValue('grid-template-areas') === '"header header" "aside main" "footer footer"'

[changeset-bot]

🦋 Changeset detected

Latest commit: 2f4c2e7

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

This PR includes changesets to release 19 packages

Name	Type
rrweb-snapshot	Patch
rrweb	Patch
rrdom	Patch
rrdom-nodejs	Patch
rrweb-player	Patch
@rrweb/all	Patch
@rrweb/replay	Patch
@rrweb/record	Patch
@rrweb/types	Patch
@rrweb/packer	Patch
@rrweb/utils	Patch
@rrweb/web-extension	Patch
rrvideo	Patch
@rrweb/rrweb-plugin-console-record	Patch
@rrweb/rrweb-plugin-console-replay	Patch
@rrweb/rrweb-plugin-sequential-id-record	Patch
@rrweb/rrweb-plugin-sequential-id-replay	Patch
@rrweb/rrweb-plugin-canvas-webrtc-record	Patch
@rrweb/rrweb-plugin-canvas-webrtc-replay	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