#1859·stylex

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

Author: MattJDavidsonCreated Sep 8, 2026Updated Sep 8, 2026

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.

typescript
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:

typescript
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.