Revert "feat(@angular-devkit/build-angular): disable critical CSS inlining by default"

This reverts commit bf0709b.

Author: alan-agius4

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": false
+                      "default": true
                     }
                   },
                   "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 not extract critical css when 'optimization' is unset`, async () => {
+    it(`should extract critical css when 'optimization' is unset`, async () => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,
         styles: ['src/styles.css'],
@@ -50,10 +50,15 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
 
       expect(result?.success).toBe(true);
-      harness.expectFile('dist/index.html').content.not.toContain(`<style`);
+      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;}`);
     });
 
-    it(`should not extract critical css when 'optimization' is true`, async () => {
+    it(`should extract critical css when 'optimization' is true`, async () => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,
         styles: ['src/styles.css'],
@@ -63,7 +68,12 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
 
       expect(result?.success).toBe(true);
-      harness.expectFile('dist/index.html').content.not.toContain(`<style`);
+      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;}`);
     });
 
     it(`should not extract critical css when 'optimization' is false`, async () => {

packages/angular_devkit/build_angular/src/utils/normalize-optimization.ts

@@ -31,8 +31,7 @@ export function normalizeOptimization(
           ? optimization.styles
           : {
               minify: !!optimization.styles,
-              // inlineCritical is always false unless explictly set.
-              inlineCritical: false,
+              inlineCritical: !!optimization.styles,
             },
       fonts:
         typeof optimization.fonts === 'object'
@@ -47,8 +46,7 @@ export function normalizeOptimization(
     scripts: optimization,
     styles: {
       minify: optimization,
-      // inlineCritical is always false unless explictly set.
-      inlineCritical: false,
+      inlineCritical: optimization,
     },
     fonts: {
       inline: optimization,