Skip to content

Commit 747a144

Browse files
committedJul 29, 2024·
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)
1 parent a28615d commit 747a144

File tree

3 files changed

+10
-3
lines changed

3 files changed

+10
-3
lines changed
 

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export function createStylesheetBundleOptions(
6363
];
6464

6565
if (options.inlineFonts) {
66-
plugins.push(createCssInlineFontsPlugin({ cache, cacheOptions: options.cacheOptions }));
66+
plugins.unshift(createCssInlineFontsPlugin({ cache, cacheOptions: options.cacheOptions }));
6767
}
6868

6969
return {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export class StylesheetPluginFactory {
165165

166166
// Add a load callback to support files from disk
167167
build.onLoad(
168-
{ filter: language.fileFilter },
168+
{ filter: language.fileFilter, namespace: 'file' },
169169
createCachedLoad(cache, async (args) => {
170170
const data = await readFile(args.path, 'utf-8');
171171

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,14 @@ export default async function () {
1515
await writeFile('src/app/app.component.css', '@tailwind base; @tailwind components;');
1616

1717
// Add Tailwind directives to a global style
18-
await writeFile('src/styles.css', '@tailwind base; @tailwind components;');
18+
await writeFile(
19+
'src/styles.css',
20+
`
21+
@import url(https://fonts.googleapis.com/css?family=Roboto:400);
22+
@tailwind base;
23+
@tailwind components;
24+
`,
25+
);
1926

2027
// Ensure installation warning is present
2128
const { stderr } = await ng('build', '--configuration=development');

0 commit comments

Comments
 (0)
Please sign in to comment.