feat(@angular-devkit/build-angular): support component style budgets in esbuild builders

packages/angular_devkit/build_angular/src/builders/application/execute-build.ts

@@ -257,7 +257,7 @@ export async function executeBuild(
   let budgetFailures;
   if (options.budgets) {
     const compatStats = generateBudgetStats(metafile, initialFiles);
-    budgetFailures = [...checkBudgets(options.budgets, compatStats)];
+    budgetFailures = [...checkBudgets(options.budgets, compatStats, true)];
     for (const { severity, message } of budgetFailures) {
       if (severity === 'error') {
         context.logger.error(message);

packages/angular_devkit/build_angular/src/builders/application/options.ts

@@ -14,7 +14,6 @@ import {
   normalizeGlobalStyles,
 } from '../../tools/webpack/utils/helpers';
 import { normalizeAssetPatterns, normalizeOptimization, normalizeSourceMaps } from '../../utils';
-import { calculateThresholds } from '../../utils/bundle-calculator';
 import { I18nOptions, createI18nOptions } from '../../utils/i18n-options';
 import { normalizeCacheOptions } from '../../utils/normalize-cache';
 import { generateEntryPoints } from '../../utils/package-chunk-sort';

packages/angular_devkit/build_angular/src/builders/application/tests/options/bundle-budgets_spec.ts

@@ -88,7 +88,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
     });
 
     CSS_EXTENSIONS.forEach((ext) => {
-      xit(`shows warnings for large component ${ext} when using 'anyComponentStyle' when AOT`, async () => {
+      it(`shows warnings for large component ${ext} when using 'anyComponentStyle' when AOT`, async () => {
         const cssContent = `
           .foo { color: white; padding: 1px; }
           .buz { color: white; padding: 2px; }
@@ -118,7 +118,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
         expect(logs).toContain(
           jasmine.objectContaining<logging.LogEntry>({
             level: 'warn',
-            message: jasmine.stringMatching(new RegExp(`Warning.+app.component.${ext}`)),
+            message: jasmine.stringMatching(new RegExp(`app.component.${ext}`)),
           }),
         );
       });

packages/angular_devkit/build_angular/src/tools/esbuild/budget-stats.ts

@@ -47,7 +47,17 @@ export function generateBudgetStats(
       initial: !!initialRecord,
       names: name ? [name] : undefined,
     });
-    stats.assets.push({ name: file, size: entry.bytes });
+
+    // 'ng-component' is set by the angular plugin's component stylesheet bundler
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const componentStyle: boolean = (entry as any)['ng-component'];
+
+    stats.assets.push({
+      // Component styles use the input file while all other outputs use the result file
+      name: (componentStyle && Object.keys(entry.inputs)[0]) || file,
+      size: entry.bytes,
+      componentStyle,
+    });
   }
 
   return stats;

packages/angular_devkit/build_angular/src/utils/bundle-calculator.ts

@@ -45,6 +45,7 @@ export interface BudgetChunk {
 export interface BudgetAsset {
   name: string;
   size: number;
+  componentStyle?: boolean;
 }
 
 export interface BudgetStats {
@@ -118,23 +119,15 @@ export function* calculateThresholds(budget: Budget): IterableIterator<Threshold
  * Calculates the sizes for bundles in the budget type provided.
  */
 function calculateSizes(budget: Budget, stats: BudgetStats): Size[] {
-  if (budget.type === Type.AnyComponentStyle) {
-    // Component style size information is not available post-build, this must
-    // be checked mid-build via the `AnyComponentStyleBudgetChecker` plugin.
-    throw new Error(
-      'Can not calculate size of AnyComponentStyle. Use `AnyComponentStyleBudgetChecker` instead.',
-    );
-  }
-
-  type NonComponentStyleBudgetTypes = Exclude<Budget['type'], Type.AnyComponentStyle>;
   type CalculatorTypes = {
     new (budget: Budget, chunks: BudgetChunk[], assets: BudgetAsset[]): Calculator;
   };
-  const calculatorMap: Record<NonComponentStyleBudgetTypes, CalculatorTypes> = {
+  const calculatorMap: Record<Budget['type'], CalculatorTypes> = {
     all: AllCalculator,
     allScript: AllScriptCalculator,
     any: AnyCalculator,
     anyScript: AnyScriptCalculator,
+    anyComponentStyle: AnyComponentStyleCalculator,
     bundle: BundleCalculator,
     initial: InitialCalculator,
   };
@@ -279,6 +272,20 @@ class AnyCalculator extends Calculator {
   }
 }
 
+/**
+ * Any compoonent stylesheet
+ */
+class AnyComponentStyleCalculator extends Calculator {
+  calculate() {
+    return this.assets
+      .filter((asset) => asset.componentStyle)
+      .map((asset) => ({
+        size: this.getAssetSize(asset),
+        label: asset.name,
+      }));
+  }
+}
+
 /**
  * Calculate the bytes given a string value.
  */
@@ -316,9 +323,12 @@ function calculateBytes(input: string, baseline?: string, factor: 1 | -1 = 1): n
 export function* checkBudgets(
   budgets: Budget[],
   stats: BudgetStats,
+  checkComponentStyles?: boolean,
 ): IterableIterator<BudgetCalculatorResult> {
-  // Ignore AnyComponentStyle budgets as these are handled in `AnyComponentStyleBudgetChecker`.
-  const computableBudgets = budgets.filter((budget) => budget.type !== Type.AnyComponentStyle);
+  // Ignore AnyComponentStyle budgets as these are handled in `AnyComponentStyleBudgetChecker` unless requested
+  const computableBudgets = checkComponentStyles
+    ? budgets
+    : budgets.filter((budget) => budget.type !== Type.AnyComponentStyle);
 
   for (const budget of computableBudgets) {
     const sizes = calculateSizes(budget, stats);