From ebaa462ebd260c421e2fdffaa52a60f42a4df4af Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Mon, 29 Jul 2024 14:23:30 +0000 Subject: [PATCH] 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 --- .../esbuild/stylesheets/stylesheet-plugin-factory.ts | 2 +- tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts b/packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts index 8c021d8e8e6a..69f9ee457144 100644 --- a/packages/angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts +++ b/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'); diff --git a/tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts b/tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts index 0dbb42f1025e..aa47808d8203 100644 --- a/tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts +++ b/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');