Hashes or queries in imports

[normanrz]

I am using the font awesome icons for my project. The module provided css file uses hashes (e.g. url("../webfonts/fa-solid-900.svg#fontawesome")) and querystrings (e.g. url("../webfonts/fa-solid-900.eot?#iefix")) in the font imports. Esbuild doens't resolve those.

I think the expected behavior would be to ignore both hash and querystring parts of a URL when resolving, but keeping them in the output css. This is also how webpack handles it.

I made a small repo to reproduce the issue: https://github.com/normanrz/esbuild-sass-bug/tree/esbuild
Note the esbuild branch. Run with yarn install && node build.js

[evanw]

Run with yarn install && node build.js

Did you perhaps forget to add build.js to git?

[normanrz]

Yes, I added it now. Sorry about that!

[evanw]

When I run that I get lots of errors that look like this:

 > node_modules/@fortawesome/fontawesome-free/css/all.css: error: File could not be loaded: node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf
    4592 │ ...at("woff"), url("../webfonts/fa-brands-400.ttf") format("truety...
         ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

But this is just because no loader has been configured for that file type. If you add something like this:

 const esbuild = require('esbuild');
 
 esbuild.build({
   entryPoints: ['index.js'],
   bundle: true,
   outfile: 'bundle.js',
+  loader: {
+    '.eot': 'file',
+    '.woff': 'file',
+    '.woff2': 'file',
+    '.svg': 'file',
+    '.ttf': 'file',
+  },
 }).catch((e) => console.error(e.message));

then the files load fine and preserve the query/hash in the imports:

/* ... in bundle.css */
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: 
    url(fa-brands-400.F47772JC.eot);
  src: 
    url(fa-brands-400.F47772JC.eot?#iefix) format("embedded-opentype"), 
    url(fa-brands-400.TY2VVPNB.woff2) format("woff2"), 
    url(fa-brands-400.GCVJUSS7.woff) format("woff"), 
    url(fa-brands-400.DV4GNJY3.ttf) format("truetype"), 
    url(fa-brands-400.HDM7XGLW.svg#fontawesome) format("svg");
}

This is expected because the feature to preserve the query/hash was recently added to fix #826. Is there more information required to reproduce your issue?

[normanrz]

Wow, I hadn't realized there were 4 releases, since I tried it out last week. It is good to know that esbuild itself supports this. I actually have the loaders in my main project, but forgot it in the reproducing code. Thanks for your amazing work and quick help!

Anyways, my main code uses less stylesheets and uses the esbuild-plugin-less. There, the issue still occurs (see https://github.com/normanrz/esbuild-sass-bug/tree/less). I assumed this was an issue of esbuild itself, but now I think I should post this issue in the plugin's repo.

[evanw]

No, I think this is a bug in esbuild. The problem appears to be that while esbuild supports hashes or queries in imports, that's currently only the case for paths other than absolute paths. It's not working in this case because your setup is using absolute paths. I believe the fix is that esbuild needs to be doing this for absolute paths too.

[ChildishGiant]

For me I have issues even using a file loader or dataURL. All the paths are relative in the scss but seem to become absolute and I think the backslashes all get deleted (F:\code\cloverleaf\web\node_modules\material-design-icons-iconfont\dist\fonts\MaterialIcons-Regular.woff is read in as F:\fode\floverleafwebnode_modulesmaterial-design-icons-iconfont\rist\x0fontsMaterialIcons-Regular.woff)

> C:/Users/allie/AppData/Local/Temp/tmp-14972-t6715CyaepB5/web/src/style.css:8:28969: error: Could not resolve "F:\fode\floverleafwebnode_modulesmaterial-design-icons-iconfont\rist\x0fontsMaterialIcons-Regular.eot" (mark it as external to exclude it from the bundle)
    8 │ ...normal;font-weight:400;src:url("F:\code\cloverleaf\web\node_modules\material-design-icons-iconfont\dist\fonts\MaterialIcons-Regular.eot");src:local("Material Icons"... 
      ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > C:/Users/allie/AppData/Local/Temp/tmp-14972-t6715CyaepB5/web/src/style.css:8:29139: error: Could not resolve "F:\fode\floverleafwebnode_modulesmaterial-design-icons-iconfont\rist\x0fontsMaterialIcons-Regular.woff2" (mark it as external to exclude it from the bundle)
    8 │ ...l("MaterialIcons-Regular"),url("F:\code\cloverleaf\web\node_modules\material-design-icons-iconfont\dist\fonts\MaterialIcons-Regular.woff2") format("woff2"),url("F:\... 
      ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > C:/Users/allie/AppData/Local/Temp/tmp-14972-t6715CyaepB5/web/src/style.css:8:29268: error: Could not resolve "F:\fode\floverleafwebnode_modulesmaterial-design-icons-iconfont\rist\x0fontsMaterialIcons-Regular.woff" (mark it as external to exclude it from the bundle)
    8 │ ...ar.woff2") format("woff2"),url("F:\code\cloverleaf\web\node_modules\material-design-icons-iconfont\dist\fonts\MaterialIcons-Regular.woff") format("woff"),url("F:\co... 
      ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > C:/Users/allie/AppData/Local/Temp/tmp-14972-t6715CyaepB5/web/src/style.css:8:29395: error: Could not resolve "F:\fode\floverleafwebnode_modulesmaterial-design-icons-iconfont\rist\x0fontsMaterialIcons-Regular.ttf" (mark it as external to exclude it from the bundle)
    8 │ ...ular.woff") format("woff"),url("F:\code\cloverleaf\web\node_modules\material-design-icons-iconfont\dist\fonts\MaterialIcons-Regular.ttf") format("truetype");font-di... 
      ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > C:/Users/allie/AppData/Local/Temp/tmp-14972-t6715CyaepB5/web/src/style.css:8:30059: error: Could not resolve "F:\fode\floverleafweb\x0fontsRobotoMono-Regular.ttf" (mark it as external to exclude it from the bundle)
    8 │ ...rc:local("Roboto Mono"),local("RobotoMono-Regular"),url("F:\code\cloverleaf\web\fonts\RobotoMono-Regular.ttf") format("truetype");font-display:swap}@font-face{font-... 
      ╵                                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > C:/Users/allie/AppData/Local/Temp/tmp-14972-t6715CyaepB5/web/src/style.css:8:30269: error: Could not resolve "F:\fode\floverleafweb\x0fontsRoboto-Light.ttf" (mark it as external to exclude it from the bundle)
    8 │ ...ht:300;src:local("Roboto Light"),local("Roboto-Light"),url("F:\code\cloverleaf\web\fonts\Roboto-Light.ttf") format("truetype");font-display:swap}@font-face{font-fam... 
      ╵                                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > C:/Users/allie/AppData/Local/Temp/tmp-14972-t6715CyaepB5/web/src/style.css:8:30469: error: Could not resolve "F:\fode\floverleafweb\x0fontsRoboto-Regular.ttf" (mark it as external to exclude it from the bundle)
    8 │ ...eight:400;src:local("Roboto"),local("Roboto-Regular"),url("F:\code\cloverleaf\web\fonts\Roboto-Regular.ttf") format("truetype");font-display:swap}@font-face{font-fa... 
      ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > C:/Users/allie/AppData/Local/Temp/tmp-14972-t6715CyaepB5/web/src/style.css:8:30677: error: Could not resolve "F:\fode\floverleafweb\x0fontsRoboto-Medium.ttf" (mark it as external to exclude it from the bundle)
    8 │ ...500;src:local("Roboto Medium"),local("Roboto-Medium"),url("F:\code\cloverleaf\web\fonts\Roboto-Medium.ttf") format("truetype");font-display:swap}:root{--accentColor... 
      ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[evanw]

The tool you are using to generate that file likely wasn't built to handle Windows-style paths. In CSS, "\c" is a hex escape sequence, not a backslash character followed by a letter. One possible workaround could be to use WSL (i.e. use Linux instead of Windows). You could also consider filing a bug with whichever tool that generated this code.