fix(@angular-devkit/build-angular): allow the esbuild-based builder to fully resolve global stylesheet packages

The esbuild-based experimental builder will now leverage the bundler to perform resolution of CSS imports.
This allows for more comprehensive resolution including packages which use the `sass` and/or `style` custom
conditions within a `package.json` exports field.

Author: clydin

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

@@ -149,7 +149,10 @@ export async function buildEsbuildBrowser(
     const { entryPoints: stylesheetEntrypoints, noInjectNames } = resolveGlobalStyles(
       options.styles,
       workspaceRoot,
-      !!options.preserveSymlinks,
+      // 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
@@ -164,6 +167,7 @@ export async function buildEsbuildBrowser(
           sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
           outputNames: noInjectNames.includes(name) ? { media: outputNames.media } : outputNames,
           includePaths: options.stylePreprocessorOptions?.includePaths,
+          preserveSymlinks: options.preserveSymlinks,
         },
       );
 

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

@@ -38,8 +38,8 @@ async function bundleStylesheet(
     write: false,
     platform: 'browser',
     preserveSymlinks: options.preserveSymlinks,
-    conditions: ['style'],
-    mainFields: ['style'],
+    conditions: ['style', 'sass'],
+    mainFields: ['style', 'sass'],
     plugins: [
       createSassPlugin({ sourcemap: !!options.sourcemap, includePaths: options.includePaths }),
     ],

packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

@@ -30,6 +30,7 @@ export function resolveGlobalStyles(
   styleEntrypoints: StyleElement[],
   root: string,
   preserveSymlinks: boolean,
+  skipResolution = false,
 ): { entryPoints: Record<string, string[]>; noInjectNames: string[]; paths: string[] } {
   const entryPoints: Record<string, string[]> = {};
   const noInjectNames: string[] = [];
@@ -40,22 +41,25 @@ export function resolveGlobalStyles(
   }
 
   for (const style of normalizeExtraEntryPoints(styleEntrypoints, 'styles')) {
-    let resolvedPath = path.resolve(root, style.input);
-    if (!fs.existsSync(resolvedPath)) {
-      try {
-        resolvedPath = require.resolve(style.input, { paths: [root] });
-      } catch {}
+    let stylesheetPath = style.input;
+    if (!skipResolution) {
+      stylesheetPath = path.resolve(root, stylesheetPath);
+      if (!fs.existsSync(stylesheetPath)) {
+        try {
+          stylesheetPath = require.resolve(style.input, { paths: [root] });
+        } catch {}
+      }
     }
 
     if (!preserveSymlinks) {
-      resolvedPath = fs.realpathSync(resolvedPath);
+      stylesheetPath = fs.realpathSync(stylesheetPath);
     }
 
     // Add style entry points.
     if (entryPoints[style.bundleName]) {
-      entryPoints[style.bundleName].push(resolvedPath);
+      entryPoints[style.bundleName].push(stylesheetPath);
     } else {
-      entryPoints[style.bundleName] = [resolvedPath];
+      entryPoints[style.bundleName] = [stylesheetPath];
     }
 
     // Add non injected styles to the list.
@@ -64,7 +68,7 @@ export function resolveGlobalStyles(
     }
 
     // Add global css paths.
-    paths.push(resolvedPath);
+    paths.push(stylesheetPath);
   }
 
   return { entryPoints, noInjectNames, paths };