search

web-infra-dev / rspack

The fast Rust-based web bundler with webpack-compatible API 🦀️
https://rspack.dev
MIT License
8.04k stars 482 forks source link

[Bug]: SVG external references unofficially work with hacks #6965

Open matthiask opened 5 days ago

matthiask commented 5 days ago

System Info

System: OS: Linux 6.9 Fedora Linux 40 (Workstation Edition) CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700F @ 2.50GHz Memory: 54.33 GB / 62.62 GB Container: Yes Shell: 5.2.26 - /bin/bash Binaries: Node: 20.12.2 - /usr/bin/node Yarn: 4.3.1 - /usr/bin/yarn npm: 10.5.0 - /usr/bin/npm

Details

It's possible to use url(sprite.svg#icon-1) with rspack. rspack supports using [fragment] in assetModuleFilename even though this isn't mentioned in the module and file context docs: https://www.rspack.dev/config/output#outputassetmodulefilename

However sprite.svg won't be included in the output, but instead the output will contain files with names of sprite.svg#icon-1 (I removed the content hash). The browser strips the fragment when requesting the sprite SVG which leads to 404 errors since the file only exists including the fragment, not without.

If you do not customize assetModuleFilename then the generated CSS will not contain the fragment anymore, which breaks those uses.

Webpack shows the broken behavior too which is confusing because I remember that this has worked at some point in the past. Maybe it rings a bell?

See https://css-tricks.com/svg-use-with-external-reference-take-2/ for why you'd want something like this.

Reproduce link

https://github.com/matthiask/rspack-assetmodulefilename-fragment

Reproduce Steps

  1. pnpm run build
  2. Observe that ls -l rspack-dist/*svg* shows a file with the fragment in the filename
xc2 commented 3 days ago

background: url("compass-2.svg"#logbuch-3-1); should work though it's of invalid css syntax.