facebook / facebook/stylex

Strict media range loses its excluded boundary in StyleX unplugin/Vite production CSS

Open
#1,859 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

## 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

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.