#1860·stylex

Mixed responsive/print property values emit a non-matching nested media-type condition

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

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:

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