Strict media range loses its excluded boundary in StyleX unplugin/Vite production CSS
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.
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:
@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: falsematchMedia('(width >= 620.01px) and (width <= 900px)').matches: truematchMedia('(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:
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.
Source: facebook/stylex