fix(css): .css?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?

• Bug fix
• New Feature
• Documentation update
• Other

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

• Read the Contributing Guidelines, especially the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• 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.
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

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]

📝 Ran ecosystem CI on f5106ac: Open

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

[patak-dev]

Nuxt fail seems unrelated. Awesome work @sapphi-red 💚

[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 🤷‍♂️