Partial FOUC due to missing critical css

🐞 Bug report

What modules are related to this issue?

• aspnetcore-engine
• builders
• common
• express-engine
• hapi-engine

Is this a regression?

Yes (I believe), the previous version in which this bug was not present was: 9.X

Description

A clear and concise description of the problem...

After upgrading from Angular 9.X to 12.1.0, I’m noticing a significant Flash of Unstyled Content (FOUC). The inline critical css is missing a lot of styling.

Short video of what’s happening: https://user-images.githubusercontent.com/22917990/136787279-6115a3ec-b881-4bec-b19b-ccb56bfd896f.mp4

🔬 Minimal Reproduction

Easiest way to reproduce is by going to our live site and press F5 with Cache disabled (via Developer tools).

Live site: https://www.sportspace.nl/

Test server running on angular 9.1.1: https://sportspace-tst.azurewebsites.net/

🔥 Exception or Error

None.

🌍 Your Environment

"dependencies": {
  "@angular/animations": "^12.2.7",
  "@angular/cdk": "^12.2.7",
  "@angular/common": "~12.2.7",
  "@angular/compiler": "~12.2.7",
  "@angular/core": "~12.2.7",
  "@angular/forms": "~12.2.7",
  "@angular/google-maps": "^12.2.7",
  "@angular/platform-browser": "~12.2.7",
  "@angular/platform-browser-dynamic": "~12.2.7",
  "@angular/platform-server": "~12.2.7",
  "@angular/router": "~12.2.7",
  "@ng-bootstrap/ng-bootstrap": "^10.0.0",
  "@nguniversal/express-engine": "^12.1.0",
  "bootstrap": "^4.5.0",
  "express": "^4.15.2",
  "rxjs": "~6.5.4",
  "tslib": "^2.0.0",
  "zone.js": "~0.11.4"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~12.2.7",
  "@angular/cli": "~12.2.7",
  "@angular/compiler-cli": "~12.2.7",
  "@angular/language-service": "~12.2.7",
  "@nguniversal/builders": "^12.1.0",
  "@types/express": "^4.17.13",
  "@types/node": "^12.20.27",
  "ts-node": "~8.3.0",
  "tslint": "^6.1.3",
  "typescript": "~4.3.5"
}

[alan-agius4]

It appears that certain selectors such as .card-body are not being converted to CSS AST. The good news is that Critters are moving towards postcss which appears to solve this issue.

As a temporary workaround you can disable critical css inlining as shown below.

server.ts

 server.engine('html', ngExpressEngine({
   bootstrap: AppServerModule,
+  inlineCriticalCss: false
 }));

angular.json in the build @angular-devkit/build-angular:browser target.

- "optimization": true,
+ "optimization": {
+   "styles": {
+     "inlineCritical": false
+   }
+ },

[bsumter]

I’ll try to strip it down to the core and share something with you tomorrow.