import url from 'style.css?url' does not work

[speigg]

Describe the bug

Attempting to import a stylesheet as a url fails. This is useful for injecting a stylesheet into shadow-dom via a link tag.

Reproduction

import url from './style.css?url'

The server responds to the request for ./style.css?url with the following transpiled module:

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/style.css?url");import { updateStyle, removeStyle } from "/@vite/client"
const id = "[path]/style.css?url"
const css = "export default \"/style.css\""
updateStyle(id, css)
import.meta.hot.accept()
export default css
import.meta.hot.prune(() => removeStyle(id))

Which means that the exported value is (rather than being a URL as expected) the entire following string: export default \"/style.css\", which I can't imagine would be useful in any context.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.3
    CPU: (8) arm64 Apple M1
    Memory: 99.50 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v16.3.0/bin/yarn
    npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.101
    Edge: 91.0.864.48
    Firefox Nightly: 82.0a1
    Safari: 14.1
    Safari Technology Preview: 14.2
  npmPackages:
    @vitejs/plugin-vue: ^1.1.5 => 1.2.2 
    vite: ^2.3.7 => 2.3.7

Used package manager: npm

[sodatea]

This issue is similar to #2522 (comment)

[sapphi-red]

For bundled usecase, it is discussed in #2522.
For non-bundled usecase, it is implemented in #5796.