fix(@angular-devkit/build-angular): show error note for CSS url() tilde usage in esbuild builder

When using the esbuild-based browser application builder with a `url()` in a stylesheet that uses
that Webpack-specific tilde prefix, a note will be added to the resolution error providing additional
information regarding the removal of the tilde.

Author: clydin

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

@@ -55,9 +55,18 @@ export function createCssResourcePlugin(): Plugin {
           resolveDir,
         });
 
+        if (result.errors.length && args.path[0] === '~') {
+          result.errors[0].notes = [
+            {
+              location: null,
+              text: 'You can remove the tilde and use a relative path to reference it, which should remove this error.',
+            },
+          ];
+        }
+
         // 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) {
+        if (result.namespace !== 'file') {
           return result;
         }
 

packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/stylesheet-url-resolution_spec.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { buildEsbuildBrowser } from '../../index';
+import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup';
+
+describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
+  describe('Behavior: "Stylesheet url() Resolution"', () => {
+    it('should show a note when using tilde prefix', async () => {
+      await harness.writeFile(
+        'src/styles.css',
+        `
+        .a {
+          background-image: url("~/image.jpg")
+        }
+      `,
+      );
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        styles: ['src/styles.css'],
+      });
+
+      const { result, logs } = await harness.executeOnce();
+      expect(result?.success).toBe(false);
+
+      expect(logs).toContain(
+        jasmine.objectContaining({
+          message: jasmine.stringMatching('You can remove the tilde and'),
+        }),
+      );
+    });
+  });
+});