Importing a CSS into JS leaves __VITE_ASSET__ in the JS file in a production build

[Artur-]

Describe the bug

When importing CSS like

import styles from  './style.css?inline'

then assets like

@font-face {
  src: url("../fonts/la-solid-900.eot");

are extracted to files and the original URL is replaced by __VITE_ASSET_<hash>__. In CSS files this seems to be replaced to the proper asset during build but in JS files, the tag remains in the final bundle.

The font face then obviously does not work.

Reproduction

git clone https://github.com/Artur-/vite-vaadin-problem4
cd vite-vaadin-problem4
npm i 
npm run build
grep __VITE_ASSET_ -R dist

System Info

System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 225.25 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
    Watchman: 2021.10.04.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 93.1.29.81
    Chrome: 95.0.4638.69
    Chrome Canary: 98.0.4696.0
    Firefox: 93.0
    Safari: 15.1
    Safari Technology Preview: 15.4
  npmPackages:
    vite: ^2.6.4 => 2.6.13

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