From 521a069b75422213621f13b25d32419a9a274fa3 Mon Sep 17 00:00:00 2001
From: Alan Agius <alan.agius4@gmail.com>
Date: Wed, 6 Oct 2021 14:09:23 +0200
Subject: [PATCH] feat(@angular-devkit/build-angular): disable critical CSS
 inlining by default

With this change we disable critical css inline by default. The main motivations are the following issues #20760 and #20864.

BREAKING CHANGE:

Inlining of critical CSS is no longer enable by default. Users already on Angular CLI version 12 and have not opted-out from using this feature are encouraged to opt-in using the browser builder `inlineCritical` option.

The motivation behind this change is that the package used to parse the CSS has a number of defects which can lead to unactionable error messages when updating to Angular 13 from versions priors to 12. Such errors can be seen in the following issue #20760.

```json
"configurations": {
  "production": {
    "optimization": {
      "styles": {
        "inlineCritical": true,
      }
    },
    ...
  }
```
---
 .../src/builders/browser/schema.json           |  2 +-
 .../tests/options/inline-critical_spec.ts      | 18 ++++--------------
 .../src/utils/normalize-optimization.ts        |  6 ++++--
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/builders/browser/schema.json b/packages/angular_devkit/build_angular/src/builders/browser/schema.json
index 54bbdd52bade..e6c61bd864c5 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser/schema.json
+++ b/packages/angular_devkit/build_angular/src/builders/browser/schema.json
@@ -89,7 +89,7 @@
                     "inlineCritical": {
                       "type": "boolean",
                       "description": "Extract and inline critical CSS definitions to improve first paint time.",
-                      "default": true
+                      "default": false
                     }
                   },
                   "additionalProperties": false
diff --git a/packages/angular_devkit/build_angular/src/builders/browser/tests/options/inline-critical_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/tests/options/inline-critical_spec.ts
index 99eaade9d0a8..a477297a1d21 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser/tests/options/inline-critical_spec.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser/tests/options/inline-critical_spec.ts
@@ -40,7 +40,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       harness.expectFile('dist/index.html').content.toContain(`body{color:#000;}`);
     });
 
-    it(`should extract critical css when 'optimization' is unset`, async () => {
+    it(`should not extract critical css when 'optimization' is unset`, async () => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,
         styles: ['src/styles.css'],
@@ -50,15 +50,10 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
 
       expect(result?.success).toBe(true);
-      harness
-        .expectFile('dist/index.html')
-        .content.toContain(
-          `<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">`,
-        );
-      harness.expectFile('dist/index.html').content.toContain(`body{color:#000;}`);
+      harness.expectFile('dist/index.html').content.not.toContain(`<style`);
     });
 
-    it(`should extract critical css when 'optimization' is true`, async () => {
+    it(`should not extract critical css when 'optimization' is true`, async () => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,
         styles: ['src/styles.css'],
@@ -68,12 +63,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
 
       expect(result?.success).toBe(true);
-      harness
-        .expectFile('dist/index.html')
-        .content.toContain(
-          `<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">`,
-        );
-      harness.expectFile('dist/index.html').content.toContain(`body{color:#000;}`);
+      harness.expectFile('dist/index.html').content.not.toContain(`<style`);
     });
 
     it(`should not extract critical css when 'optimization' is false`, async () => {
diff --git a/packages/angular_devkit/build_angular/src/utils/normalize-optimization.ts b/packages/angular_devkit/build_angular/src/utils/normalize-optimization.ts
index 9bbf455b86f5..d270503471d6 100644
--- a/packages/angular_devkit/build_angular/src/utils/normalize-optimization.ts
+++ b/packages/angular_devkit/build_angular/src/utils/normalize-optimization.ts
@@ -31,7 +31,8 @@ export function normalizeOptimization(
           ? optimization.styles
           : {
               minify: !!optimization.styles,
-              inlineCritical: !!optimization.styles,
+              // inlineCritical is always false unless explictly set.
+              inlineCritical: false,
             },
       fonts:
         typeof optimization.fonts === 'object'
@@ -46,7 +47,8 @@ export function normalizeOptimization(
     scripts: optimization,
     styles: {
       minify: optimization,
-      inlineCritical: optimization,
+      // inlineCritical is always false unless explictly set.
+      inlineCritical: false,
     },
     fonts: {
       inline: optimization,