SVG content not URL encoded when using dataurl loader
- Dominant language
- Go
- Stars
- 40.1k
- Forks
- 1.3k
- PR merge metrics
- No merged PRs in 30d
Description
## Description:
I'm encountering an issue with esbuild when using the dataurl loader for SVG files. The SVG content is not URL encoded, which leads to bugs in certain cases.
## Steps to Reproduce:
Use dataurl loader for an SVG file in esbuild.
Use the output as the parameter of a CSS `url()` function without quotes.
## Expected Behavior:
The SVG content should be URL encoded to ensure it works correctly in all use cases.
## Actual Behavior:
The SVG content is not URL encoded, causing bugs when used as a parameter in the CSS url function without quotes.
## Example
You can find the exmpale on the [playground](https://esbuild.github.io/try/#dAAwLjI0LjIALS1sb2FkZXI9ZGF0YXVybAA8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiPgo8cGF0aCBkPSJNMi41ODg1OSAyLjcxNTY5TDIuNjQ2NDUgMi42NDY0NUMyLjgyMDAxIDIuNDcyODggMy4wODk0NCAyLjQ1MzYgMy4yODQzMSAyLjU4ODU5TDMuMzUzNTUgMi42NDY0NUw4IDcuMjkzTDEyLjY0NjQgMi42NDY0NUMxMi44NDE3IDIuNDUxMTggMTMuMTU4MyAyLjQ1MTE4IDEzLjM1MzYgMi42NDY0NUMxMy41NDg4IDIuODQxNzEgMTMuNTQ4OCAzLjE1ODI5IDEzLjM1MzYgMy4zNTM1NUw4LjcwNyA4TDEzLjM1MzYgMTIuNjQ2NEMxMy41MjcxIDEyLjgyIDEzLjU0NjQgMTMuMDg5NCAxMy40MTE0IDEzLjI4NDNMMTMuMzUzNiAxMy4zNTM2QzEzLjE4IDEzLjUyNzEgMTIuOTEwNiAxMy41NDY0IDEyLjcxNTcgMTMuNDExNEwxMi42NDY0IDEzLjM1MzZMOCA4LjcwN0wzLjM1MzU1IDEzLjM1MzZDMy4xNTgyOSAxMy41NDg4IDIuODQxNzEgMTMuNTQ4OCAyLjY0NjQ1IDEzLjM1MzZDMi40NTExOCAxMy4xNTgzIDIuNDUxMTggMTIuODQxNyAyLjY0NjQ1IDEyLjY0NjRMNy4yOTMgOEwyLjY0NjQ1IDMuMzUzNTVDMi40NzI4OCAzLjE3OTk5IDIuNDUzNiAyLjkxMDU2IDIuNTg4NTkgMi43MTU2OUwyLjY0NjQ1IDIuNjQ2NDVMMi41ODg1OSAyLjcxNTY5WiIgZmlsbD0iI0REMDA1RCIvPgo8L3N2Zz4)
If we use the output as the following way, it will cause a bug and the background image will not show correctly.
```js
import bg from "./bg.svg"
// the following code will not work.
document.body.style.backgroundImage = `url(${bg})`;
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the SVG dataurl loader case from the linked playground, then inspect the loader path that generates the SVG data URL. Verify the result when used in an unquoted CSS url() value, and consider the issue done when that background image renders correctly without quotes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, go, javascript
- Domain
- build-system, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100