Shorthand properties transformed to wrong calculated-styles

[jcamden]

Describe the bug
Hello! First of all, thanks for the awesome work! We're adopting chromatic-e2e this week, and I've really been enjoying it. Anyway, we're having an issue where our shorthand properties seem to be getting broken out into their constituent properties in our Storybook builds (specifically, during the page.evaluate of our Chromatic snapshot step). For example, all: unset:

gets broken out into every-style-that-wasn't-explicitly-set: unset. This is a problem because, for example, all the different ways to address border radius (e.g. border-end-end-radius, etc.), can end up overriding the intended border-radius:

It also seems like some shorthand styles such as padding-block

don't get properly split out into, e.g., padding-block-start if the style isn't actively applied:

I can repro the problem locally and in CI, so it's not something platform-specific. And again, it occurs specifically during the page.evaluate of our Chromatic snapshot step:

Fine:

Aaand not fine:

To Reproduce

Wellll, I tried to reproduce on a fork. but it didn't do it---which is probably a good thing:

Here's how to not reproduce:

1. git clone git@github.com:jcamden/chromatic-e2e.git
2. cd chromatic-e2e
3. git checkout shorthand-css-properties
4. yarn install
5. yarn dev:server
6. (new shell) yarn build
7. yarn playwright install
8. yarn test:playwright
9. yarn archive-storybook:playwright (styles are correct)
10. yarn build-archive-storybook:playwright
11. cd storybook-static
12. npx http-server (styles are correct)

As shown in the screenshot, the shorthand properties were preserved in these builds. I'm hoping you might have some insight as to why the shorthand properties are getting transformed during page.evaluate for our app. I really appreciate it!

[jcamden]

Oh FWIW, I just noticed that the styles are changed during the snapshot step, but then they actually remain changed for the rest of the test. That is confusing to me because I was thinking this had something to do with rrweb-snapshots expanding the shorthand props into longhand. But I'm surprised that the styles actually get replaced as a result of snapshotting. (I guess that's what it means to "inline computed styles.")

[rss-maksim]

Hello,

I was able to reproduce the issue in the repository shared above by @jcamden moving inline styles to a css class.
Please see the attached video and screen shots for reference.

screen-recording-2025-05-08-at-171135_ewFXSJN9.mp4

I assume that Chromatic may reorder CSS properties based on an internal algorithm when serializing styles for visual snapshots. This reordering likely aims to produce consistent snapshots, but it results in transformed CSS styles.
For instance the styles:

all: unset;
border-radius: 50px;

are transformed into the following without preserving original cascade order:

border-radius: 50px;
border-end-end-radius: unset;
border-end-start-radius: unset;
border-start-end-radius:  unset;
border-start-start-radius: unset;

As a result, individual unset values can override intended ones, such as the border-radius, leading to unintended differences in visual regression tests.

Could someone from the Chromatic team confirm if this is the intended behavior?
Any thoughts how to fix that leaving all: unset; property?

Thank you!

[andrewortwein]

Could someone from the Chromatic team confirm if this is the intended behavior?
Any thoughts how to fix that leaving all: unset; property?

This is not our intended behavior at Chromatic. As @jcamden mentioned above, we make use of rrweb and found this seemingly-related bug. That issue hasn't been updated in several months, but I'm asking about it in case it was fixed elsewhere.