URL rewriting fails when invoking parcel build with multiple entries

[davepeck]

🐛 bug report

When using parcel build with multiple entries, URL rewriting can fail.

🎛 Configuration (.babelrc, package.json, cli command)

🤔 Expected Behavior

Given the following directory structure:

project/
project/src/
project/src/css/
project/src/css/example.scss
project/src/images/image.png
project/src/js/index.js

Full content of example.scss:

body {
  background-image: url("../images/image.png");
}

image.png is arbitrary and index.js is empty.

Running parcel build src/css/example.scss src/js/index.js from the top-level project/ directory results in a dist/ directory with the following contents:

dist/image.72099d14.png
dist/js/index.js
dist/css/example.map
dist/css/example.css

That's fine, but dist/css/example.css should contain a valid url(...) reference:

body{background-image:url(../image.72099d14.png)}

😯 Current Behavior

Unfortunately, dist/css/example.css contains an invalid url(...) reference:

body{background-image:url(image.72099d14.png)}

Note the lack of ../ -- a bug.

Alternatively, I suppose we could argue that the bug is actually the fact that example.css is placed in the dist/css/ subdirectory, rather than directly in the dist/ directory. If we placed example.css and index.js in the top-level dist/ instead, then we'd have something equivalent to running parcel build twice, once for each entry.

By the way, this isn't a requirement, but my expectation (as a first time parcel user) was that dist/ would actually contain an images/ subdirectory in this case, and the actual link in dist/css/example.css would be:

body{background-image:url(../images/image.72099d14.png)}

💁 Possible Solution

🔦 Context

💻 Code Sample

See attachment for example project directory.

project.zip

🌍 Your Environment

parcel version 1.10.3

[davepeck]

If someone could comment which direction the bug actually is (either the URL is wrong, or the placement of files in dist/ is wrong), I might be interested in looking under Parcel's hood to see what fixing this would take. Thanks!

[kirillrogovoy]

Or the third option could be to use absolute paths:

body{background-image:url(/image.72099d14.png)}

should work just fine too.

Would be great to hear @DeMoorJasper's opinion on this issue.

[mischnic]

This was fixed in #2518