Media queries outputted in wrong order #30

Open
Worldindustry91 opened this Issue Feb 10, 2016 · 6 comments

Comments

Projects
None yet
4 participants
@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 comment has been minimized.

Show comment
Hide comment
@MadLittleMods

MadLittleMods Feb 10, 2016

Owner

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.

Owner

MadLittleMods commented Feb 10, 2016

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

This comment has been minimized.

Show comment
Hide comment
@Worldindustry91

Worldindustry91 Feb 10, 2016

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;
  }
}

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

This comment has been minimized.

Show comment
Hide comment
@TejasQ

TejasQ Jun 8, 2017

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

TejasQ commented Jun 8, 2017

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

@MadLittleMods

This comment has been minimized.

Show comment
Hide comment
@MadLittleMods

MadLittleMods Jun 8, 2017

Owner

@TejasQ Not yet ☹️

Owner

MadLittleMods commented Jun 8, 2017

@TejasQ Not yet ☹️

@nlfonseca

This comment has been minimized.

Show comment
Hide comment
@nlfonseca

nlfonseca Nov 29, 2017

What is the status of this issue?

What is the status of this issue?

@MadLittleMods

This comment has been minimized.

Show comment
Hide comment
@MadLittleMods

MadLittleMods Nov 29, 2017

Owner

@nlfonseca Not implemented, no change yet. PR welcome

Owner

MadLittleMods commented Nov 29, 2017

@nlfonseca Not implemented, no change yet. PR welcome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment