fix(build-import-analysis): should not append ?used when css request has ?url or ?raw

[sun0day]

Description

fix #11893

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.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• 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).
• Ideally, include relevant tests that fail without this PR but pass with it.

[sun0day]

Can you help review this PR @sapphi-red @bluwy

Thanks.

[sapphi-red]

I think adding ?url/?raw check here would be better as we will remove ?used in Vite 5.

vite/packages/vite/src/node/plugins/importAnalysisBuild.ts

Line 359 in f6fdc56

isCSSRequest(specifier) &&

[sun0day]

I think adding ?url/?raw check here would be better as we will remove ?used in Vite 5.

vite/packages/vite/src/node/plugins/importAnalysisBuild.ts

Line 359 in f6fdc56

isCSSRequest(specifier) &&

done

[bluwy]

I think we can use SPECIAL_QUERY_RE to check the special queries, and leave !specifier.match(/\?used(&|$)/) as is.

PS: I also tried to implement the idea I mentioned in discord last week. It's tricky since dynamic imports of css makes it harder to process it, which reminds me that I think we haven't logged the warnings for dynamic imports of CSS yet.

[sun0day]

What warnings?

[bluwy]

We have some warnings at

vite/packages/vite/src/node/plugins/importAnalysis.ts

Lines 527 to 531 in a1019f8

	colors.yellow(
	`Default and named imports from CSS files are deprecated. ` +
	`Use the ?inline query instead. ` +
	`For example: ${newImport}`,
	),

and

vite/packages/vite/src/node/plugins/importMetaGlob.ts

Lines 330 to 334 in a1019f8

	'Default import of CSS without `?inline` is deprecated. ' +
	"Add the `{ query: '?inline' }` glob option to fix this.\n" +
	`For example: \`import.meta.glob(${jsonStringifyInOneline(
	globs.length === 1 ? globs[0] : globs,
	)}, ${jsonStringifyInOneline({ ...options, query: '?inline' })})\``,

that discourages the use of default import of css, because that needs the ?used hack. I don't think it's related to this PR now though, and we can go in with this quick fix for now.

[sun0day]

Alright. Done with SPECIAL_QUERY_RE

Speaking of dynamic import CSS, is there an alternative?

[sapphi-red]

Speaking of dynamic import CSS, is there an alternative?

import('./foo.css').then(mod => mod.default) should now be replaced with import('./foo.css?inline').then(mod => mod.default). Dynamic import without using default import (import('./foo.css')) is fine.

[sapphi-red]

Thanks!