[Bug]: grid template areas are not inlined correctly by Chrome

[pauldambra]

Preflight Checklist

• [X] 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

Version

latest v2

Expected Behavior

that the grid-template-area is captured correctly

Actual Behavior

A customer site uses grid template areas in their CSS. When playing back we see the content is not aligned as expected. When viewing the working site things appear in the correct place.

On checking the captured CSS it does not match the source

The source has

#wrapper {
  display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: max-content;
    grid-template-areas:
        "header header"
        "main main"
        "footer footer";
    margin: 0px auto;
}

but the captured CSS has:

#wrapper { 
display: grid; 
width: 100%; 
height: 100%; 
grid-template: \"header header\" max-content / repeat(2, 1fr); 
margin: 0px auto; 
}

you can see the CSS has been collapsed to a short-hand grid-template and lost detail from the original

Steps to Reproduce

You can see a working example of this here: https://jsfiddle.net/pauldambra/oLtcrjm4/10/ showing that the captured CSS has been mangled

Testcase Gist URL

No response

Additional Information

No response

[pauldambra]

ah, looking in safari and firefox. this is another Chrome is the IE8 of the new millenium since it seems correct in those other browsers 🤣

[debbyglance]

We are also impacted by this bug

[jaj1014]

Resurfacing that this is still an issue. We were using the fix from @pauldambra PR that was closed, but ran into an issue with the regex that solution used. I have opened another PR that tweaks the original to address the issue.