CSS build pipeline broken with modern CSS and layered styles.

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

macOS

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

SPFx version: 1.16.1

Describe the bug / error

CSS file gets truncated with the following code it:

.mylayer {
  max-width: 80ch;
  margin: 2rem auto;
  font-size: 1.25rem;
  box-sizing: border-box;
  padding: 1rem;
}

@layer red,green;

@layer red {
  .mylayer {
    border: 1px red solid;
    color: red;
    padding: 2rem;
  }
}

@layer green {
  .mylayer {
    border: 1px green solid;
    color: green;
    padding: 3rem;
  }
}

The CSS code is not the problem but instead of having the same style in the outputted CSS the following is the result.

.mylayer{max-width:80ch;margin:2rem auto;font-size:1.25rem;box-sizing:border-box;padding:1rem}@layer red,green;
@layer red{color:red;padding:2rem}

So there must be some false treatment in the build chain because the green layer will not come through. CSS doesn't get applied to the web part too, so there must be an issue with loading the styles to the page.

Here is a working CSS Sample:
https://codepen.io/StfBauer/pen/wvxjJap

Steps to reproduce

1. Create a web part with the version 1.16.1
2. add the style sheet code in the SCSS File.
3. add the following code to the web part.

  public render(): void {    
    this.domElement.innerHTML = `<div class="${styles.mylayer}">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit assumenda deserunt culpa dolore provident cupiditate suscipit. Laboriosam non laborum dolorem necessitatibus quo! Perferendis nemo natus mollitia deserunt ex deleniti tempora.</div>`;
  }

Run the web part and check the lib folder to see if the same CSS was generated as the origin.

Expected behavior

Input CSS = Output CSS and leave my CSS alone.