publicPath escapes '@' character while emitting css files

[jedrzejowski]

Bug report

Hi, I'm developing chrome extension and in order to use images in CSS styles i need to set pubicPath to chrome-extension://__MSG_@@extension_id__/ (see why).

What is the current behavior?

For unknown reason CSS files are generated like this:

body {
    background: red;
    background-image: url(chrome-extension://__MSG_%40@extension_id__/895c2722a512d5b2e333.png);
/*                                                 ^^^                                           */
}

If the current behavior is a bug, please provide the steps to reproduce.

I prepared repository:

git clone git@github.com:jedrzejowski/my-issue-3.git webpack-issue-XXX
cd webpack-issue-XXX
npm ci
npx webpack
cat dist/index.css 

What is the expected behavior?

CSS file should look like this:

body {
    background: red;
    background-image: url(chrome-extension://__MSG_@@extension_id__/895c2722a512d5b2e333.png);
}

Other relevant information:
webpack version: 5.65.0, bug was introduced in version 5.52.0
Node.js version: 16/17
Operating System: Linux
Additional tools: none

[alexander-akait]

Why you use @@? They are stripped, try to run new URL("chrome-extension://__MSG_@extension_id__/895c2722a512d5b2e333.png") in browser

[jedrzejowski]

VVV This does not work VVV

VVV This does work VVV

I don't to call this URL via JavaScript. I want to create styles with this URL.

Chrome extensions changes those URLs by themselves in runtime, see here. That is why i need @@.

[jedrzejowski]

I know this is edge case, but can be there any way to prevent Webpack from messing with publicPath?

[alexander-akait]

I'm afraid not, I am investigating this problem now. Yes you don't run new URL(...), but we use this construction for creating url() and then run it on Node.js side

[alexander-akait]

current workaround - disable ESM generation:

{
  loader: "css-loader",
  options: {
    esModule: false,
  }
}

[alexander-akait]

Oh, bug on Node.js side.

Run console.log(new URL("chrome-extension://__MSG_@@extension_id__/895c2722a512d5b2e333.png")) in browser and run console.log(new URL("chrome-extension://__MSG_@@extension_id__/895c2722a512d5b2e333.png")) on Node.js side, output is different

[alexander-akait]

In browser:

URL {origin: 'chrome-extension://extension_id__', protocol: 'chrome-extension:', username: '', password: '', host: 'extension_id__', …}
hash: ""
host: "extension_id__"
hostname: "extension_id__"
href: "chrome-extension://extension_id__/895c2722a512d5b2e333.png"
origin: "chrome-extension://extension_id__"
password: ""
pathname: "/895c2722a512d5b2e333.png"
port: ""
protocol: "chrome-extension:"
search: ""
searchParams: URLSearchParams {}
username: ""
[[Prototype]]: URL

In Node.js

URL {
  href: 'chrome-extension://__MSG_%40@extension_id__/895c2722a512d5b2e333.png',
  origin: 'null',
  protocol: 'chrome-extension:',
  username: '__MSG_%40',
  password: '',
  host: 'extension_id__',
  hostname: 'extension_id__',
  port: '',
  pathname: '/895c2722a512d5b2e333.png',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

[alexander-akait]

hm, firefox output is different too:

URL { href: "chrome-extension://__MSG_@@extension_id__/895c2722a512d5b2e333.png", origin: "null", protocol: "chrome-extension:", username: "", password: "", host: "", hostname: "", port: "", pathname: "//__MSG_@@extension_id__/895c2722a512d5b2e333.png", search: "" }
hash: ""
host: ""
hostname: ""
href: "chrome-extension://__MSG_@@extension_id__/895c2722a512d5b2e333.png"
origin: "null"
password: ""
pathname: "//__MSG_@@extension_id__/895c2722a512d5b2e333.png"
port: ""
protocol: "chrome-extension:"
search: ""
searchParams: URLSearchParams {  }
username: ""
<prototype>: URLPrototype { toJSON: toJSON(), toString: toString(), href: Getter & Setter, … }

[jedrzejowski]

workaround with esModule: false works fine

[alexander-akait]

Reported nodejs/node#41220

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

[vankop]

@alexander-akait so should we keep closed this?

[alexander-akait]

@vankop Not sure, there is different behavior in chrome (in firefox too and another) and Node.js and all says they have valid logic 😕