SE7ENSKY/grunt-group-css-media-queries

Wrong order of media queries

Narretz opened this issue · 1 comments

Narretz commented

I have the following css:

@media (min-width: 992px) {
  .padded {
    padding: 0 20px;
  }
}
@media (min-width: 480px) {
  .button-small {
    padding: 0 12px 0 15px;
  }
}
@media (min-width: 992px) {
  .button-small {
    padding: 0 25px;
  }
}

Grouped, this ends up as:

@media (min-width: 992px) {
  .padded {
    padding: 0 20px;
  }

  .button-small {
    padding: 0 25px;
  }
}

@media (min-width: 480px) {
  .button-small {
    padding: 0 12px 0 15px;
  }
}

min-width: 480px must come before min-width: 920px, otherwise it overwrites it.