Strict media range loses its excluded boundary in StyleX unplugin/Vite production CSS
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
## Reproduction context
`@stylexjs/stylex` and `@stylexjs/unplugin` 0.19.0, Vite 6.4.3, React integration, `stylex.vite({ useCSSLayers: false })`. Production CSS from this toolchain changes a strict range boundary to an inclusive decimal minimum. I have not isolated whether normalization occurs in StyleX or subsequent Vite CSS processing.
```ts
const styles = stylex.create({
main: {
marginLeft: {
default: 224,
'@media (620px < width <= 900px)': 168,
'@media (max-width: 620px)': 132,
},
},
});
```
The fetched production stylesheet contains the equivalent of:
```css
@media (width >= 620.01px) and (width <= 900px) { .medium { margin-left: 168px; } }
@media (width <= 620px) { .narrow { margin-left: 132px; } }
```
At `innerWidth=620`, visualViewport width 620, scale/DPR 1, HeadlessChrome 155.0.0.0 on macOS, observed:
- `matchMedia('(620px < width <= 900px)').matches`: false
- `matchMedia('(width >= 620.01px) and (width <= 900px)').matches`: true
- `matchMedia('(max-width: 620px)').matches`: true
- resulting computed margin-left: 168px, expected 132px
This is measured against the fetched stylesheet after isolating the build/server assets and state; it is not an assumption about stale assets. Native strict range and generated decimal-range predicates demonstrably disagree at the boundary.
## Working alternative
Nested max-width conditions preserve the intended precedence without introducing a strict decimal minimum:
```ts
marginLeft: {
default: 224,
'@media (max-width: 900px)': {
default: 168,
'@media (max-width: 620px)': 132,
},
}
```
Rendered checks at 1440, 901, 900, 621, 620 and 390 now pass. This workaround unblocks the application; reporting the boundary behavior for toolchain investigation, not requesting an urgent application-specific fix.
Contributor guide
Assessment
This issue has not been assessed yet.