Skip to content

Conversation

ia319
Copy link
Contributor

@ia319 ia319 commented Sep 26, 2025

Description

What I did?

improve CSS URL parsing and replacement logic in Vite

  • update cssUrlRE regex to fully capture URLs containing escaped characters
  • add unescape operation in doUrlReplace to remove backslashes from captured URLs
  • enhance quote-handling in doUrlReplace, automatically wrapping URLs with unescaped parentheses in quotes
  • add a test case to verify the above changes behave as expected

Testing:

  • Ran pnpm test — no errors

  • Steps to Reproduce(test code removed):

    • Added the following code in playground/html to match the issue description:

      <head>
        <meta charset="utf-8">
        <title>Vite CSS URL Bug</title>
        <style>
          p {
            background-image: url(public/awkward-name\)2.png);
          }
        </style>
      </head>
    • Ran pnpm build

    • Expected Result:
      The built output correctly handles escaped parentheses and wraps the URL in quotes:

    <head>
      <meta charset="utf-8">
      <title>Vite CSS URL Bug</title>
      <style>
        p {
          background-image: url("public/awkward-name)2.png");
        }
      </style>
    </head>```

P.S. Due to snapshot errors, ran pnpm test --update (resulting in no errors). This seems to have caused changes in js-sourcemap.spec.ts and pnpm-lock.yaml; it is unclear whether these changes are erroneous.

Fixes #20816

improve CSS URL parsing and replacement logic in Vite
- update `cssUrlRE` regex to fully capture URLs containing escaped characters
- add unescape operation in `doUrlReplace` to remove backslashes from captured URLs
- enhance quote-handling in `doUrlReplace`, automatically wrapping URLs with unescaped parentheses in quotes
- add a test case to verify the above changes behave as expected
@ia319
Copy link
Contributor Author

ia319 commented Sep 26, 2025

Reverted the changes to server-source-maps.spec.ts and the tests passed.

@bluwy bluwy changed the title fix(css.ts): improve CSS URL handling (fix #20816) fix(css): improve url escape characters handling Oct 1, 2025
bluwy
bluwy previously approved these changes Oct 2, 2025
@sapphi-red sapphi-red added feat: css p2-edge-case Bug, but has workaround or limited in scope (priority) labels Oct 2, 2025
Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@sapphi-red sapphi-red enabled auto-merge (squash) October 2, 2025 04:38
@sapphi-red sapphi-red merged commit 24a61a3 into vitejs:main Oct 2, 2025
16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: css p2-edge-case Bug, but has workaround or limited in scope (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Inline <style> url() with escaped \) is incorrectly transformed into invalid CSS
3 participants