Description
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