perf(@angular/ssr): pre-compile critical CSS plans at build time

Previously, critical CSS inlining in `@angular/ssr` was executed dynamically at runtime
by parsing HTML and stylesheets on each request (or caching processed HTML in an in-memory
LRU cache keyed by SHA-256 content hashes). This incurred significant CPU and latency
overhead during request processing and precluded efficient stream processing.

This commit updates the critical CSS workflow to pre-compile stylesheet plans during the
build step via Beasties' compiler (`compileSheet` and `encodePlan`). These compact plans
are stored in the server application manifest (`criticalCssPlans`) along with any CSP
nonce.

At runtime, `AngularServerApp` initializes Beasties' runtime processor with the
pre-compiled plans, allowing fast single-pass string and stream processing without
re-parsing stylesheets, calculating content hashes, or maintaining a runtime LRU cache.
Consequently, `InlineCriticalCssProcessor`, `LRUCache`, and `crypto.ts` utility classes
have been removed from `@angular/ssr`.

Author: alan-agius4

package.json

@@ -66,7 +66,6 @@
     "@eslint/compat": "2.1.0",
     "@eslint/eslintrc": "3.3.6",
     "@eslint/js": "10.0.1",
-    "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "16.0.3",
@@ -122,14 +121,12 @@
     "puppeteer": "25.9.0",
     "quicktype-core": "26.0.0",
     "rollup": "4.63.0",
-    "rollup-license-plugin": "~3.2.0",
     "rollup-plugin-dts": "6.5.1",
     "rollup-plugin-sourcemaps2": "0.5.8",
     "semver": "7.8.5",
     "source-map-support": "0.5.21",
     "tslib": "2.8.1",
     "undici": "8.10.0",
-    "unenv": "^1.10.0",
     "verdaccio": "6.10.0",
     "verdaccio-auth-memory": "^13.0.0",
     "zone.js": "^0.16.0"

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.5.0",
+    "beasties": "0.5.1",
     "browserslist": "^4.26.0",
     "chokidar": "5.0.0",
     "esbuild": "0.28.2",

packages/angular/build/src/builders/application/execute-post-bundle.ts

@@ -123,7 +123,7 @@ export async function executePostBundleSteps(
   // Create server manifest
   const initialFilesPaths = new Set(initialFiles.keys());
   if (serverEntryPoint && (outputMode || prerenderOptions || appShellOptions || ssrOptions)) {
-    const { manifestContent, serverAssetsChunks } = generateAngularServerAppManifest(
+    const { manifestContent, serverAssetsChunks } = await generateAngularServerAppManifest(
       additionalHtmlOutputFiles,
       outputFiles,
       optimizationOptions.styles.inlineCritical ?? false,
@@ -209,7 +209,7 @@ export async function executePostBundleSteps(
       const manifest = additionalOutputFiles.find((f) => f.path === SERVER_APP_MANIFEST_FILENAME);
       assert(manifest, `${SERVER_APP_MANIFEST_FILENAME} was not found in output files.`);
 
-      const { manifestContent, serverAssetsChunks } = generateAngularServerAppManifest(
+      const { manifestContent, serverAssetsChunks } = await generateAngularServerAppManifest(
         additionalHtmlOutputFiles,
         outputFiles,
         optimizationOptions.styles.inlineCritical ?? false,

packages/angular/build/src/private.ts

@@ -80,10 +80,6 @@ export {
   type IndexHtmlTransform,
 } from './utils/index-file/index-html-generator';
 export type { FileInfo } from './utils/index-file/augment-index-html';
-export {
-  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/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';
@@ -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());
@@ -213,19 +213,11 @@ function inlineFontsPlugin({ options }: IndexHtmlGenerator): IndexHtmlGeneratorP
   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,
-    outputPath: generator.options.outputPath,
-  });
+function inlineCriticalCssPlugin(generator: IndexHtmlGenerator): IndexHtmlGeneratorPlugin {
+  const { outputPath, deployUrl, optimization } = generator.options;
+  const { minify = false } = optimization?.styles ?? {};
 
-  return (html) => inlineCriticalCssProcessor.process(html);
+  return (html) => inlineCriticalCss(html, outputPath, deployUrl, minify, generator.readAsset);
 }
 
 function addNoncePlugin(): IndexHtmlGeneratorPlugin {

packages/angular/build/src/utils/index-file/inline-critical-css.ts

@@ -6,91 +6,68 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { readFile } from 'node:fs/promises';
-
-export interface InlineCriticalCssProcessorOptions {
-  minify?: boolean;
-  deployUrl?: string;
-  readAsset?: (path: string) => Promise<string>;
-  autoCsp?: boolean;
-  outputPath?: string;
-}
-
-export class InlineCriticalCssProcessor {
-  constructor(protected readonly options: InlineCriticalCssProcessorOptions) {}
-
-  async process(html: string): Promise<{ content: string; warnings: string[]; errors: string[] }> {
-    const warnings: string[] = [];
-    const errors: string[] = [];
-    const { outputPath, deployUrl, minify = false, readAsset } = this.options;
-
-    const { default: Beasties } = await import('beasties');
-
-    const beasties = new Beasties({
-      logger: {
-        warn: (s: string) => warnings.push(s),
-        error: (s: string) => errors.push(s),
-        info: () => {},
-      },
-      logLevel: 'warn',
-      path: outputPath,
-      publicPath: deployUrl,
-      compress: minify,
-      pruneSource: false,
-      reduceInlineStyles: false,
-      mergeStylesheets: false,
-      preload: 'media-script',
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      nonce: ((document: any) => {
-        const nonceElement = document.querySelector('[ngCspNonce], [ngcspnonce]');
-        const cspNonce =
-          nonceElement?.getAttribute('ngCspNonce') || nonceElement?.getAttribute('ngcspnonce');
+/**
+ * Generates a stylesheet containing the critical CSS for the given HTML content.
+ *
+ * @param html - The HTML content to process.
+ * @param outputPath - The output path for the generated stylesheet.
+ * @param deployUrl - The deploy URL for the generated stylesheet.
+ * @param minify - Whether to minify the generated stylesheet.
+ * @param readAsset - A function that reads an asset from the given file path.
+ * @returns A promise that resolves to an object containing the generated stylesheet content,
+ * warnings, and errors.
+ */
+export async function inlineCriticalCss(
+  html: string,
+  outputPath: string,
+  deployUrl: string | undefined,
+  minify: boolean,
+  readAsset: (file: string) => Promise<string>,
+): Promise<{
+  content: string;
+  warnings: string[];
+  errors: string[];
+}> {
+  const { default: Beasties } = await import('beasties');
 
-        return cspNonce;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      }) as any,
-      noscriptFallback: true,
-      inlineFonts: true,
-    });
+  const warnings: string[] = [];
+  const errors: string[] = [];
 
-    beasties.readFile = (path) => {
-      return readAsset ? readAsset(path) : readFile(path, 'utf-8');
-    };
+  const beasties = new Beasties({
+    logger: {
+      warn: (s: string) => warnings.push(s),
+      error: (s: string) => errors.push(s),
+      info: () => {},
+    },
+    logLevel: 'warn',
+    path: outputPath,
+    publicPath: deployUrl,
+    compress: minify,
+    pruneSource: false,
+    reduceInlineStyles: false,
+    mergeStylesheets: false,
+    preload: 'media-script',
+    nonce: (document) => {
+      const nonceElement = document.querySelector('[ngCspNonce], [ngcspnonce]');
+      const cspNonce =
+        nonceElement?.getAttribute('ngCspNonce') || nonceElement?.getAttribute('ngcspnonce');
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const beastiesInternal = beasties as any;
-    const initialEmbedLinkedStylesheet =
-      beastiesInternal.embedLinkedStylesheet.bind(beastiesInternal);
-    beastiesInternal.embedLinkedStylesheet = async (link: unknown, document: unknown) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const linkEl = link as any;
-      const beastiesMedia = linkEl.getAttribute('data-beasties-media');
-      if (beastiesMedia) {
-        linkEl.removeAttribute('data-beasties-media');
-        linkEl.setAttribute('media', beastiesMedia);
-        if (linkEl.next?.name === 'noscript') {
-          linkEl.next.remove();
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (document as any).querySelectorAll('script').forEach((script: any) => {
-          if (script.textContent?.includes('data-beasties-media')) {
-            script.remove();
-          }
-        });
-      }
+      return cspNonce;
+    },
+    noscriptFallback: true,
+    inlineFonts: true,
+  });
 
-      return initialEmbedLinkedStylesheet(link, document);
-    };
+  beasties.readFile = readAsset;
 
-    const content = await beasties.process(html);
+  const content = await beasties.process(html);
 
-    return {
-      // Clean up value from value less attributes.
-      // This is caused because parse5 always requires attributes to have a string value.
-      // nomodule="" defer="" -> nomodule defer.
-      content: content.replace(/(\s(?:defer|nomodule))=""/g, '$1'),
-      errors,
-      warnings,
-    };
-  }
+  return {
+    // Clean up value from value less attributes.
+    // This is caused because parse5 always requires attributes to have a string value.
+    // nomodule="" defer="" -> nomodule defer.
+    content: content.replace(/(\s(?:defer|nomodule))=""/g, '$1'),
+    errors,
+    warnings,
+  };
 }