Closed fmal closed 3 years ago
Can you show input without any other PostCSS plugins?
@ai sure, i have replaced the CSS modules values variables from the original example to plain media queries and the same happens (the first media query block overrwrites the one that comes later):
.main {
@media screen and (min-width: 48.75em) {
display: grid;
grid-template-columns: 20rem 1fr;
grid-template-areas: 'sidebar content';
}
@media screen and (min-width: 88.5em) {
grid-template-columns: 25rem 1fr;
}
}
I have the following postcss.config.json
:
{
"plugins": [
"postcss-flexbugs-fixes",
"postcss-nested",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
and using next.js as build tool but i'm not sure whether that's of any relevance
I will try to look at this weekend
.main {
@media screen and (min-width: 48.75em) {
display: grid;
grid-template-columns: 20rem 1fr;
grid-template-areas: 'sidebar content';
}
@media screen and (min-width: 88.5em) {
grid-template-columns: 25rem 1fr;
}
}
compiles to
@media screen and (min-width: 48.75em) {
.main {
display: grid;
grid-template-columns: 20rem 1fr;
grid-template-areas: 'sidebar content'
}
}
@media screen and (min-width: 88.5em) {
.main {
grid-template-columns: 25rem 1fr
}
}
It looks correct.
Unfortunately, to fix this bug I will need CSS input, CSS output, and expected CSS output.
Try to reduce your PostCSS plugin and CSS until you will have the error. We will need a minimum example.
You can create a test repo if you will find a minimum example, which reproduce only on 2+ plugins (it could be a conflict between 2 plugins).
@ai sorry for the false alarm, this seems to be some next.js specific issue that i do not really wish to debug further. They're using postcss@8.1.7
and inlining/embedding postcss-loader@4.0.3
in their npm package. Given this combination of dependencies and postcss-nested@5.0.2
i can experience this issue. However when I update to latest postcss
and postcss-loader
in my other project with webpack nested media queries are compiling fine.
@fmal have you found a solution for this bug with Next.js + TailwindCSS + postcss-nested? I have encountered the same problem.
Seems like https://github.com/postcss/postcss-nested/commit/ec804d17bdeaf8c239abbf123dd5303dd07237a1 introduced some regression regarding @media blocks
Given the following piece of css:
The
mq-xlarge-and-up
media query should come aftermq-large-and-up
in the output, but the result is this:Version 5.0.1 produced the correct order.