image() mixin doesn't work right inside @media queries

[rstacruz]

This is because Stylus doesn't support nested media queries yet, but trying to use image() inside a media query yields you unexpected results.

Practical use case: you want to use a smaller logo in smaller screens, and want them to be retina-compliant.

Input

@import nib
@media (max-width: 400px)
  .title
    display: block
  .logo
    image: 'logo.png'

Expected output

@media (max-width: 400px) {
  .title {
    display: block;
  }
  .logo {
    background-image: url("logo.png");
  }
}
@media (max-width: 400px) and (-webkit-min-device-pixel-ratio: 1.5) {
  .logo {
    background-image: url("logo@2x.png");
    -webkit-background-size: auto auto;
    -moz-background-size: auto auto;
    background-size: auto auto;
  }
}

Actual output

@media (max-width: 400px) {
  .title {
    display: block;
  }
  .logo {
    background-image: url("logo.png");
  }
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
 {
      background-image: url("logo@2x.png");
      -webkit-background-size: auto auto;
      -moz-background-size: auto auto;
      background-size: auto auto;
    }
}
}

[rstacruz]

Hm, this actually seems to be okay: http://stackoverflow.com/questions/11746581/nesting-media-rules-in-css haven't tested it extensively though.

[rstacruz]

...just tested it and this simple test fails in chrome:

@media screen {
@media (min-width: 200px) {
    .section { border: solid 10px #f00; }
}
}

...so yeah, nested media queries have to be flattened.

[vslinko]

:+1: Totally agree. I have many mixins like retina-background-phone and others.