Sass mixin still uses ~ (tilde) in $directory which is unsupported by newer bundlers

[michaelfaith]

Describe the bug

The use of ~ in the css url statement for the $directory variable default is causing errors in Angular's newer esbuild-based build system. My understanding is webpack is moving away from this convention as well. Angular's non-esbuild build system supports with or without ~. So it would seem to me that removing the ~ from the $directory default would allow for maximum capability.

Steps to Reproduce

• Create new angular app: ng new test-app
• Install fontsource package yarn add @fontsource/roboto
• Include the mixin in styles.scss:

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

• Switch angular.json to esbuild builder
  Change:

...
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
...

to

...
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser-esbuild",
...

• Run ng build

Expected behavior

Should build successfully. But instead I receive the following 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.

Version

5.0.2

OS

Windows 11

Browser

Chrome

Additional context

Recommend removing the ~ from

fontsource/packages/cli/src/sass/mixins.ts

Lines 43 to 47 in 0f4d2c7

	$directory: if(
	$directory,
	$directory,
	'~@fontsource#{if($isVariable, '-variable', '')}/#{map.get($metadata, id)}/files'
	);

[ayuhito]

I think this idea may unintentionally affect many builds with older bundlers and potentially be breaking for some of them. I'm a little uncomfortable making such a change without knowing how many users this could impact.

The current workaround would be to use the $directory Sass mixin parameter with the correct path, but maybe we could make things easier for users by including additional preset variables defining the path? e.g. we include an $esbuildDirectory variable with the non-tilde path that can be passed into $directory when importing the Sass mixins? We could then include a notice in the Angular guide to remark on the difference.

[michaelfaith]

That would certainly help as things transition away from tildes. At some point, though, it seems like non-tilde will be the norm. So it may be worth considering reversing the defaults at some point when it makes sense. But yeah, an interim solution might help.

[RBilly]

Alternatively I fixed this issue by doing the following in the vite config file:

resolve: {
    alias: [
      {
        // Workaround to emulate behavior of ~ prefix in Wepback that refers to a relative path in node_modules folder
        find: /~(.+)/,
        replacement: `${process.cwd()}/node_modules/$1`
      }
    ]
  }