blakeembrey/free-style

Alphabetical media query ordering

kpatient opened this issue · 6 comments

kpatient commented

I'm surprised I've not been able to find this issue anywhere, so maybe I've missed something.

So css declarations are sorted alphabetically when output. This also applies to @media queries which can cause them to override each other.

Example:

    item: {
        width: "20rem",
        '@media screen and (min-width: 500px)' : {
            width: '500px'
        },
        '@media screen and (min-width: 1000px)' : {
            width: '1000px'
        },
    },

This is outputting in this order for me, which I think is because it is reading the 1000 before the 500:

@media only all and (min-width: 500px) .f1hawebh {
    max-width: 500px;
}

@media only all and (min-width: 1000px) .f1hawebh {
    max-width: 1000px;
}
blakeembrey commented

Thanks for the edge-case, it's definitely as you've said - nested styles are being sorted. I think we should not sort nested styles (there's no need) which would fix this issue, but it might push the core issue a little further down the line. Please let me know, after this patch, if there's subsequent issues.

blakeembrey commented

@kpatient Would you like to take a look at #20? It implements the tweak for what I believe is your issue (although the snippets above are actually correct according to the current version, I assumed you meant to show the media queries reversed).

kpatient commented

Thanks so much for the fast response! Can confirm it is now respecting the order.

And yes the above declarations should have been reversed, edited.

kpatient commented

My apologies for not seeing this earlier but it appears the commit #20 is showing mixed results. Which initially happened to be appearing correctly. The results are also different when using webpack auto reload and when just reloading in the browser.

I think its no longer sorting alphabetically like normal properties as you fixed. But the deeper issue seems to be at play now, where the ordering is arbitrary. Maybe because its a javascript object which doesn't have any specified order?

blakeembrey commented

The order of properties is defined in an array, so it's not that. Most likely, whatever is happening with your Webpack reload is causing issues because the last style appended always appears at the bottom. I can't comment more without viewing some code though.