webpack/css-loader

add option to disable detect tilde prefix

Opened this issue · 5 comments

Feature Proposal

add a new parameter of type disableTildePrefix and make it default to false. This won't be a critical change.
I would be happy to do a PR for it.

Feature Use Case

I need to turn off the IS_MODULE_REQUEST regular expression, currently this can only be done with the patch

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13600K
Memory: 11.38 GB / 15.51 GB
Binaries:
Node: 22.1.0 - /run/user/0/fnm_multishells/6275_1740567187202/bin/node
npm: 10.7.0 - /run/user/0/fnm_multishells/6275_1740567187202/bin/npm
pnpm: 9.15.4 - /run/user/0/fnm_multishells/6275_1740567187202/bin/pnpm
Packages:
sass-loader: ^16.0.5 => 16.0.5

Why you need this? Just don't use ~ in your CSS files, can you describe the problem more?

I have a big project and I use different prefixes (~, @, @~) in JS and Vue. Now I need to use the ~ prefix in css, but I can't do it without a patch.

Why do you use ~? It is a special character and should not used in URLs if you don't want to load something from node_modules. Why just do not use @ if you need aliases? Even we fix it here, there are a lot of other tools and places which consider that ~ is a module resolution

Why do you use ~?
Why just do not use @ if you need aliases?

I use 4 different aliases that lead to different folders. (~ !== @)
I already use the ~ symbol in hundreds of JS files, now I need to use the alias ~ in the css files, and I don't want to create another alias that is ~.

It is a special character and should not used in URLs if you don't want to load something from node_modules.

Other builders(vite for example) allow you to use ~ as an alias in css.

Even we fix it here, there are a lot of other tools and places which consider that ~ is a module resolution

I'm not sure there's really a lot of them. So far, this is the only place for me.

We can solve it without any new options, try to resolve url(~url.png) as alias and then try to resolve as a module - https://github.com/webpack-contrib/css-loader/blob/master/src/plugins/postcss-url-parser.js#L352