facebook / facebook/stylex

Mixed responsive/print property values emit a non-matching nested media-type condition

Open
#1,860 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
10.3k
Forks
481
Avg merge
3d 8h
Merged PRs (30d)
13

Description

Using `@stylexjs/stylex` / `@stylexjs/unplugin` 0.19.0 with Vite 6.4.3 and `stylex.vite({ useCSSLayers: false })`, combining responsive and print values on the same property produces a media condition that never matches in Chromium:

```ts
const styles = stylex.create({
main: {
marginLeft: {
default: 224,
'@media (max-width: 900px)': {
default: 168,
'@media (max-width: 620px)': 132,
},
'@media print': 0,
},
},
});
```

The stylesheet actually fetched by the browser contains:

```css
@media (width <= 900px) and (not (print)) {
.generated { margin-left: 168px; }
}
```

At viewport width 900 (DPR 1), screen media, Chrome 155, the computed margin-left remains **224px**, not 168px. The 620px nested override and responsive content padding are similarly affected. A normal rendered Playwright assertion catches this; this is not inferred from the source or attributed to stale assets. Without the print branch, the same nested responsive definition passes at widths 1440, 901, 900, 621, 620 and 390.

The emitted condition uses `print` as a nested media feature rather than a media type. A print-only property works; the failure is the normalization of mixed responsive/print values on one property. I have not isolated which stage of the StyleX/Vite toolchain performs this normalization.

Current non-blocking application workaround: keep only the conflicting print `margin-left`/`width`/`padding` resets in a small global `@media print` rule, while all other screen and print declarations remain StyleX. Both wide and narrow screen/print assertions pass with that workaround.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.