refactor(@angular/build): move component stylesheet bundler out of compiler plugin

The component stylesheet bundler is now created during the setup of the Angular
compiler plugin options. This is an initial step to support more fine-grained
rebuild actions with the new component stylesheet development server support.

Author: clydin

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

@@ -30,7 +30,6 @@ import {
 import { JavaScriptTransformer } from '../javascript-transformer';
 import { LoadResultCache, createCachedLoad } from '../load-result-cache';
 import { logCumulativeDurations, profileAsync, resetCumulativeDurations } from '../profiling';
-import { BundleStylesheetOptions } from '../stylesheets/bundle-options';
 import { SharedTSCompilationState, getSharedCompilationState } from './compilation-state';
 import { ComponentStylesheetBundler } from './component-stylesheets';
 import { FileReferenceTracker } from './file-reference-tracker';
@@ -57,7 +56,7 @@ export interface CompilerPluginOptions {
 // eslint-disable-next-line max-lines-per-function
 export function createCompilerPlugin(
   pluginOptions: CompilerPluginOptions,
-  styleOptions: BundleStylesheetOptions & { inlineStyleLanguage: string },
+  stylesheetBundler: ComponentStylesheetBundler,
 ): Plugin {
   return {
     name: 'angular-compiler',
@@ -128,12 +127,6 @@ export function createCompilerPlugin(
       // Determines if transpilation should be handle by TypeScript or esbuild
       let useTypeScriptTranspilation = true;
 
-      // Track incremental component stylesheet builds
-      const stylesheetBundler = new ComponentStylesheetBundler(
-        styleOptions,
-        styleOptions.inlineStyleLanguage,
-        pluginOptions.incremental,
-      );
       let sharedTSCompilationState: SharedTSCompilationState | undefined;
 
       // To fully invalidate files, track resource referenced files and their referencing source

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

@@ -38,7 +38,7 @@ export function createBrowserCodeBundleOptions(
 ): BuildOptions {
   const { entryPoints, outputNames, polyfills } = options;
 
-  const { pluginOptions, styleOptions } = createCompilerPluginOptions(
+  const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions(
     options,
     target,
     sourceFileCache,
@@ -65,8 +65,8 @@ export function createBrowserCodeBundleOptions(
       createCompilerPlugin(
         // JS/TS options
         pluginOptions,
-        // Component stylesheet options
-        styleOptions,
+        // Component stylesheet bundler
+        stylesheetBundler,
       ),
     ],
   };
@@ -134,7 +134,7 @@ export function createBrowserPolyfillBundleOptions(
   // Only add the Angular TypeScript compiler if TypeScript files are provided in the polyfills
   if (hasTypeScriptEntries) {
     buildOptions.plugins ??= [];
-    const { pluginOptions, styleOptions } = createCompilerPluginOptions(
+    const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions(
       options,
       target,
       sourceFileCache,
@@ -144,7 +144,7 @@ export function createBrowserPolyfillBundleOptions(
         // JS/TS options
         { ...pluginOptions, noopTypeScriptCompilation: true },
         // Component stylesheet options are unused for polyfills but required by the plugin
-        styleOptions,
+        stylesheetBundler,
       ),
     );
   }
@@ -243,7 +243,7 @@ export function createServerMainCodeBundleOptions(
     'createServerCodeBundleOptions should not be called without a defined serverEntryPoint.',
   );
 
-  const { pluginOptions, styleOptions } = createCompilerPluginOptions(
+  const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions(
     options,
     target,
     sourceFileCache,
@@ -278,8 +278,8 @@ export function createServerMainCodeBundleOptions(
       createCompilerPlugin(
         // JS/TS options
         { ...pluginOptions, noopTypeScriptCompilation: true },
-        // Component stylesheet options
-        styleOptions,
+        // Component stylesheet bundler
+        stylesheetBundler,
       ),
     ],
   };
@@ -382,7 +382,7 @@ export function createSsrEntryCodeBundleOptions(
     'createSsrEntryCodeBundleOptions should not be called without a defined serverEntryPoint.',
   );
 
-  const { pluginOptions, styleOptions } = createCompilerPluginOptions(
+  const { pluginOptions, stylesheetBundler } = createCompilerPluginOptions(
     options,
     target,
     sourceFileCache,
@@ -411,8 +411,8 @@ export function createSsrEntryCodeBundleOptions(
       createCompilerPlugin(
         // JS/TS options
         { ...pluginOptions, noopTypeScriptCompilation: true },
-        // Component stylesheet options
-        styleOptions,
+        // Component stylesheet bundler
+        stylesheetBundler,
       ),
     ],
     inject,

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

@@ -8,6 +8,7 @@
 
 import { NormalizedApplicationBuildOptions } from '../../builders/application/options';
 import type { createCompilerPlugin } from './angular/compiler-plugin';
+import { ComponentStylesheetBundler } from './angular/component-stylesheets';
 import type { SourceFileCache } from './angular/source-file-cache';
 
 type CreateCompilerPluginParameters = Parameters<typeof createCompilerPlugin>;
@@ -18,7 +19,7 @@ export function createCompilerPluginOptions(
   sourceFileCache?: SourceFileCache,
 ): {
   pluginOptions: CreateCompilerPluginParameters[0];
-  styleOptions: CreateCompilerPluginParameters[1];
+  stylesheetBundler: ComponentStylesheetBundler;
 } {
   const {
     workspaceRoot,
@@ -40,6 +41,7 @@ export function createCompilerPluginOptions(
     externalRuntimeStyles,
     instrumentForCoverage,
   } = options;
+  const incremental = !!options.watch;
 
   return {
     // JS/TS options
@@ -52,33 +54,35 @@ export function createCompilerPluginOptions(
       fileReplacements,
       sourceFileCache,
       loadResultCache: sourceFileCache?.loadResultCache,
-      incremental: !!options.watch,
+      incremental,
       externalRuntimeStyles,
       instrumentForCoverage,
     },
-    // Component stylesheet options
-    styleOptions: {
-      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,
+    stylesheetBundler: 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,
-      preserveSymlinks,
-      tailwindConfiguration,
-      postcssConfiguration,
-      cacheOptions,
-      publicPath,
-    },
+      incremental,
+    ),
   };
 }