hail2u/node-css-mqpacker — pull request #24 by Maks3w (2014-10-22 11:17:11+00:00)
Title: Sort media queries

Note: Function code from https://github.com/buildingblocks/grunt-combine-media-queries

Why this feature should be merged even breaking the backward compatibility?

Following the idea there is not "unsafe group" only bad CSS code (https://github.com/hail2u/node-css-mqpacker/issues/16#issuecomment-53139026) I have ported this sort algorithm from https://github.com/buildingblocks/grunt-combine-media-queries

Where MQpacker fail and really is a fail in the library?

MQPacker fail because "have" a first win algoritm. So the result CSS has the same order of media queries as found in the original source.

But what happens in the following scenario?

```css
/* From WidgetA.less */
.widgetA: { foo: 'xxx' }
@media (min-width:1024px) {
.widgetA: {'foo': 'yyy'}
}

/* From WidgetB.less */
.widgetB: { foo: 'xxx' }
@media (min-width:480px) {
.widgetB: {'foo': 'yyy'}
}
@media (min-width:1024px) {
.widgetB: {'foo': 'zzz'}
}
```

Both widgets are well written CSS individually and have the media queries sorted.
But after process the CSS we have the following result:

```css
.widgetA: { foo: 'xxx' }
.widgetB: { foo: 'xxx' }
@media (min-width:1024px) {
.widgetA: {'foo': 'yyy'}
.widgetB: {'foo': 'zzz'} // OOOps this now have lower priority!!!.
}
@media (min-width:480px) {
.widgetB: {'foo': 'yyy'}
}
```

So this PR fix this situation **enforcing** to use a specific sorted algoritm. CSS programers **MUST** follow this algoritm if they want to have a working CSS file after use MQpacker

The result is:
```css
.widgetA: { foo: 'xxx' }
.widgetB: { foo: 'xxx' }
@media (min-width:480px) {
.widgetB: {'foo': 'yyy'}
}
@media (min-width:1024px) {
.widgetA: {'foo': 'yyy'}
.widgetB: {'foo': 'zzz'}
}
```

The algoritm used here is the same used at https://github.com/buildingblocks/grunt-combine-media-queries (MIT license)

These are the rules applied:

1. Rules without media queries.
2. min-width rules sorted in ascending order by width value.
3. print media and min-width rules sorted in ascending order by width value.
4. min-height rules sorted in ascending order by height value.
5. print media and min-height rules sorted in ascending order by height value.
6. max-width rules sorted in descending order by width value.
7. print media and max-width rules sorted in descending order by width value.
8. max-height rules sorted in descending order by height value.
9. print media and max-height rules sorted in descending order by height value.
10. Rest of print media queries