Media queries order broken in 5.0.2

[fmal]

Seems like https://github.com/postcss/postcss-nested/commit/ec804d17bdeaf8c239abbf123dd5303dd07237a1 introduced some regression regarding @media blocks

Given the following piece of css:

.main {
  @media mq-large-and-up {
    display: grid;
    grid-template-columns: 20rem 1fr;
    grid-template-areas: 'sidebar content';
  }

  @media mq-xlarge-and-up {
    grid-template-columns: 25rem 1fr;
  }
}

The mq-xlarge-and-up media query should come after mq-large-and-up in the output, but the result is this:

Version 5.0.1 produced the correct order.

[ai]

Can you show input without any other PostCSS plugins?

[fmal]

@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

[ai]

I will try to look at this weekend

[ai]

.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).

[fmal]

@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.

[larswittenberg]

@fmal have you found a solution for this bug with Next.js + TailwindCSS + postcss-nested? I have encountered the same problem.