Inline <style> url() with escaped \) is incorrectly transformed into invalid CSS #20816
Description
Describe the bug
When an inline <style> contains an unquoted url(...) with an escaped ) (which is valid CSS syntax), Vite’s dev server transforms it into an invalid quoted form.
Input (index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vite CSS URL Bug</title>
<style>
/*
This is valid CSS: the `\)` escapes the middle paren,
but Vite will incorrectly wrap this with broken quotes
*/
p {
background-image: url(public/awkward-name\)2.png);
}
</style>
</head>
<body>
<p>Hello</p>
</body>
</html>Config file (vite.config.js):
import { defineConfig } from 'vite'
export default defineConfig({
appType: 'mpa',
server: { port: 5173 }
})Reproduction
https://stackblitz.com/edit/vitejs-vite-wdgyzxhy?file=index.html
Steps to reproduce
- Create a new folder with both
input.htmlandvite.config.jsinside (as per above) - Open your terminal,
cdinto the new folder, and run the following commands:
npm init -y
npm install vite --save-dev
npx vite
- Observe the raw HTML response returned by Vite:
curl -s http://localhost:5173/ | grep -A8 '<style>'
<style>
/*
This is valid CSS: the `\)` escapes the middle paren,
but Vite will incorrectly wrap this with broken quotes
*/
p {
background-image: url("public/awkward-name\")2.png);
}
</style>This produces invalid CSS because the URL string is quoted incorrectly around the middle (escaped) paren, and it also appends the trailing 2.png); afterwards.
What should happen
Either of these are valid and spec-compliant:
/* preserve original */
background-image: url(public/awkward-name\)2.png);
/* or proper quoted form */
background-image: url("public/awkward-name)2.png");System Info
System:
OS: macOS 26.0
CPU: (10) arm64 Apple M2 Pro
Memory: 102.13 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.15.0 - ~/.nvm/versions/node/v22.15.0/bin/node
npm: 10.9.2 - ~/.nvm/versions/node/v22.15.0/bin/npm
bun: 1.2.20 - ~/.bun/bin/bun
Browsers:
Chrome: 140.0.7339.186
Chrome Canary: 142.0.7427.0
Safari: 26.0
npmPackages:
vite: ^7.1.7 => 7.1.7Used Package Manager
npm
Logs
No response
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.