Media query option to preserver order

[erikthalen]

As in #30, our media queries got re-ordered when running this plugin.

I've added an option to preserve at-rule-order, which makes it all good again. In the current project I'm on we're developing mobile first and it's crucial that the smaller @media-rule doesn't overwrite the bigger one (which should come after the first one).

When the new option is true:

options = {
    preserveAtRulesOrder: true
}

all the at-rules will be inserted in the CSS after the previously computed one. Instead of being inserted right after the parent selector. The new option should be used when using min-widths, and should be set to false when using max-widths.

The new option defaults to false, meaning no change from how the plugin behaved before.

[MadLittleMods]

@erikthalen Sorry for not reviewing this sooner ❤️. Thanks for the fix!

@awilson82-vp Thanks for taking a look 💯

[luiscarlosjayk]

First of all, thanks for your work. Second, please release this, need it to being able to fix issues in old browsers, which this postcss plugin helps to solve.

[patmead]

@Ciul I've moved to using postcss-preset-env instead - it only supports variable declarations on :root but at least it doesn't break your @media rules by putting them in the wrong order.

[MadLittleMods]

Closing as we haven't got a response from @erikthalen

https://github.com/MadLittleMods/postcss-css-variables/pull/101 holds the latest of this if someone wants to pick it up again

[MadLittleMods]

This was merged via https://github.com/MadLittleMods/postcss-css-variables/pull/101 and is now published in postcss-css-variables@0.13.0, https://www.npmjs.com/package/postcss-css-variables

Thanks @erikthalen for the contribution ❤️

[erikthalen]

Thanks @erikthalen for the contribution ❤️

Glad I could help!

[fredrikekelund]

Wanted to extend a big and sincere thank you for this, @erikthalen (and @MadLittleMods)! Made our workflow a lot smoother.