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,