Different output on different browsers

[MrJonez77]

Hi,

I was playing around with sort-css-media-queries via postcss-sort-media-queries live demo: https://postcss-sort-media-queries.github.io/ and noticed you get different output in Firefox and Chrome with some queries. For example:

Input 1 (with mobile-first):

@media (min-width: 544px) and (max-height: 768px) {
	margin: 1px;
}
@media (min-width: 1600px) and (max-height: 768px){
	margin: 2px;
}

Output 1 on Firefox:

@media (min-width: 544px) and (max-height: 768px) {
	margin: 1px
}
@media (min-width: 1600px) and (max-height: 768px) {
	margin: 2px
}

Output 1 on Chrome:

@media (min-width: 1600px) and (max-height: 768px) {
	margin: 2px
}
@media (min-width: 544px) and (max-height: 768px) {
	margin: 1px
}

So the order of media queries is different on Chrome and Firefox. I assume "Output 1 on Firefox" is the correct one here (?).

And now, if you reverse the order of the queries, the output differs from the first result, i.e.

Input 2 (reversed order from Input 1, mobile-first):

@media (min-width: 1600px) and (max-height: 768px){
	margin: 2px;
}
@media (min-width: 544px) and (max-height: 768px) {
	margin: 1px;
}

Output 2 on Firefox:

@media (min-width: 1600px) and (max-height: 768px) {
	margin: 2px
}
@media (min-width: 544px) and (max-height: 768px) {
	margin: 1px
}

Output 2 on Chrome:

@media (min-width: 544px) and (max-height: 768px) {
	margin: 1px
}
@media (min-width: 1600px) and (max-height: 768px) {
	margin: 2px
}

Here I would expect output to be same as "Output 1 on Firefox" for both browsers.

[OlehDutchenko]

Hi @JoonasLUT!
First of all - your live demo is awesome 👍 and if you don't mind I shall add this link to the README description.

Thanks for your issue report. I shall check it in few days.

[yunusga]

@MrJonez77, @OlehDutchenko confirmed, WIP!