fix(@angular-devkit/build-angular): use relative css resource paths in esbuild JSON stats

clydin · alan-agius4 · commit 0520608f68f1 · 2023-01-09T15:56:33.000Z
When using the experimental esbuild-based browser application builder with the `--stats-json` option, all referenced CSS resources will now use paths relative to the workspace root within the output JSON file. Previously, the resource paths within the stats JSON file were absolute and were inconsistent with the other JavaScript and CSS paths within the file. CSS resources include files that have been referenced in a bundled stylesheet `url()` such as images or fonts. (cherry picked from commit 84d2d8b)
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/css-resource-plugin.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/css-resource-plugin.ts
@@ -7,7 +7,8 @@
  */
 
 import type { Plugin, PluginBuild } from 'esbuild';
-import { readFile } from 'fs/promises';
+import { readFile } from 'node:fs/promises';
+import { join, relative } from 'node:path';
 
 /**
  * Symbol marker used to indicate CSS resource resolution is being attempted.
@@ -54,15 +55,25 @@ export function createCssResourcePlugin(): Plugin {
           resolveDir,
         });
 
+        // Return results that are not files since these are most likely specific to another plugin
+        // and cannot be loaded by this plugin.
+        if (result.namespace !== 'file' || !result.path) {
+          return result;
+        }
+
+        // All file results are considered CSS resources and will be loaded via the file loader
         return {
           ...result,
+          // Use a relative path to prevent fully resolved paths in the metafile (JSON stats file).
+          // This is only necessary for custom namespaces. esbuild will handle the file namespace.
+          path: relative(build.initialOptions.absWorkingDir ?? '', result.path),
           namespace: 'css-resource',
         };
       });
 
       build.onLoad({ filter: /.*/, namespace: 'css-resource' }, async (args) => {
         return {
-          contents: await readFile(args.path),
+          contents: await readFile(join(build.initialOptions.absWorkingDir ?? '', args.path)),
           loader: 'file',
         };
       });
