certain media queries don't get merged

[sxtxixtxcxh]

# application.css.sass
= respond-to($media)
  @if $media == handheld
    @media only screen and (max-width: 480px)
      @content
  @if $media == tablet
    @media only screen and (max-width: 767px)
      @content

header
  +respond-to('handheld')
    display: none

@import static/_contact.sass

# static/_contact.sass

.contact-title
  +respond-to('tablet')
    display: inline
  +respond-to('handheld')
    display: none

results in:

@media only screen and (max-width: 480px) {
  /* line 6, ../../app/assets/stylesheets/application.css.sass */
  header {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  /* line 1, ../../app/assets/stylesheets/static/_contact.sass */
  .contact-title {
    display: inline;
  }
}
@media only screen and (max-width: 480px) {
  /* line 1, ../../app/assets/stylesheets/static/_contact.sass */
  .contact-title {
    display: none;
  }
}

[aaronjensen]

Looks like this only happens in development... they get merged properly when bundling assets. It may have something to do with the way that postprocessors work. I'll look into it.

[aaronjensen]

Try as I might, I cannot repro this either with Sprockets on its own or sass-rails:

@media only screen and (max-width: 480px) {
  /* line 9, ../../app/assets/stylesheets/test.css.sass */
  header {
    display: none;
  }

  /* line 1, ../../app/assets/stylesheets/_test2.css.sass */
  .contact-title {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  /* line 1, ../../app/assets/stylesheets/_test2.css.sass */
  .contact-title {
    display: inline;
  }
}

@sxtxixtxcxh does it repro when you trim it down to just that bare minimum?