[Bug]: SVG external references unofficially work with hacks

[matthiask]

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]

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!