Media queries are dropped by sass under certain circumstances, leading to a different result than expected

[danieltroger]

The outmost media query is dropped when containing the not keyword, when nesting three media queries inside each other.

Input:

body {
  @media not all and (hover: hover) and (pointer: fine) {
    @media (max-height: 1000px) {
      font-size: 12px;
      @media (max-width: 600px) {
        background: red;
      }
    }
  }
}

Output:

@media not all and (hover: hover) and (pointer: fine) {
  @media (max-height: 1000px) {
    body {
      font-size: 12px;
    }
  }
}
@media (max-height: 1000px) and (max-width: 600px) {
  body {
    background: red;
  }
}

As you can see the background:red no longer only happens on devices supporting hover and having a fine pointer.

Expected output

@media not all and (hover: hover) and (pointer: fine) {
  @media (max-height: 1000px) {
    body {
      font-size: 12px;
    }
  }
}
@media not all and (hover: hover) and (pointer: fine) {
  @media (max-height: 1000px) and (max-width: 600px) {
    body {
      background: red;
    }
  }
}

Sass version: 1.54.5 compiled with dart2js 2.17.6

[danieltroger]

Thank you for the quick fix