refactor(@angular-devkit/build-angular): move esbuild builder global stylesheet bundling into separate function

The global stylesheet bundling and processing code has been moved out of the main builder execution function
and into a separate function. This shortens the length of the main execution function for the builder and also
allows for further refactoring to allow the code and global stylesheet bundling to be executed at the same time.

Author: clydin

packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts

@@ -8,7 +8,7 @@
 
 import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
 import * as assert from 'assert';
-import type { OutputFile } from 'esbuild';
+import type { Message, OutputFile } from 'esbuild';
 import { promises as fs } from 'fs';
 import * as path from 'path';
 import { NormalizedOptimizationOptions, deleteOutputDir } from '../../utils';
@@ -144,62 +144,22 @@ export async function buildEsbuildBrowser(
   }
 
   // Process global stylesheets
-  if (options.styles) {
-    // resolveGlobalStyles is temporarily reused from the Webpack builder code
-    const { entryPoints: stylesheetEntrypoints, noInjectNames } = resolveGlobalStyles(
-      options.styles,
-      workspaceRoot,
-      // preserveSymlinks is always true here to allow the bundler to handle the option
-      true,
-      // skipResolution to leverage the bundler's more comprehensive resolution
-      true,
-    );
-    for (const [name, files] of Object.entries(stylesheetEntrypoints)) {
-      const virtualEntryData = files
-        .map((file) => `@import '${file.replace(/\\/g, '/')}';`)
-        .join('\n');
-      const sheetResult = await bundleStylesheetText(
-        virtualEntryData,
-        { virtualName: `angular:style/global;${name}`, resolvePath: workspaceRoot },
-        {
-          workspaceRoot,
-          optimization: !!optimizationOptions.styles.minify,
-          sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
-          outputNames: noInjectNames.includes(name) ? { media: outputNames.media } : outputNames,
-          includePaths: options.stylePreprocessorOptions?.includePaths,
-          preserveSymlinks: options.preserveSymlinks,
-          externalDependencies: options.externalDependencies,
-        },
-      );
-
-      await logMessages(context, sheetResult);
-      if (!sheetResult.path) {
-        // Failed to process the stylesheet
-        assert.ok(
-          sheetResult.errors.length,
-          `Global stylesheet processing for '${name}' failed with no errors.`,
-        );
+  const styleResults = await bundleGlobalStylesheets(
+    workspaceRoot,
+    outputNames,
+    options,
+    optimizationOptions,
+    sourcemapOptions,
+  );
+  outputFiles.push(...styleResults.outputFiles);
+  initialFiles.push(...styleResults.initialFiles);
 
-        return { success: false };
-      }
+  // Log all warnings and errors generated during bundling
+  await logMessages(context, styleResults);
 
-      // The virtual stylesheets will be named `stdin` by esbuild. This must be replaced
-      // with the actual name of the global style and the leading directory separator must
-      // also be removed to make the path relative.
-      const sheetPath = sheetResult.path.replace('stdin', name);
-      outputFiles.push(createOutputFileFromText(sheetPath, sheetResult.contents));
-      if (sheetResult.map) {
-        outputFiles.push(createOutputFileFromText(sheetPath + '.map', sheetResult.map));
-      }
-      if (!noInjectNames.includes(name)) {
-        initialFiles.push({
-          file: sheetPath,
-          name,
-          extension: '.css',
-        });
-      }
-      outputFiles.push(...sheetResult.resourceFiles);
-    }
+  // Return if the bundling has errors
+  if (styleResults.errors.length) {
+    return { success: false };
   }
 
   // Generate index HTML file
@@ -366,4 +326,79 @@ async function bundleCode(
   });
 }
 
+async function bundleGlobalStylesheets(
+  workspaceRoot: string,
+  outputNames: { bundles: string; media: string },
+  options: BrowserBuilderOptions,
+  optimizationOptions: NormalizedOptimizationOptions,
+  sourcemapOptions: SourceMapClass,
+) {
+  const outputFiles: OutputFile[] = [];
+  const initialFiles: FileInfo[] = [];
+  const errors: Message[] = [];
+  const warnings: Message[] = [];
+
+  // resolveGlobalStyles is temporarily reused from the Webpack builder code
+  const { entryPoints: stylesheetEntrypoints, noInjectNames } = resolveGlobalStyles(
+    options.styles || [],
+    workspaceRoot,
+    // preserveSymlinks is always true here to allow the bundler to handle the option
+    true,
+    // skipResolution to leverage the bundler's more comprehensive resolution
+    true,
+  );
+
+  for (const [name, files] of Object.entries(stylesheetEntrypoints)) {
+    const virtualEntryData = files
+      .map((file) => `@import '${file.replace(/\\/g, '/')}';`)
+      .join('\n');
+    const sheetResult = await bundleStylesheetText(
+      virtualEntryData,
+      { virtualName: `angular:style/global;${name}`, resolvePath: workspaceRoot },
+      {
+        workspaceRoot,
+        optimization: !!optimizationOptions.styles.minify,
+        sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
+        outputNames: noInjectNames.includes(name) ? { media: outputNames.media } : outputNames,
+        includePaths: options.stylePreprocessorOptions?.includePaths,
+        preserveSymlinks: options.preserveSymlinks,
+        externalDependencies: options.externalDependencies,
+      },
+    );
+
+    errors.push(...sheetResult.errors);
+    warnings.push(...sheetResult.warnings);
+
+    if (!sheetResult.path) {
+      // Failed to process the stylesheet
+      assert.ok(
+        sheetResult.errors.length,
+        `Global stylesheet processing for '${name}' failed with no errors.`,
+      );
+
+      continue;
+    }
+
+    // The virtual stylesheets will be named `stdin` by esbuild. This must be replaced
+    // with the actual name of the global style and the leading directory separator must
+    // also be removed to make the path relative.
+    const sheetPath = sheetResult.path.replace('stdin', name);
+    outputFiles.push(createOutputFileFromText(sheetPath, sheetResult.contents));
+    if (sheetResult.map) {
+      outputFiles.push(createOutputFileFromText(sheetPath + '.map', sheetResult.map));
+    }
+
+    if (!noInjectNames.includes(name)) {
+      initialFiles.push({
+        file: sheetPath,
+        name,
+        extension: '.css',
+      });
+    }
+    outputFiles.push(...sheetResult.resourceFiles);
+  }
+
+  return { outputFiles, initialFiles, errors, warnings };
+}
+
 export default createBuilder(buildEsbuildBrowser);