esbuild: Using Tailwind breaks stylesheet processing for CSS @imports with URLs ending in .css

[JulienZD]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When Tailwind is configured in a project (maybe just PostCSS), any @import url() statement with a URL ending in .css (such as @import url(https://fonts.googleapis.com/earlyaccess/notokufiarabic.css); causes the build to fail, as the url is deemed a local file by the language filters passed to StyleSheetPluginFactory.create(). The create method seems to register an esbuild onLoad handler that will read the path as a local file

Any URLs ending in .less, .scss or .sass are also affected.

In our case we can't easily remove .css from the imported URL, as it's defined by an imported third party CSS file.

Minimal Reproduction

1. Create a new project with ng new
2. Install Tailwind by following the Tailwind + Angular installation guide
3. Add the following to src/styles.css: @import url(https://fonts.googleapis.com/earlyaccess/notokufiarabic.css);
4. Run npm run build
5. The build fails, as the URL is attemped to be read as a local file

When no Tailwind config file is present, the build runs fine:

1. Remove tailwind.config.js and the @tailwind lines from the CSS file, while keeping the @import url()
2. Run npm run build
3. The build succeeds

Exception or Error

ENOENT: no such file or directory, open 'https://fonts.googleapis.com/earlyaccess/notokufiarabic.css' [plugin angular-css]

Your Environment

Angular CLI: 18.1.2
Node: 20.14.0
Package Manager: npm 10.7.0
OS: darwin arm64

Angular: 18.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1801.2
@angular-devkit/build-angular   18.1.2
@angular-devkit/core            18.1.2
@angular-devkit/schematics      18.1.2
@schematics/angular             18.1.2
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.8

Anything else relevant?

No response

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}