refactor(@angular/build): move component stylesheet bundler out of co…

…mpiler 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.
angular · Oct 17, 2024 · ba05932 · ba05932
1 parent bf1845b
commit ba05932
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 44 deletions.
diff --git a/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts b/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

diff --git a/packages/angular/build/src/tools/esbuild/application-code-bundle.ts b/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,

diff --git a/packages/angular/build/src/tools/esbuild/compiler-plugin-options.ts b/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,
+    ),
   };
 }