-
Notifications
You must be signed in to change notification settings - Fork 62
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
Comments
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. |
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;
}
} |
Guys, this has been open for over a year... has there been any progress on it lately? |
@TejasQ Not yet |
What is the status of this issue? |
@nlfonseca Not implemented, no change yet. PR welcome |
Hello everyone, what about solving this problem? |
@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 |
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/):
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?
The text was updated successfully, but these errors were encountered: