Support "?url" for js/css files

[xuld]

Description

Currently , vite will replace ?url to base64 url in production mode. If the resource is js or css file, it's better to return the url itself.

Use case:

import css from "./style.scss?url"

document.querySelector('link').href = css

Suggested solution

?url is not only for binary resources.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

it's better to return the url itself

It works even if it is a dataurl. https://stackblitz.com/edit/vitejs-vite-7qms34?terminal=dev
What is the reason here? Is it for file size? or you want to prevent inlining for other reason?

[xuld]

Firstly, when importing css files as url, the returning url should not be the raw source code of that file, but the compiled code.
Secondly, when importing css files, currently the output data uri is data:undefined;base64,... .

For example:

// a.scss
a { &:hover { color: red; } }

// a.ts
import a from "./a.css?url"
console.log(a); 

// a should be `a:hover { color: red; }`
// not `a { &:hover { color: red; } }`

I want to import a css file in an iframe:

import css from "./a.css?url";

iframe.contentDocument.querySelector('link').href = css

There is no solution currently because normally import css will inject a style tag in current document, which is not configuable.

[sapphi-red]

The first one it is a duplicate of #2522.
The second one is caused by the first one.

About .js?url, it is a duplicate of #6757.

For a workaround, this might work.

import styleText from './a.css?inline'

iframe.contentDocument.querySelector('#style').textContent = styleText