@import in css doesn't apply cascade layer to media queries

[Th3S4mur41]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

I don't think so

Description

A clear and concise description of the problem...

@import url('external.css') layer(external); should behave exactly the same as

@layer internal {
 some CSS
}

As seeen in this codepen

When Angular processes the import to include it in the main css file though, it doesn't put the @media queries from the external.css in the @layer external block.

🔬 Minimal Reproduction

Consider *main.css being the angular app's main css file and external.css a CSS file imported from an external package.

/* external.css */
@media (prefers-color-scheme: dark) {
  .import {
    background: darkgray;
  }
}
[data-theme="import-dark"] {
  background: black;
  color: white;
}

/* main.css */
@import url('external.css') layer(external);

Compiling the angular app should result in the following CSS:

/* expected-output.css */
@layer external {
  @media (prefers-color-scheme: dark) {
    .import {
      background: darkgray;
    }
  }
  [data-theme="import-dark"] {
    background: black;
    color: white;
  }
}

The actual output however is the following:

/* wrong-output.css */
@media (prefers-color-scheme: dark) {
  .import {
    background: darkgray;
  }
}
@layer external {
  [data-theme="import-dark"] {
    background: black;
    color: white;
  }
}

[alan-agius4]

Hi @Th3S4mur41,

Thanks for reporting this. However, this is not actionable from our end since this is a bug in postcss-import.

See: postcss/postcss-import#495

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}