CSS @import layers are ignored in some situations

[matt-tingen]

🐛 bug report

CSS @import layers are ignored in some situations. For example:

@import 'red.css' layer;

body {
  background: green;
}

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "parcel-css-layer-import-repro",
  "version": "1.0.0",
  "scripts": {
    "start": "parcel src/index.html"
  },
  "browserslist": "last 1 Chrome version",
  "dependencies": {
    "parcel": "2.6.0"
  }
}

🤔 Expected Behavior

The body should display green with css like this:

@layer {
  body.body {
    background: red;
  }
}

body {
  background: green;
}

😯 Current Behavior

The body displays as red because the css is compiled without layers:

body.body {
  background: red;
}

body {
  background: green;
}

💁 Possible Solution

🔦 Context

In my actual project, the non-layer override is defined dynamically via css-in-js. An example of this can be found in the react branch of the repro repo. I mention this because I'm not sure if parcel(-css) is trying to use static analysis to avoid @layer for compat, but doing so seems invalid when all of the declared browsers support @layer.

💻 Code Sample

Repro repo

🌍 Your Environment

Software	Version(s)
Parcel	2.6.0
Node	16.13.0
npm/Yarn	yarn 1.22.17
Operating System	macOS 12.4

[devongovett]

Bundling @layer is complicated, due to nested layers. Parcel CSS supports it, but we'll need to migrate the current Parcel packager plugin to it.