publicUrl is not applied to background url's in CSS selectors.

[lakhaNamdhari]

🐛 bug report

When publicUrl is set, it should be applied to all url paths within html tags and css selectors. However, after running parcel build, the publicUrl only applied to url's with HTML tags. It isn't applied to background: property in CSS selectors.

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

// No .babelrc created, using default config.

// .parcelrc
{
  "extends": "@parcel/config-default",
  "resolvers": ["parcel-resolver-ignore", "..."]
}

// package.json 
{
  "name": "my-service",
  "version": "1.0.0",
  "description": "",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "targets": {
    "default": {
      "publicUrl": "/assets/my-service",
      "sourceMap": false
    }
  },
  "scripts": {
    "start": "parcel --hmr-port=4141 ./src/**/*.html",
    "build": "parcel build ./src/**/*.html",
  },
  "devDependencies": {
    "@autoscout24/typescript-presets": "^2.0.1",
    "@parcel/transformer-sass": "2.4.1",
    "parcel": "^2.4.1",
    "parcel-resolver-ignore": "^2.0.0",
    "process": "^0.11.10",
    "sharp": "^0.29.1",
    "svg-sprite": "^1.5.4"
  },
  "@parcel/bundler-default": {
    "minBundles": 2
  },
  "parcelIgnore": [
    "make-it-sans-regular.v1.woff2",
    "make-it-sans-regular.v1.ttf"
  ]
}

🤔 Expected Behavior

The publicUrl should be applied to all url's within background property in CSS too.

😯 Current Behavior

The publicUrl is only applied to url's with html tags eg: to

💁 Possible Solution

🔦 Context

Due to this issue the url paths within CSS background attribute is wrong in production environment. Hence, no images are visible in production environment.

💻 Code Sample

It's a private repo so unfortunately can't link it. But the issue is easily reproducible with the shared config. Still in case it's not reproducible, I can create something simple, host it on a public repo and share it with you.

🌍 Your Environment

Software	Version(s)
Parcel	^2.4.1
Node	v16.14.0
npm/Yarn	Yarn
Operating System	MacOS Monterey

[devongovett]

URLs within CSS files are resolved relative to the CSS file, so it shouldn't be necessary to make them absolute paths. Do you have an example of how this is broken?

[lorenzogrv]

Just a comment to be notified if there are news on this. I've having a similar problem

[Cristy94]

URLs within CSS files are resolved relative to the CSS file, so it shouldn't be necessary to make them absolute paths. Do you have an example of how this is broken?

In my case it breaks because I use React.Router, so for fonts the files are stored in the root directory and loaded as url(inter-v12-latin-300.66216fc4.woff2) which works fine when on the index page, but if I navigate to /page1 it tries to load the fonts from '/page1/inter-v12-latin-300.66216fc4.woff2` which is wrong. Any way to force the url() to be absolute relative to the index file?

[devongovett]

Like I said before, relative URLs are resolved from the CSS file they are referenced in, not from the HTML page so that shouldn't be a problem. Maybe if you have an inline <style> tag?

[Cristy94]

Like I said before, relative URLs are resolved from the CSS file they are referenced in, not from the HTML page so that shouldn't be a problem. Maybe if you have an inline <style> tag?

I fixed the issue in my case, I had a more complex setup, and for resources that are not found in a subdirectory I use .htaccess to automatically load them from the root directory. The issue was that I didn't have the font file extension (woff2) added to that htaccess rewrite rule.

[vinicio]

Like I said before, relative URLs are resolved from the CSS file they are referenced in, not from the HTML page so that shouldn't be a problem. Maybe if you have an inline <style> tag?

What would be the solution in the case of having an inline <style> tag? I'm trying to inline my CSS file to use within AMP, and this behavior seems to have changed from v1 to v2.

Thank you!

[markkorput]

Like I said before, relative URLs are resolved from the CSS file they are referenced in

I just ran into this case while trying to use parcel to build html email templates. I'm trying to add css classes that reference publically hosted images (in the background-image property, to be specific). These classes reside in a <style> tag in the <head> of the html document.

Is there a way/workaround to force css selectors to respect the public-url option as well?

[kihlstrom]

What would be the solution in the case of having an inline <style> tag?

If anyone has an answer to this, I would like to know as well. Thanks!

[BoYuanSu]

hi, @devongovett I also encountered the same problem. publicUrl do not apply to background image url in inline style or tag style attribute.