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"'