Mixed responsive/print property values emit a non-matching nested media-type condition
- 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
Assessment
This issue has not been assessed yet.