esbuild builder unable to resolve css url statements with ~

michaelfaith commented 1 year ago

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

We use the fontsource project to self-host our fonts, and their sass mixin api creates css that uses a ~ in the url statement for loading the font file. This works fine with the webpack-based builder, as css-loader supports ~ in url (https://webpack.js.org/loaders/css-loader/#url). However, when trying the new esbuild builder, I'm getting the following error.

Minimal Reproduction

Install fonsource roboto: yarn add @fontsource/roboto

Include their mixin in styles.scss:

@use '@fontsource/roboto/scss/mixins' as roboto;
@include roboto.faces();

Switch angular.json to esbuild builder
ng build

Exception or Error

X [ERROR] Could not resolve "~@fontsource/roboto/files/roboto-latin-400-normal.woff" [plugin angular-css-resource]

    ../../dist/components/theme.css:69:509:
      69 │ ...ff2"),url("~@fontsource/roboto/files/roboto-...
         ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can remove the tilde and use a relative path to reference it, which should remove this error.

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 16.2.0
Node: 18.13.0
Package Manager: yarn 3.6.1
OS: win32 x64

Angular: 16.2.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.0
@angular-devkit/build-angular   16.2.0
@angular-devkit/core            16.2.0
@angular-devkit/schematics      16.2.0
@schematics/angular             16.2.0
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.1

Anything else relevant?

I noticed this issue which was closed due to inactivity, reporting the same thing: https://github.com/angular/angular-cli/issues/25089. Someone mentioned it being discouraged by webpack, but I didn't see that anywhere in their documentation. I know the sass-loader deprecated the use of it for @use and @import, but I didn't see anything about css-loader deprecating it for url. If you think I should bring this to the fontsource team instead, and that using ~ is a bad practice on their part, I'm happy to go that route. But wanted to start here.

alan-agius4 commented 1 year ago

The ~ syntax is non standard Webpack syntax and thus it is expected to fail.

Typically libraries provide users with a variable to configure the asset paths.

Example:

angular-automatic-lock-bot[bot] commented 1 year ago

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.}

angular / angular-cli