Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Media queries outputted in wrong order #30

Closed
Worldindustry91 opened this issue Feb 10, 2016 · 8 comments
Closed

Media queries outputted in wrong order #30

Worldindustry91 opened this issue Feb 10, 2016 · 8 comments

Comments

@Worldindustry91
Copy link

@Worldindustry91 Worldindustry91 commented Feb 10, 2016

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
Copy link
Owner

@MadLittleMods 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
Copy link
Author

@Worldindustry91 Worldindustry91 commented 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;
  }
}
@TejasQ
Copy link

@TejasQ TejasQ commented Jun 8, 2017

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

@MadLittleMods
Copy link
Owner

@MadLittleMods MadLittleMods commented Jun 8, 2017

@TejasQ Not yet ☹️

@nlfonseca
Copy link

@nlfonseca nlfonseca commented Nov 29, 2017

What is the status of this issue?

@MadLittleMods
Copy link
Owner

@MadLittleMods MadLittleMods commented Nov 29, 2017

@nlfonseca Not implemented, no change yet. PR welcome

erikthalen pushed a commit to erikthalen/postcss-css-variables that referenced this issue Jan 14, 2019
erikthalen added a commit to erikthalen/postcss-css-variables that referenced this issue Jan 14, 2019
@demyan1411
Copy link

@demyan1411 demyan1411 commented Apr 2, 2019

Hello everyone, what about solving this problem?

@MadLittleMods
Copy link
Owner

@MadLittleMods MadLittleMods commented Apr 2, 2019

@demyan1411 There is a PR to solve the problem with some review points waiting to be addressed, #92

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

MadLittleMods added a commit that referenced this issue May 28, 2019
Fix #30
MadLittleMods added a commit that referenced this issue May 28, 2019
Fix #30
MadLittleMods added a commit that referenced this issue May 28, 2019
Fix #30
MadLittleMods added a commit that referenced this issue May 28, 2019
Fix #30
MadLittleMods added a commit that referenced this issue Jun 17, 2019
Fix #30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.