[vite-url-rewrite] messes up image-set used with CSS vars

[qnp]

Describe the bug

While background-image: url(var(--bg-url)) is not valid and understood by browsers, the use of CSS vars in image-set is perfectly valid and working. See this codepen experiment (tested in Firefox, Chrome, Safari and Opera)¹.

When using image-set, its content is processed via internal vite plugin vite-url-rewrite.

Input:

background-image: image-set(var(--hero--image-webp) 1x, var(--hero--image-jpg) 1x);

Output:

background-image: image-set(url(var(--hero--image-webp) ) 1x, var(--hero--image-jpg) 1x);

which is messed up and not understood by browsers.

This is, I guess, related to that commit (cc @HcySunYang) which incompletely handles CSS vars.

Reproduction

https://stackblitz.com/edit/vitejs-vite-zotkr1

System Info

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 158.32 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 99.0.1
    Firefox Developer Edition: 71.0
    Firefox Nightly: 76.0a1
    Safari: 14.1.2
    Safari Technology Preview: 13.2

Used Package Manager

yarn

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 https://github.com/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.

Footnotes

1. Note that, according to can I use, it is required to use the -webkit--prefixed version for browsers other than Firefox, and the use of direct string url value (no url()) is valid only in Firefox. ↩