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,
      }
    },
    ...
  }
```

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

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 () => {

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,