Skip to content

inlineCritical CSS breaks CSS layer order #30031

Closed
@JanST123

Description

@JanST123

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

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions