build: update beasties to 0.5.1

Updates Beasties to version 0.5.1 and simplifies the inline critical CSS
implementation in @angular/build and @angular/ssr by using Beasties'
native preload: 'media-script' and nonce callback support.

Additionally, refactors `inlineCriticalCss` in @angular/build into a
standalone function and relocates `InlineCriticalCssProcessor` into
@angular-devkit/build-angular for Webpack-based builders.

Author: alan-agius4

packages/angular/build/BUILD.bazel

@@ -159,6 +159,7 @@ ts_project(
 jasmine_test(
     name = "test",
     data = [":unit_test_lib"],
+    shard_count = 4,
 )
 
 ts_project(

packages/angular/build/package.json

@@ -24,7 +24,7 @@
     "@inquirer/confirm": "6.2.0",
     "@parcel/watcher": "2.6.0",
     "@vitejs/plugin-basic-ssl": "2.3.0",
-    "beasties": "0.4.3",
+    "beasties": "0.5.1",
     "browserslist": "^4.26.0",
     "chokidar": "5.0.0",
     "esbuild": "0.28.2",

packages/angular/build/src/builders/application/tests/options/app-shell_spec.ts

@@ -141,7 +141,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       indexFileContent.toContain('app-shell works!');
       indexFileContent.toContain('p{color:#000}');
       indexFileContent.toContain(
-        `<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">`,
+        `<link rel="stylesheet" href="styles.css" media="print" data-beasties-media="all">`,
       );
     });
 
@@ -170,7 +170,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       indexFileContent.toContain('app-shell works!');
       indexFileContent.toContain('p{color:#000}');
       indexFileContent.toContain(
-        `<link rel="stylesheet" href="styles.css" media="print" ngCspMedia="all">`,
+        `<link rel="stylesheet" href="styles.css" media="print" data-beasties-media="all">`,
       );
       indexFileContent.toContain('<style nonce="{% nonce %}">p{color:#000}');
       indexFileContent.toContain('<style nonce="{% nonce %}" ng-app-id="ng">');

packages/angular/build/src/builders/application/tests/options/optimization-inline-critical_spec.ts

@@ -35,7 +35,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness
         .expectFile('dist/browser/index.html')
         .content.toContain(
-          `<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">`,
+          `<link rel="stylesheet" href="styles.css" media="print" data-beasties-media="all">`,
         );
       harness.expectFile('dist/browser/index.html').content.toContain(`body{color:#000}`);
     });
@@ -53,7 +53,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness
         .expectFile('dist/browser/index.html')
         .content.toContain(
-          `<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">`,
+          `<link rel="stylesheet" href="styles.css" media="print" data-beasties-media="all">`,
         );
       harness.expectFile('dist/browser/index.html').content.toContain(`body{color:#000}`);
     });
@@ -71,7 +71,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness
         .expectFile('dist/browser/index.html')
         .content.toContain(
-          `<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">`,
+          `<link rel="stylesheet" href="styles.css" media="print" data-beasties-media="all">`,
         );
       harness.expectFile('dist/browser/index.html').content.toContain(`body{color:#000}`);
     });
@@ -130,7 +130,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness
         .expectFile('dist/browser/index.html')
         .content.toContain(
-          `<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">`,
+          `<link rel="stylesheet" href="styles.css" media="print" data-beasties-media="all">`,
         );
       harness.expectFile('dist/browser/index.html').content.toContain(`body{color:#000}`);
     });

packages/angular/build/src/private.ts

@@ -81,11 +81,6 @@ export {
   type IndexHtmlTransform,
 } from './utils/index-file/index-html-generator';
 export type { FileInfo } from './utils/index-file/augment-index-html';
-export {
-  type InlineCriticalCssProcessOptions,
-  InlineCriticalCssProcessor,
-  type InlineCriticalCssProcessorOptions,
-} from './utils/index-file/inline-critical-css';
 export { loadProxyConfiguration } from './utils/load-proxy-config';
 export { type TranslationLoader, createTranslationLoader } from './utils/load-translations';
 export { purgeStaleBuildCache } from './utils/purge-cache';

packages/angular/build/src/tools/esbuild/index-html-generator.ts

@@ -106,6 +106,7 @@ export async function generateIndexHtml(
     crossOrigin: crossOrigin,
     deployUrl: buildOptions.publicPath,
     postTransform: indexHtmlOptions.transformer,
+    outputPath: virtualOutputPath,
     generateDedicatedSSRContent: !!(
       buildOptions.ssrOptions ||
       buildOptions.prerenderOptions ||
@@ -120,7 +121,6 @@ export async function generateIndexHtml(
   return indexHtmlGenerator.process({
     baseHref,
     lang,
-    outputPath: virtualOutputPath,
     files: [...initialFiles]
       .filter(([, file]) => !file.serverFile)
       .map(([file, record]) => ({

packages/angular/build/src/utils/index-file/index-html-generator.ts

@@ -13,7 +13,7 @@ import { NormalizedOptimizationOptions } from '../normalize-optimization';
 import { addEventDispatchContract } from './add-event-dispatch-contract';
 import { CrossOriginValue, Entrypoint, FileInfo, augmentIndexHtml } from './augment-index-html';
 import { autoCsp } from './auto-csp';
-import { InlineCriticalCssProcessor } from './inline-critical-css';
+import { inlineCriticalCss } from './inline-critical-css';
 import { InlineFontsProcessor } from './inline-fonts';
 import { addNgcmAttribute } from './ngcm-attribute';
 import { addNonce } from './nonce';
@@ -28,7 +28,6 @@ export type HintMode = 'prefetch' | 'preload' | 'modulepreload' | 'preconnect' |
 export interface IndexHtmlGeneratorProcessOptions {
   lang: string | undefined;
   baseHref: string | undefined;
-  outputPath: string;
   files: FileInfo[];
   hints?: { url: string; mode: HintMode; as?: string }[];
 }
@@ -49,6 +48,7 @@ export interface IndexHtmlGeneratorOptions {
   imageDomains?: string[];
   generateDedicatedSSRContent?: boolean;
   autoCsp?: AutoCspOptions;
+  outputPath: string;
 
   /**
    * Integrity metadata for module URLs not directly referenced in the index
@@ -89,7 +89,7 @@ export class IndexHtmlGenerator {
 
     // CSR plugins
     if (options?.optimization?.styles?.inlineCritical) {
-      this.csrPlugins.push(inlineCriticalCssPlugin(this, !!options.autoCsp));
+      this.csrPlugins.push(inlineCriticalCssPlugin(this));
     }
 
     this.csrPlugins.push(addNoncePlugin());
@@ -182,10 +182,11 @@ function augmentIndexHtmlPlugin(generator: IndexHtmlGenerator): IndexHtmlGenerat
     entrypoints,
     imageDomains,
     chunksIntegrity,
+    outputPath,
   } = generator.options;
 
-  return async (html, options) => {
-    const { lang, baseHref, outputPath = '', files, hints } = options;
+  return (html, options) => {
+    const { lang, baseHref, files, hints } = options;
 
     return augmentIndexHtml({
       html,
@@ -209,22 +210,15 @@ function inlineFontsPlugin({ options }: IndexHtmlGenerator): IndexHtmlGeneratorP
     minify: options.optimization?.styles.minify,
   });
 
-  return async (html) => inlineFontsProcessor.process(html);
+  return (html) => inlineFontsProcessor.process(html);
 }
 
-function inlineCriticalCssPlugin(
-  generator: IndexHtmlGenerator,
-  autoCsp: boolean,
-): IndexHtmlGeneratorPlugin {
-  const inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
-    minify: generator.options.optimization?.styles.minify,
-    deployUrl: generator.options.deployUrl,
-    readAsset: (filePath) => generator.readAsset(filePath),
-    autoCsp,
-  });
+function inlineCriticalCssPlugin(generator: IndexHtmlGenerator): IndexHtmlGeneratorPlugin {
+  const { outputPath, deployUrl, optimization } = generator.options;
+  const { minify = false } = optimization?.styles ?? {};
 
-  return async (html, options) =>
-    inlineCriticalCssProcessor.process(html, { outputPath: options.outputPath });
+  return (html) =>
+    inlineCriticalCss(html, outputPath, deployUrl, minify, (path) => generator.readAsset(path));
 }
 
 function addNoncePlugin(): IndexHtmlGeneratorPlugin {