[Bug]: `background` shorthand property expands to empty string longhand properties instead of correct values in cssText

[megboehlert]

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-snapshot

Version

v2.0.0-alpha.18

Expected Behavior

background shorthand to correctly expand the longhand properties even when using CSS variables in an externally linked stylesheet <link>

Actual Behavior

background shorthand expands the longhand properties to '' when the scenario listed below is encountered.

Shorthand property (that contains only some properties AND at least one is a variable) with longhand property overrides (which is what the customer has today). This is scenario 4 above, where red is swapped with a CSS variable var(--color-primary).

{
    background: var(--color-primary) url("../images/checkbox.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80%; 
}

Steps to Reproduce

Capture an element that contains the CSS properties as listed above from an external linked stylesheet.

Testcase Gist URL

No response

Additional Information

This could very well be a limitation of CSS web APIs and how CSSRules are constructed when encountering a shorthand property like background that uses CSS variables and which does not define each longhand property within it.

Note: There isn't anything wrong with the styles themselves, but more likely where they are being read from. I noticed that two elements (checkboxes) with the same styles for background but one element's styles came from a CSS supports rule in an external sheet <link> and the other one came from a CSS import rule in an internal stylesheet <style>. The checkbox that is styled by the external sheet is not being displayed correctly in the replay whereas the checkbox that is styled by the internal sheet is displayed correctly in the replay.

So far, I've only noticed this issue with the background shorthand property. There are multiple scenarios below. The first 4 display the correct CSS in replays, whereas the last one does not.

What does work (displays the correct css in replay)

1. All longhand properties

{
    background-color: var(--color-primary);
    background-image: url("../images/checkbox.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80%; 
}

2. Single shorthand property with some values omitted

{
    background: var(--color-primary) url("../images/checkbox.png");
}

3. Shorthand property with all longhand properties (Color, Image, Repeat, Attachment, Position) defined (with and without longhand properties overriding)

{
    background: var(--color-primary) url("../images/checkbox.png") no-repeat center center / 80%;
    background-size: 90%; // This would override 80% but the other values would remain and be properly assigned to correct longhand properities
}

4. Any of the above if var(--color-primary) was swapped for a set color red and the following

{
    background: red url("../images/checkbox.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80%; 
}

What does not work

1. Shorthand property (that contains only some properties AND at least one is a variable) with longhand property overrides (which is what the customer has today). This is scenario 4 above, where red is swapped with a CSS variable var(--color-primary).

{
    background: var(--color-primary) url("../images/checkbox.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80%; 
}