Skip to content

inlineCritical CSS breaks CSS layer order #30031

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1 task
JanST123 opened this issue Apr 4, 2025 · 1 comment · Fixed by #30040
Closed
1 task

inlineCritical CSS breaks CSS layer order #30031

JanST123 opened this issue Apr 4, 2025 · 1 comment · Fixed by #30040
Assignees

Comments

@JanST123
Copy link

JanST123 commented Apr 4, 2025

Command

build

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

18.2.3

Description

Hi,
since I updated to angular 19.2.5 the inlineCritical CSS optimization seems to behave different, in terms that the layer order line is not longer present in the inlined CSS.

With 18.2.3 the inlined CSS looked like so:

<style>@layer layer1,layer2;@layer layer1{*{outline-style:none;margin:0;padding:0}.layertest{background:#00f}}html,body{height:100%}html{min-height:100%}*{box-sizing:border-box}@layer layer2{@-webkit-keyframes p-fadein{0%{opacity:0}to{opacity:1}}.layertest{background:red}}.layertest{height:200px;width:200px}</style>

After upgrading to 19.2.5 it looks like so:

<style>@layer layer1{*{outline-style:none;margin:0;padding:0}.layertest{background:#00f}}html,body{height:100%}html{min-height:100%}*{box-sizing:border-box}@layer layer2{@-webkit-keyframes p-fadein{0%{opacity:0}to{opacity:1}}.layertest{background:red}}.layertest{height:200px;width:200px}</style>

This breaks the layering in cases where CSS, already using the layers are inlined, but the layer ordering line not. The ordering of the layer always needs to be the first @layer rule, otherwise it's ignored.

Minimal Reproduction

(with @angular/cli@18.2.3 active)

  • run ng new layertest
  • Add a few lines of css to src/styles.scss:
@layer layer1,layer2;

@layer layer1 {
  * {
    outline-style: none;
    margin: 0;
    padding: 0;
  }

  .layertest {
    background: blue;
  }
}


html,
body {
  height: 100%;
}

html {
  min-height: 100%;
}


* {
  box-sizing: border-box;
}
@layer layer2 {
  @-webkit-keyframes p-fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .layertest {
    background: red;
  }
}

.layertest {
  height: 200px;
  width: 200px;
}
  • run ng serve --configuration=production
  • Load the page in the browser, view the HTML code served
  • Update Angular to 19.2.5 by ng update @angular/cli @angular/core
  • run ng serve --configuration=production
  • Load the page in the browser, view the HTML code served and recognize that the layer ordering (@layer layer1,layer2;) is missing

Exception or Error


Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.2.6
Node: 20.17.0
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 19.2.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.6
@angular-devkit/build-angular   19.2.6
@angular-devkit/core            19.2.6
@angular-devkit/schematics      19.2.6
@angular/cli                    19.2.6
@schematics/angular             19.2.6
rxjs                            7.8.2
typescript                      5.5.4
zone.js                         0.15.0

Anything else relevant?

No response

alan-agius4 added a commit to alan-agius4/beasties that referenced this issue Apr 7, 2025
Prior to this commit layers where not being handled correctly

Closes angular/angular-cli#30031
@alan-agius4 alan-agius4 self-assigned this Apr 7, 2025
@alan-agius4
Copy link
Collaborator

Upstream fix: danielroe/beasties#123

@alan-agius4 alan-agius4 linked a pull request Apr 8, 2025 that will close this issue
1 task
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 8, 2025
alan-agius4 added a commit that referenced this issue Apr 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants