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 e6c61bd864c5..54bbdd52bade 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": false + "default": true } }, "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 a477297a1d21..99eaade9d0a8 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 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(``, + ); + 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(``, + ); + harness.expectFile('dist/index.html').content.toContain(`body{color:#000;}`); }); 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 d270503471d6..9bbf455b86f5 100644 --- a/packages/angular_devkit/build_angular/src/utils/normalize-optimization.ts +++ b/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,