CSS: resolve relative paths without ./ prefix

[simon04]

CSS url() defines:

Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).

Currently,. esbuild fails when encountering relative URLs without a ./ prefix:

$ npm install leaflet; echo 'require("leaflet/dist/leaflet.css")' | esbuild --bundle 

node_modules/leaflet/dist/leaflet.css:351:23: error: Could not resolve "images/layers.png" (mark it as external to exclude it from the bundle)
  background-image: url(images/layers.png);
                        ~~~~~~~~~~~~~~~~~
node_modules/leaflet/dist/leaflet.css:356:23: error: Could not resolve "images/layers-2x.png" (mark it as external to exclude it from the bundle)
  background-image: url(images/layers-2x.png);
                        ~~~~~~~~~~~~~~~~~~~~
node_modules/leaflet/dist/leaflet.css:397:23: error: Could not resolve "images/marker-icon.png" (mark it as external to exclude it from the bundle)
  background-image: url(images/marker-icon.png);
                        ~~~~~~~~~~~~~~~~~~~~~~
<stdin>:1:8: error: Cannot import "node_modules/leaflet/dist/leaflet.css" into a JavaScript file without an output path configured
require("leaflet/dist/leaflet.css")
        ~~~~~~~~~~~~~~~~~~~~~~~~~~
4 errors

[evanw]

Thanks for reporting this issue. The reason why this happens is that esbuild follows node's path resolution logic in which a path without a ./ or a ../ is a package path and is looked up in node_modules instead of relative to the enclosing directory.

I just did a survey of how other bundlers handle this case:

Bundler	Relative path	Package path
esbuild	❌	✅
Parcel	✅	❌
Webpack	✅	✅

It's definitely not great that esbuild and Parcel are opposites. It looks like Webpack actually checks both locations and appears to prioritize the relative path check above the package path check. So esbuild should probably do that.

[joelmoss]

Is this changed supported when using @import's in CSS?

I can't seem to find any docs on how file resolving works.

[atlemagnussen]

Still face this issue.
Any good workarounds for 3rd party libs?

Personally I now do @import url("https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"); in another css file

[pd4d10]

Facing this issue +1

esbuild version: v0.12.17

 > vendor/gecko/devtools/client/jsonview/css/main.css:12:8: error: Could not resolve "general.css" (use "./general.css" to reference the file "vendor/gecko/devtools/client/jsonview/css/general.css")
    12 │ @import "general.css";
       ╵         ~~~~~~~~~~~~~