fix(css): `.css?url`/`.css?raw&url` support

[sapphi-red]

Description

• .css?url now returns a URL to transformed CSS
  • before, it was returning a URL to transformed CSS in dev, and to raw CSS after build
• .css?raw&url now returns a URL to raw CSS
  • note that .css?raw returns a JS module (export default ".foo {}") but .css?raw&url returns a URL to CSS file (.foo {})
• .module.css?url now throws an error
  • this was never useful because there's no way to get the class name map ({ 'foo': 'foo_hash' }) without injecting the actual CSS

fixes #2522 fixes #7842 fixes #13416

Additional context

---

What is the purpose of this pull request?

• [x] Bug fix
• [ ] New Feature
• [ ] Documentation update
• [ ] Other

Before submitting the PR, please make sure you do the following

• [x] Read the Contributing Guidelines, especially the Pull Request Guidelines.
• [x] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• [x] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• [ ] Update the corresponding documentation if needed.
• [x] Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[bluwy]

• .css?raw&url now returns a URL to raw CSS

Is there a reason this is supported? I can't quite think of a case where a user would use this, using plain .css?raw and maybe manualChunks should be good enough. Was it for compat for .css?url in prod before?

[sapphi-red]

• .css?raw&url now returns a URL to raw CSS

Is there a reason this is supported? I can't quite think of a case where a user would use this, using plain .css?raw and maybe manualChunks should be good enough. Was it for compat for .css?url in prod before?

I added it for compat for .css?url in prod before. I'm fine removing it.

[sapphi-red]

In the last meeting, we discussed that we should add ?raw&url after we find a use case.

---

I removed the ?raw&url feature and rebased on main branch.

[patak-dev]

/ecosystem-ci run

[vite-ecosystem-ci[bot]]

📝 Ran ecosystem CI on f5106ac: Open

suite	result	latest scheduled
analogjs	:white_check_mark: success	:white_check_mark: success
astro	:white_check_mark: success	:white_check_mark: success
histoire	:x: failure	:x: failure
ladle	:white_check_mark: success	:white_check_mark: success
laravel	:x: failure	:x: failure
marko	:white_check_mark: success	:white_check_mark: success
nuxt	:white_check_mark: success	:x: failure
nx	:white_check_mark: success	:white_check_mark: success
previewjs	:white_check_mark: success	:white_check_mark: success
qwik	:white_check_mark: success	:white_check_mark: success
rakkas	:white_check_mark: success	:white_check_mark: success
sveltekit	:white_check_mark: success	:white_check_mark: success
unocss	:x: failure	:x: failure
vike	:x: failure	:x: failure
vite-plugin-pwa	:white_check_mark: success	:white_check_mark: success
vite-plugin-react	:white_check_mark: success	:white_check_mark: success
vite-plugin-react-pages	:white_check_mark: success	:white_check_mark: success
vite-plugin-react-swc	:white_check_mark: success	:white_check_mark: success
vite-plugin-svelte	:x: failure	:x: failure
vite-plugin-vue	:white_check_mark: success	:white_check_mark: success
vite-setup-catalogue	:white_check_mark: success	:white_check_mark: success
vitepress	:x: failure	:x: failure
vitest	:white_check_mark: success	:white_check_mark: success

[josephmarkus]

There appears to be a similar issue with SCSS. Say I have:

import selectStyles from "somePackage/Select.scss?inline";

export const Theme = () => <style>{selectStyles}</style>;

And that Select.scss has

:root,
:host {
  --select-icon: url("./chevron.svg");
}

.selectStyles {
  background-image: var(--select-icon);
}

Vite thinks that ./chevron.svg is relative to the app and not node_modules and so tries to resolve it by looking up /assets/chevron.svg

[patak-dev]

Hey @josephmarkus! Your comment in this merged PR will be quickly lost in the repo activity. Would you create a new issue with a minimal reproduction against the latest Vite so we can properly track the problem you are reporting?

[josephmarkus]

Was just filling in a bug report and whilst reproducing the error realised that my SCSS file imports another SCSS file, but if I target the end file directly, Vite resolves everything fine, so maybe not an issue 🤷‍♂️