@import with layer() places media queries outside of the layer

[mvsde]

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 {}
}

[romainmenke]

@mvsde Thank you for reporting this!

[romainmenke]

@RyanZim I think I can resolve this but not easily without refactoring a substantial part of the code base.

Currently this plugin is written very dense and leverages many javascript mechanics (like reduce) that make it much harder to change parts.

Is this something you are open to?

This refactor should also make it possible to add support for supports conditions (@import url("foo.css") supports(not (display: flex));)

---

I will also attempt to fix this without refactoring anything major, hopefully this works 🤞