Sorting order max-width
jimblue opened this issue · comments
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
No.
@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?
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.
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?
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.
@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 😄
Hi there!
I wrote tiny module sort-css-media-queries, as extend for css-mqpacker, perhaps someone will come in handy!
I ran into this issue when @import
ing 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.
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
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.