Incorrect handling of negated media queries (`@media not` ...)

Author: kuglandCreated Jun 9, 2021Updated Nov 22, 2025

Labelst: Bugw: Unconfirmed

Stylus v0.54.8 handles negated media queries (@media not ...) incorrectly.

Code:

stylus

@media all and (min-width: 10px)
  @media not all and (min-width: 20px)
    body
      background: red

@media all and (min-width: 10px)
  @media not screen and (min-width: 20px)
    body
      background: green

Transpiled CSS:

css

@media all and (min-width: 20px) and (min-width: 10px) {
  body {
    color: #f00;
  }
}
@media all and (min-width: 10px) and (min-width: 20px) {
  body {
    background: #008000;
  }
}

Expected CSS:

css

@media all and (min-width: 10px) {
  @media not all and (min-width: 20px) {
    body {
      background: #f00;
    }
  }
}
@media all and (min-width: 10px) {
  @media not screen and (min-width: 20px) {
    body {
      background: #008000;
    }
  }
}

Source: stylus/stylus

View original on GitHub View discussion on GitHub