Sorting order max-width

[jimblue]

Hi!

Thanks for this nice code.

Just wondering if you have any plan to make this work out of the box with max-width?

Thanks

[hail2u]

No.

[jimblue]

@hail2u can I ask why? Half use min-width workflow for mobile first the other use max-width for desktop first.
Why it doesn't make sens to offer both solution?

[hail2u]

When I had added this option, mobile first was a best practice. That is because sort option only supports min-width queries. If you think desktop first is also a best practice, tell me here. I’ll re-consider it.

Personaly, I don’t use and didn’t want to add sort option. I prefer defining queries’ order first. Because guessing queries order is hard. That is a dark side of this limitation.

[jimblue]

Hi @hail2u !

Thanks for your answer 😄 !

I don't think desktop first is a best practice, neither do mobile first, both are good !
I think we need both, it's simply depend of project.

forget-mobile-first-desktop-first-it-s-time-to-think-element-first

So it could be really nice if you consider adding support for both approach.
It could maybe work with an option [ min or max ] that define if media queries need to be order like this:

for max-width

@media (max-width: 979px) {
}

@media (max-width: 767px) {
}

@media (max-width: 480px) {
}

or like this for width:

@media (min-width: 480px) {
}

@media (min-width: 767px) {
}

@media (min-width: 979px) {
}

What do you think?

[hail2u]

On element first, queries does not share a value, because their value depends on elements, not on viewport (or device). In this case, I think there is no need to pack queries with this tool.

[jimblue]

@hail2u OK it was maybe not the best exemple...
I just trying to say there's no really best practice and max-width could be has nice to have as min-width to handle all case... I hope it does make sens for you 😄

[OlehDutchenko]

Hi there!
I wrote tiny module sort-css-media-queries, as extend for css-mqpacker, perhaps someone will come in handy!

[EthanNYT]

I ran into this issue when @importing multiple files and concatenating them with Sass. Example:

styles.scss:

@import 'style-1';
@import 'style-2';

_style-1.scss:

@media (max-width: 767px) { /* styles 1 */ }

_style-2.scss

@media (max-width: 979px) { /* styles 2 */ }

@media (max-width: 767px) { /* styles 3 */ }

output CSS:

@media (max-width: 767px) { /* styles 1 */ }

@media (max-width: 979px) { /* styles 2 */ }

@media (max-width: 767px) { /* styles 3 */ }

CSS after processing with css-mqpacker (now out of order):

@media (max-width: 767px) { 
    /* styles 1 */ 
    /* styles 3 */ 
}

@media (max-width: 979px) { /* styles 2 */ }

So, even though in each individual file the media queries are in the correct order, once they get concatenated, and the CSS is processed, they are out of order.

While mobile-first is still a best practice, there are still plenty of legacy codebases that are desktop-first (indeed, where I encountered this error). Having this flexibility would make the plugin more useful.

@dutchenkoOleg Thanks for sharing, I'll try it out.

[jimblue]

Hi @hail2u,

What do you think about adding features from @dutchenkoOleg sort-css-media-queries into css-mqpacker core!?

• nothing will be broken 💀
• it will handle much more case 🎉
• .postcrssrc's configuration will be easier ✨

Pure happiness for many more peoples, don't you think 😃 ?

Cheers

[hail2u]

nothing will be broken

Wrong. This would change --sort option.

it will handle much more case

Partially true. But you could do exactly same thing by installing sort-css-media-queries.

.postcrssrc's configuration will be easier

I don’t want to think about an environment that is not PostCSS.