Resolving CSS src:url() broken with relative public-url path

[andig]

🐛 bug report

I'm running parcel build with relative path:

parcel build assets/index.html --public-url dist/

Fontawesome is included from ../node_modules folder:

<link href="../node_modules/@fortawesome/fontawesome-free/css/regular.min.css" rel="stylesheet">

When opening the page, all assets are resolved, however the relative path inside regular.min.css is resolved twice (see src:url(dist/fa-regular-400.6eacc):

/*!
* Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/@font-face{font-family:Font Awesome\ 5 Free;font-style:normal;font-weight:400;font-display:block;src:url(dist/fa-regular-400.6eacca26.eot);src:url(dist/fa-regular-400.6eacca26.eot?#iefix) format("embedded-opentype"),url(dist/fa-regular-400.1d9d06ec.woff2) format("woff2"),url(dist/fa-regular-400.df770621.woff) format("woff"),url(dist/fa-regular-400.7b7b2e58.ttf) format("truetype"),url(dist/fa-regular-400.8492b0f5.svg#fontawesome) format("svg")}.far{font-family:Font Awesome\ 5 Free;font-weight:400}
/*# sourceMappingURL=dist/regular.min.7ef30620.css.map */

The double dist/dist/fa-regular... cannot be resolved by the browser then. This is not a problem when using --public-url /dist obviously but then the install is not portable.

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

{
  "name": "evcc",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rimraf dist; parcel watch assets/index.html --public-url dist/",
    "build": "rimraf dist; parcel build assets/index.html --public-url dist/",
    "test": "echo \"Error: no test specified\" && exit 1",
    "fix-audit": "npm-force-resolutions"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "rimraf": "^3.0.2",
    "npm-force-resolutions": "0.0.3"
  },
  "engines": {
    "npm": "^6.0.0",
    "node": "^14.0.0"
  },
  "alias": {
    "vue": "./node_modules/vue/dist/vue.js"
  },
  "repository": "github:andig/evcc",
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "axios": "^0.21.0",
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "vue": "^2.6.12",
    "vue-router": "^3.4.7"
  },
  "resolutions": {
    "node-forge": "0.10.0"
  }
}

{
  "your": { "config": "here" }
}

🤔 Expected Behavior

Relative dist should only be applied once and not twice inside the font css.

😯 Current Behavior

The double dist/dist/fa-regular... cannot be resolved by the browser then. This is not a problem when using --public-url /dist obviously but then the install is not portable.

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	^1.12.4
Node	v14.15.0
npm/Yarn	6.14.8
Operating System	OSX

[andig]

Might be related to #5027 or #2786?

[andig]

@DeMoorJasper any idea that I could try for a workaround, even something like manually maintaining a mapping for defining the correct path to the asset?

[mischnic]

It's also listed twice in the source:

src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") ...

https://unpkg.com/browse/@fortawesome/fontawesome-free@5.15.1/css/regular.css

Also I don't see dist/dist in the bundle output you posted

[andig]

It's also listed twice in the source:

It‘s the same file plus query parameters. Why would that be an issue?

Also I don't see dist/dist in the bundle output you posted

No. But the output folder is dist/ and css url()s are relative to the css file, so that makes- as the css urls are mapped to dist/ too- dist/dist/ which I see in the browser and does not exist.

Imho the issue here is the css src: url() being resolved to the same relative path instead of .

[andig]

The same seems true for css source maps:

/*# sourceMappingURL=dist/regular.min.7ef30620.css.map */

Any idea where I could look for fixing this instead of post-processing everything with sed? This issue is preventing using parcel in any setup where target path schema is know known in advance.

[andig]

Does this in any way relate to #336 or #850? /cc @devongovett

Would appreciate any hint where to dig for a solution.

[devongovett]

Did you try removing the --public-url? Adding that will cause the urls to be prefixed by dist, but it doesn't sound like you want that.

[andig]

No, not yet. The docs at https://en.parceljs.org/cli.html#options seem to indicate that the public url can be a relative folder (which I do want) but which seems to have problems with path resolution. I‘ll retry without that option and report.

UPDATE

Using this instead of --public-dir:

parcel build assets/* --out-dir ./dist/"

leads to all asset links in dist to be prefixed by /. So no relative paths either.

[andig]

Here evcc-io/evcc#534 is another manifestation of the problem. Also site.webmanifest's start_url parameter is corrupted.

@devongovett do you have any other ideas I could try?