fix(@angular/build): prevent build failures with remote CSS imports when Tailwind is configured

This addresses a bug where `@import url()` statements with remote CSS files (ending in .css) caused build errors when Tailwind was present. The issue arised from incorrect handling of remote URLs by the stylesheet plugin, which treated them as local files. This fix ensures proper handling of remote CSS imports.

Closes #28113

(cherry picked from commit 7d52941)

Author: alan-agius4

packages/angular/build/src/tools/esbuild/stylesheets/bundle-options.ts

@@ -63,7 +63,7 @@ export function createStylesheetBundleOptions(
   ];
 
   if (options.inlineFonts) {
-    plugins.push(createCssInlineFontsPlugin({ cache, cacheOptions: options.cacheOptions }));
+    plugins.unshift(createCssInlineFontsPlugin({ cache, cacheOptions: options.cacheOptions }));
   }
 
   return {

packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts

@@ -165,7 +165,7 @@ export class StylesheetPluginFactory {
 
         // Add a load callback to support files from disk
         build.onLoad(
-          { filter: language.fileFilter },
+          { filter: language.fileFilter, namespace: 'file' },
           createCachedLoad(cache, async (args) => {
             const data = await readFile(args.path, 'utf-8');
 

tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts

@@ -15,7 +15,14 @@ export default async function () {
   await writeFile('src/app/app.component.css', '@tailwind base; @tailwind components;');
 
   // Add Tailwind directives to a global style
-  await writeFile('src/styles.css', '@tailwind base; @tailwind components;');
+  await writeFile(
+    'src/styles.css',
+    `
+      @import url(https://fonts.googleapis.com/css?family=Roboto:400);
+      @tailwind base;
+      @tailwind components;
+    `,
+  );
 
   // Ensure installation warning is present
   const { stderr } = await ng('build', '--configuration=development');