I created a basic reproduction case here: https://github.com/mvsde/postcss-cascade-layers

What’s happening:

I @import another CSS file with layer(test). That other file includes a media query.

After running this through PostCSS with the postcss-import plugin I get the following output:

@layer test {

body {}
}

@media (min-width: 50rem) {
  body {}
}

@layer test {

p {}
}

Note how the layer test is closed before the media query and “re-opened” afterwards.

I think the expected output should be something like:

@layer test {

body {}

@media (min-width: 50rem) {
  body {}
}

p {}
}