CSS imported to JS using ?inline contain JS code for URL handling instead of actual URLs when built for production

Describe the bug

One of our project which works fine with Vite 2.x has code like

import previewHacks from './preview-hacks.css?inline';

injectGlobalCss(previewHacks.toString());

where preview-hacks.css contains

@import url('line-awesome/dist/line-awesome/css/line-awesome.min.css');

The line-awesome.min.css file contains

@font-face{
  font-family:'Line Awesome Brands';
  font-style:normal;
  font-weight:400;
  font-display:auto;
  src:url(../fonts/la-brands-400.eot);
  src:url(../fonts/la-brands-400.eot?#iefix) format("embedded-opentype"),url(../fonts/la-brands-400.woff2) format("woff2"),url(../fo
 }

With Vite 3.0.0-3.0.7 the CSS string previewHacks.toString() contains in dev mode

@font-face {
  font-family: 'Line Awesome Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("/VAADIN/@fs/path-to-project/node_modules/line-awesome/dist/line-awesome/fonts/la-brands-400.eot");

but when built for production it contains

@font-face{font-family:Line Awesome Brands;font-style:normal;font-weight:400;font-display:auto;src:url("+new URL('la-brands-400.c0e32387.eot', import.meta.url).href+");

Reproduction

Reproduces in a private Vaadin project. So far I have been unable to trigger it in a simple project. @patak-dev has access to the project though

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 8.07 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 17.9.0 - ~/.nvm/versions/node/v17.9.0/bin/node
    npm: 8.5.5 - ~/.nvm/versions/node/v17.9.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Chrome Canary: 106.0.5241.0
    Firefox: 102.0
    Safari: 15.5
  npmPackages:
    vite: ^3.0.7 => 3.0.7

Used 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.

[sapphi-red]

I think this will break if we inject new URL(foo) without wrapping with unsafeCSS. (stackblitz)

If you must use an expression in a css literal that is not itself a css literal, and you are confident that the expression is from a fully trusted source such as a constant defined in your own code, then you can wrap the expression with the unsafeCSS function: lit docs

[Artur-]

Well… I created that PR 😃