From 747a1447c1855a1bb918e5f55e4ba4182235f88a Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Mon, 29 Jul 2024 14:27:49 +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 (cherry picked from commit 7d52941a2e36b1e08001d7042c9d3e258d8e8b34) --- .../src/tools/esbuild/stylesheets/bundle-options.ts | 2 +- .../esbuild/stylesheets/stylesheet-plugin-factory.ts | 2 +- tests/legacy-cli/e2e/tests/build/styles/tailwind-v3.ts | 9 ++++++++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/angular/build/src/tools/esbuild/stylesheets/bundle-options.ts b/packages/angular/build/src/tools/esbuild/stylesheets/bundle-options.ts index 8a14a76887e4..591b19178893 100644 --- a/packages/angular/build/src/tools/esbuild/stylesheets/bundle-options.ts +++ b/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 { 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');