Media queries outputted in wrong order

[Worldindustry91]

So I have my CSS variables declared like so (from the end of Phillip Walton article http://philipwalton.com/articles/why-im-excited-about-native-css-variables/):

@media (min-width: 1px) and (max-width: 799px) {
  :root { 
    --navbar-padding: 5%;   
  }
}
@media (min-width: 800px) {
  :root { 
    --navbar-padding: 1rem;      
  }
}
@media (min-width: 992px) {
  :root { 
    --navbar-padding: 3rem;
  }
}

This CSS variable setup works perfectly, with the media queries being rendered in the correct order. When I run postcss-css-variables, however, the media queries get outputted in the opposite order, and my production file renders incorrectly because of overriding. Is there something I am doing wrong?

@media (min-width: 992px) {
  .navbar {
    padding: 1rem 3rem;
  }
}

@media (min-width: 800px) {
  .navbar {
    padding: 1rem 1rem;
  }
}

@media (min-width: 1px) and (max-width: 799px) {
  .navbar {
    padding: 1rem 5%;
  }
}

[MadLittleMods]

This is a known issue but we already have users using the legacy behavior. To get around it for now, you need to define your media queries in the opposite order.

Perhaps we could add an option now to change the direction but the expected source order is definitely in the plans whenever I get a chance to refactor for a version 1.0.0.

[Worldindustry91]

Sounds good. Defining them in the opposite order isn't a good idea, because then the development version gets messed up and the production version fixed. What I did as a temporary fix was define my media queries as such:

:root { 
  --navbar-padding: 3rem; 
}

@media (min-width: 1px) and (max-width: 799px) {
  :root { 
    --navbar-padding: 5%;  
  }
}
@media (min-width: 800px) and (max-width: 991px) {
  :root { 
    --navbar-padding: 1rem;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  :root { 
    --navbar-padding: 3rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --navbar-padding: 3rem;
  }
}

[TejasQ]

Guys, this has been open for over a year... has there been any progress on it lately?

[MadLittleMods]

@TejasQ Not yet ☹️

[nlfonseca]

What is the status of this issue?

[MadLittleMods]

@nlfonseca Not implemented, no change yet. PR welcome

[demyan1411]

Hello everyone, what about solving this problem?

[MadLittleMods]

@demyan1411 There is a PR to solve the problem with some review points waiting to be addressed, https://github.com/MadLittleMods/postcss-css-variables/pull/92

Feel free to tackle the remaining points and submit a new PR