Media query orders can get mixed up

[jeremyworboys]

Media queries are appended in the order they are found in the file.

This could cause an issue in the following scenario:

.selector-1 { color: blue; }
@media screen and (min-width: 40em) {
    .selector-1 { color: red; }
}

.selector-2 { color: blue; }
@media screen and (min-width: 25em) {
    .selector-2 { color: green; }
}
@media screen and (min-width: 40em) {
    .selector-2 { color: red; }
}

The desired output would be:

.selector-1 { color: blue; }

.selector-2 { color: blue; }

@media screen and (min-width: 25em) {
    .selector-2 { color: green; }
}
@media screen and (min-width: 40em) {
    .selector-1 { color: red; }
    .selector-2 { color: red; }
}

The actual output would be:

.selector-1 { color: blue; }

.selector-2 { color: blue; }

@media screen and (min-width: 40em) {
    .selector-1 { color: red; }
    .selector-2 { color: red; }
}
@media screen and (min-width: 25em) {
    .selector-2 { color: green; }
}

The ideal situation would be both selector to be red at sizes wider than 40em. View the demo here

[bokkagroup]

Any solution for this? This is a very helpful script but the order issue does prevent me from using it. I supposed you'd need an additional argument for direction as well since mobile-first v. desktop-first could be an issue.

Thanks for sharing your work.

[jeremyworboys]

I am currently without an office setup so I can't test whether this solution will work or not, but you should be able to put a set of empty media queries at the beginning of your sass file defining the order.

[bokkagroup]

I'll give it a shot. Thanks for getting back to me.

On Nov 28, 2012, at 2:05 PM, Jeremy Worboys [email protected] wrote:

I am currently without an office setup so I can't test whether this solution will work or not, but you should be able to put a set of empty media queries at the beginning of your sass file defining the order.

—
Reply to this email directly or view it on GitHub.

[bokkagroup]

Didn't work unfortunately.

On Nov 28, 2012, at 2:05 PM, Jeremy Worboys [email protected] wrote:

I am currently without an office setup so I can't test whether this solution will work or not, but you should be able to put a set of empty media queries at the beginning of your sass file defining the order.

—
Reply to this email directly or view it on GitHub.

[jeremyworboys]

I had a feeling it may not. If you are any good with python have a go at
implementing the flag and submit a pull request. Otherwise I'll try to make
some time to it to have a look.

On 29/11/2012, at 8:15 AM, Dallas Johnson [email protected] wrote:

Didn't work unfortunately.

On Nov 28, 2012, at 2:05 PM, Jeremy Worboys [email protected]
wrote:

I am currently without an office setup so I can't test whether this
solution will work or not, but you should be able to put a set of empty
media queries at the beginning of your sass file defining the order.

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/1#issuecomment-10821961.

[bokkagroup]

Actually, I think it may work with a faux rule in the "empty" media queries. I haven't been able to test it thoroughly but looks good at first glance.

On Nov 28, 2012, at 2:17 PM, Jeremy Worboys [email protected] wrote:

I had a feeling it may not. If you are any good with python have a go at
implementing the flag and submit a pull request. Otherwise I'll try to make
some time to it to have a look.

On 29/11/2012, at 8:15 AM, Dallas Johnson [email protected] wrote:

Didn't work unfortunately.

On Nov 28, 2012, at 2:05 PM, Jeremy Worboys [email protected]
wrote:

I am currently without an office setup so I can't test whether this
solution will work or not, but you should be able to put a set of empty
media queries at the beginning of your sass file defining the order.

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/1#issuecomment-10821961.
—
Reply to this email directly or view it on GitHub.