Empty css values in production mode when using css variables

[kark]

Current behavior:

Production builds contain empty css values when using css variables in certain combinations of css properties. These empty values are handled properly by browsers (Chrome and FF tested)

but not by visual testing tools like @percy/puppeteer and @percy/cypress

Examples:

• shorthand border & border-right

css values	output production styles
border: 1px solid hsl(0, 0%, 60%); border-right: 0;	border-width: 1px 0px 1px 1px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(153, 153, 153); border-bottom-color: rgb(153, 153, 153); border-left-color: rgb(153, 153, 153); border-image: initial; border-right-style: initial; border-right-color: initial;
border: 1px solid var(--color-neutral-60, hsl(0, 0%, 60%)); border-right: 0;	border-top-color: ; border-top-style: ; border-top-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-right: 0px;

• border radius & border-top-left-radius & border-bottom-left-radius

css values	output production styles
border-radius: 6px; border-top-left-radius: 0; border-bottom-left-radius: 0;	border-radius: 0px 6px 6px 0px;
border-radius: var(--border-radius-for-input, 6px); border-top-left-radius: 0; border-bottom-left-radius: 0;	border-top-right-radius: ; border-bottom-right-radius: ; border-top-left-radius: 0px; border-bottom-left-radius: 0px;

To reproduce:

1. Demo on sandbox
2. Repository with visual tests in the CI pipeline
3. Visual test html asset

Expected behavior:

Valid CSS styles using css variables in production builds (as they are in development builds)

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.9.3

[srmagura]

Interesting issue. Here's a much smaller reproduction of the phenomenon you are experiencing: https://codesandbox.io/s/insert-rule-quirk-8ss0pi. It does not involve Emotion at all.

If you inspect the h1 styles in the dev tools, you'll see this:

The properties appear to have an "empty value" even though the <h1> clearly has a non-zero border radius on all but one corner. I think this is either a quirk in the browser or the CSS Object Model specification.

It looks like Percy does not exactly replicate the behavior of a real browser in this case. I'm not sure what would cause that — perhaps they are using headless Chromium or something like that.

As to why the behavior is different in dev and prod, @emotion/sheet uses a "speedy" mode in production only. This mode inserts the CSS rules directly into the CSSOM rather than by adding a new <style> element to the page.

I'm going to convert this to a discussion since it does not appear to be an Emotion issue. Let me know if I'm mistaken.

[kark]

Thank you for looking into this. This is even more interesting after your findings.
What led me to believe this involves Emotion were the differences in behavior between dev and prod.
Thanks for explaining that part.