LightningCSS transform, paired with data URIs, results in unescaped quotes

[rschristian]

Describe the bug

When using Lightning CSS with data URIs (SVG especially), it seems as though the data URIs are swapped out & re-inserted later, not taking potential quote changes into account. This results in in content not being escaped properly.

Take the following CSS:

.resource:after {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="black"><path d="M38 13l-3-3-11 12-11-11-3 3 11 11-11 11 3 3 11-11 11 11 3-3-11-11z"/></svg>');
}

This should exit the transform like this:

.resource:after {
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" fill=\"black\"><path d=\"M38 13l-3-3-11 12-11-11-3 3 11 11-11 11 3 3 11-11 11 11 3-3-11-11z\"/></svg>");
}

...but instead does so like this:

.resource:after{
  background: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white"><path d="M7.5 36.7h58.4v10.6H7.5V36.7zm0-15.9h58.4v10.6H7.5V20.8zm0 31.9h58.4v10.6H7.5V52.7zm0 15.9h58.4v10.6H7.5V68.6zm63.8-15.9l10.6 15.9 10.6-15.9H71.3zm21.2-5.4L81.9 31.4 71.3 47.3h21.2z"/></svg>");

If using the ESBuild minifier, users will see the following warning:

warnings when minifying css:
▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]

    <stdin>:1:68:
      1 │ ...image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48"...

...whereas the LightningCSS minifier crashes outright.

Using Lightning standalone, directly interfacing with their API, this does not occur -- quotes are escaped properly. Vite-specific issue.

---

Inserting a log statement into the transformer, I see this is the result at some point:

.resource:after{background:url("5Wx6Dq")

Hence why it seems like this is due to some swapping, but that's just my naive first impression.

Reproduction

https://stackblitz.com/edit/vitejs-vite-xyjxv4mc?file=src%2Fstyle.css

Steps to reproduce

1. npm install && npm run build
2. Observe error:

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^6.0.3 => 6.0.3 

### Used Package Manager

npm

### Logs

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vite.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] 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](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vite.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.