fix(@angular/build): prevent build failures with remote CSS imports w…

…hen 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 angular#28113

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

@@ -10,7 +10,7 @@ import type { OnLoadResult, Plugin, PluginBuild } from 'esbuild';
 import glob from 'fast-glob';
 import assert from 'node:assert';
 import { readFile } from 'node:fs/promises';
-import { extname } from 'node:path';
+import { extname, isAbsolute } from 'node:path';
 import type { PostcssConfiguration } from '../../../utils/postcss-configuration';
 import { LoadResultCache, createCachedLoad } from '../load-result-cache';
 
@@ -167,6 +167,12 @@ export class StylesheetPluginFactory {
         build.onLoad(
           { filter: language.fileFilter },
           createCachedLoad(cache, async (args) => {
+            if (!isAbsolute(args.path)) {
+              // The file being requested might be using the HTTP protocol.
+              // Example: `@import url(https://fonts.googleapis.com/earlyaccess/notokufiarabic.css);`
+              return null;
+            }
+
             const data = await readFile(args.path, 'utf-8');
 
             return processStylesheet(

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');