refactor(@angular/build): create component stylesheet bundler at start of build

The component stylesheet bundler is now created at the start of the build
and accessible prior to the bundling actions. This will provide support for
generating updated component styles and bypassing all code bundling when using
the development server and only component styles have been modified.

Author: clydin

goldens/circular-deps/packages.json

@@ -3,6 +3,13 @@
     "packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts",
     "packages/angular_devkit/build_angular/src/builders/dev-server/options.ts"
   ],
+  [
+    "packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts",
+    "packages/angular/build/src/tools/esbuild/bundler-context.ts",
+    "packages/angular/build/src/tools/esbuild/utils.ts",
+    "packages/angular/build/src/utils/server-rendering/manifest.ts",
+    "packages/angular/build/src/tools/esbuild/bundler-execution-result.ts"
+  ],
   [
     "packages/angular/build/src/tools/esbuild/bundler-context.ts",
     "packages/angular/build/src/tools/esbuild/utils.ts"

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

@@ -15,7 +15,11 @@ import { ExecutionResult, RebuildState } from '../../tools/esbuild/bundler-execu
 import { checkCommonJSModules } from '../../tools/esbuild/commonjs-checker';
 import { extractLicenses } from '../../tools/esbuild/license-extractor';
 import { profileAsync } from '../../tools/esbuild/profiling';
-import { calculateEstimatedTransferSizes, logBuildStats } from '../../tools/esbuild/utils';
+import {
+  calculateEstimatedTransferSizes,
+  logBuildStats,
+  transformSupportedBrowsersToTargets,
+} from '../../tools/esbuild/utils';
 import { BudgetCalculatorResult, checkBudgets } from '../../utils/bundle-calculator';
 import { shouldOptimizeChunks } from '../../utils/environment-options';
 import { resolveAssets } from '../../utils/resolve-assets';
@@ -29,7 +33,7 @@ import { executePostBundleSteps } from './execute-post-bundle';
 import { inlineI18n, loadActiveTranslations } from './i18n';
 import { NormalizedApplicationBuildOptions } from './options';
 import { OutputMode } from './schema';
-import { setupBundlerContexts } from './setup-bundling';
+import { createComponentStyleBundler, setupBundlerContexts } from './setup-bundling';
 
 // eslint-disable-next-line max-lines-per-function
 export async function executeBuild(
@@ -63,12 +67,18 @@ export async function executeBuild(
   }
 
   // Reuse rebuild state or create new bundle contexts for code and global stylesheets
-  let bundlerContexts = rebuildState?.rebuildContexts;
-  const codeBundleCache =
-    rebuildState?.codeBundleCache ??
-    new SourceFileCache(cacheOptions.enabled ? cacheOptions.path : undefined);
-  if (bundlerContexts === undefined) {
-    bundlerContexts = setupBundlerContexts(options, browsers, codeBundleCache);
+  let bundlerContexts;
+  let componentStyleBundler;
+  let codeBundleCache;
+  if (rebuildState) {
+    bundlerContexts = rebuildState.rebuildContexts;
+    componentStyleBundler = rebuildState.componentStyleBundler;
+    codeBundleCache = rebuildState.codeBundleCache;
+  } else {
+    const target = transformSupportedBrowsersToTargets(browsers);
+    codeBundleCache = new SourceFileCache(cacheOptions.enabled ? cacheOptions.path : undefined);
+    componentStyleBundler = createComponentStyleBundler(options, target);
+    bundlerContexts = setupBundlerContexts(options, target, codeBundleCache, componentStyleBundler);
   }
 
   let bundlingResult = await BundlerContext.bundleAll(
@@ -85,7 +95,11 @@ export async function executeBuild(
     );
   }
 
-  const executionResult = new ExecutionResult(bundlerContexts, codeBundleCache);
+  const executionResult = new ExecutionResult(
+    bundlerContexts,
+    componentStyleBundler,
+    codeBundleCache,
+  );
   executionResult.addWarnings(bundlingResult.warnings);
 
   // Return if the bundling has errors

packages/angular/build/src/builders/application/setup-bundling.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import { ComponentStylesheetBundler } from '../../tools/esbuild/angular/component-stylesheets';
 import { SourceFileCache } from '../../tools/esbuild/angular/source-file-cache';
 import {
   createBrowserCodeBundleOptions,
@@ -17,10 +18,7 @@ import {
 import { BundlerContext } from '../../tools/esbuild/bundler-context';
 import { createGlobalScriptsBundleOptions } from '../../tools/esbuild/global-scripts';
 import { createGlobalStylesBundleOptions } from '../../tools/esbuild/global-styles';
-import {
-  getSupportedNodeTargets,
-  transformSupportedBrowsersToTargets,
-} from '../../tools/esbuild/utils';
+import { getSupportedNodeTargets } from '../../tools/esbuild/utils';
 import { NormalizedApplicationBuildOptions } from './options';
 
 /**
@@ -33,8 +31,9 @@ import { NormalizedApplicationBuildOptions } from './options';
  */
 export function setupBundlerContexts(
   options: NormalizedApplicationBuildOptions,
-  browsers: string[],
+  target: string[],
   codeBundleCache: SourceFileCache,
+  stylesheetBundler: ComponentStylesheetBundler,
 ): BundlerContext[] {
   const {
     outputMode,
@@ -45,15 +44,14 @@ export function setupBundlerContexts(
     workspaceRoot,
     watch = false,
   } = options;
-  const target = transformSupportedBrowsersToTargets(browsers);
   const bundlerContexts = [];
 
   // Browser application code
   bundlerContexts.push(
     new BundlerContext(
       workspaceRoot,
       watch,
-      createBrowserCodeBundleOptions(options, target, codeBundleCache),
+      createBrowserCodeBundleOptions(options, target, codeBundleCache, stylesheetBundler),
     ),
   );
 
@@ -62,6 +60,7 @@ export function setupBundlerContexts(
     options,
     target,
     codeBundleCache,
+    stylesheetBundler,
   );
   if (browserPolyfillBundleOptions) {
     bundlerContexts.push(new BundlerContext(workspaceRoot, watch, browserPolyfillBundleOptions));
@@ -99,7 +98,7 @@ export function setupBundlerContexts(
       new BundlerContext(
         workspaceRoot,
         watch,
-        createServerMainCodeBundleOptions(options, nodeTargets, codeBundleCache),
+        createServerMainCodeBundleOptions(options, nodeTargets, codeBundleCache, stylesheetBundler),
       ),
     );
 
@@ -109,7 +108,7 @@ export function setupBundlerContexts(
         new BundlerContext(
           workspaceRoot,
           watch,
-          createSsrEntryCodeBundleOptions(options, nodeTargets, codeBundleCache),
+          createSsrEntryCodeBundleOptions(options, nodeTargets, codeBundleCache, stylesheetBundler),
         ),
       );
     }
@@ -128,3 +127,51 @@ export function setupBundlerContexts(
 
   return bundlerContexts;
 }
+
+export function createComponentStyleBundler(
+  options: NormalizedApplicationBuildOptions,
+  target: string[],
+): ComponentStylesheetBundler {
+  const {
+    workspaceRoot,
+    optimizationOptions,
+    sourcemapOptions,
+    outputNames,
+    externalDependencies,
+    preserveSymlinks,
+    stylePreprocessorOptions,
+    inlineStyleLanguage,
+    cacheOptions,
+    tailwindConfiguration,
+    postcssConfiguration,
+    publicPath,
+  } = options;
+  const incremental = !!options.watch;
+
+  return new ComponentStylesheetBundler(
+    {
+      workspaceRoot,
+      inlineFonts: !!optimizationOptions.fonts.inline,
+      optimization: !!optimizationOptions.styles.minify,
+      sourcemap:
+        // Hidden component stylesheet sourcemaps are inaccessible which is effectively
+        // the same as being disabled. Disabling has the advantage of avoiding the overhead
+        // of sourcemap processing.
+        sourcemapOptions.styles && !sourcemapOptions.hidden ? 'linked' : false,
+      outputNames,
+      includePaths: stylePreprocessorOptions?.includePaths,
+      // string[] | undefined' is not assignable to type '(Version | DeprecationOrId)[] | undefined'.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      sass: stylePreprocessorOptions?.sass as any,
+      externalDependencies,
+      target,
+      preserveSymlinks,
+      tailwindConfiguration,
+      postcssConfiguration,
+      cacheOptions,
+      publicPath,
+    },
+    inlineStyleLanguage,
+    incremental,
+  );
+}

packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts

@@ -532,7 +532,6 @@ export function createCompilerPlugin(
 
       build.onDispose(() => {
         sharedTSCompilationState?.dispose();
-        void stylesheetBundler.dispose();
         void compilation.close?.();
         void cacheStore?.close();
       });

packages/angular/build/src/tools/esbuild/application-code-bundle.ts

@@ -18,6 +18,7 @@ import {
   SERVER_APP_MANIFEST_FILENAME,
 } from '../../utils/server-rendering/manifest';
 import { createCompilerPlugin } from './angular/compiler-plugin';
+import { ComponentStylesheetBundler } from './angular/component-stylesheets';
 import { SourceFileCache } from './angular/source-file-cache';
 import { BundlerOptionsFactory } from './bundler-context';
 import { createCompilerPluginOptions } from './compiler-plugin-options';
@@ -34,15 +35,12 @@ import { createWasmPlugin } from './wasm-plugin';
 export function createBrowserCodeBundleOptions(
   options: NormalizedApplicationBuildOptions,
   target: string[],
-  sourceFileCache?: SourceFileCache,
+  sourceFileCache: SourceFileCache,
+  stylesheetBundler: ComponentStylesheetBundler,
 ): BuildOptions {
   const { entryPoints, outputNames, polyfills } = options;
 
-  const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions(
-    options,
-    target,
-    sourceFileCache,
-  );
+  const pluginOptions = createCompilerPluginOptions(options, sourceFileCache);
 
   const zoneless = isZonelessApp(polyfills);
 
@@ -100,7 +98,8 @@ export function createBrowserCodeBundleOptions(
 export function createBrowserPolyfillBundleOptions(
   options: NormalizedApplicationBuildOptions,
   target: string[],
-  sourceFileCache?: SourceFileCache,
+  sourceFileCache: SourceFileCache,
+  stylesheetBundler: ComponentStylesheetBundler,
 ): BuildOptions | BundlerOptionsFactory | undefined {
   const namespace = 'angular:polyfills';
   const polyfillBundleOptions = getEsBuildCommonPolyfillsOptions(
@@ -134,9 +133,9 @@ export function createBrowserPolyfillBundleOptions(
   // Only add the Angular TypeScript compiler if TypeScript files are provided in the polyfills
   if (hasTypeScriptEntries) {
     buildOptions.plugins ??= [];
-    const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions(
+    const pluginOptions = createCompilerPluginOptions(
       options,
-      target,
+
       sourceFileCache,
     );
     buildOptions.plugins.push(
@@ -228,6 +227,7 @@ export function createServerMainCodeBundleOptions(
   options: NormalizedApplicationBuildOptions,
   target: string[],
   sourceFileCache: SourceFileCache,
+  stylesheetBundler: ComponentStylesheetBundler,
 ): BuildOptions {
   const {
     serverEntryPoint: mainServerEntryPoint,
@@ -243,11 +243,7 @@ export function createServerMainCodeBundleOptions(
     'createServerCodeBundleOptions should not be called without a defined serverEntryPoint.',
   );
 
-  const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions(
-    options,
-    target,
-    sourceFileCache,
-  );
+  const pluginOptions = createCompilerPluginOptions(options, sourceFileCache);
 
   const mainServerNamespace = 'angular:main-server';
   const mainServerInjectPolyfillsNamespace = 'angular:main-server-inject-polyfills';
@@ -374,6 +370,7 @@ export function createSsrEntryCodeBundleOptions(
   options: NormalizedApplicationBuildOptions,
   target: string[],
   sourceFileCache: SourceFileCache,
+  stylesheetBundler: ComponentStylesheetBundler,
 ): BuildOptions {
   const { workspaceRoot, ssrOptions, externalPackages } = options;
   const serverEntryPoint = ssrOptions?.entry;
@@ -382,11 +379,7 @@ export function createSsrEntryCodeBundleOptions(
     'createSsrEntryCodeBundleOptions should not be called without a defined serverEntryPoint.',
   );
 
-  const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions(
-    options,
-    target,
-    sourceFileCache,
-  );
+  const pluginOptions = createCompilerPluginOptions(options, sourceFileCache);
 
   const ssrEntryNamespace = 'angular:ssr-entry';
   const ssrInjectManifestNamespace = 'angular:ssr-entry-inject-manifest';

packages/angular/build/src/tools/esbuild/bundler-execution-result.ts

@@ -9,6 +9,7 @@
 import type { Message, PartialMessage } from 'esbuild';
 import { normalize } from 'node:path';
 import type { ChangedFiles } from '../../tools/esbuild/watcher';
+import type { ComponentStylesheetBundler } from './angular/component-stylesheets';
 import type { SourceFileCache } from './angular/source-file-cache';
 import type { BuildOutputFile, BuildOutputFileType, BundlerContext } from './bundler-context';
 import { createOutputFile } from './utils';
@@ -20,6 +21,7 @@ export interface BuildOutputAsset {
 
 export interface RebuildState {
   rebuildContexts: BundlerContext[];
+  componentStyleBundler: ComponentStylesheetBundler;
   codeBundleCache?: SourceFileCache;
   fileChanges: ChangedFiles;
   previousOutputHashes: Map<string, string>;
@@ -50,6 +52,7 @@ export class ExecutionResult {
 
   constructor(
     private rebuildContexts: BundlerContext[],
+    private componentStyleBundler: ComponentStylesheetBundler,
     private codeBundleCache?: SourceFileCache,
   ) {}
 
@@ -158,6 +161,7 @@ export class ExecutionResult {
     return {
       rebuildContexts: this.rebuildContexts,
       codeBundleCache: this.codeBundleCache,
+      componentStyleBundler: this.componentStyleBundler,
       fileChanges,
       previousOutputHashes: new Map(this.outputFiles.map((file) => [file.path, file.hash])),
     };
@@ -177,5 +181,6 @@ export class ExecutionResult {
 
   async dispose(): Promise<void> {
     await Promise.allSettled(this.rebuildContexts.map((context) => context.dispose()));
+    await this.componentStyleBundler.dispose();
   }
 }