feat: call resolveId hooks for CSS urls

[aleclarson]

Description

Allow for references to virtual modules in CSS url(...) expressions.

---

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 Commit 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.

[patak-cat]

For reference, this PR has been discussed and approved in a team meeting. We need test cases to be able to merge. If someone wants to see this in, consider doing a PR to this branch with a test case, or sending a new PR starting from it to main

[jonathantneal]

Hey @aleclarson, I’m learning about Vite and wondering if you could help me understand the difference between resolveUrl and this.resolve. While I did not find much documentation for resolveUrl or the createResolver method that generates it, I did see that it looked a lot like what this.resolve performs.

• What is the difference between resolveUrl and this.resolve?
• Is there functionality they both do which may be duplicated with this change?
• Is there functionality they each do that the other does not?

[aleclarson]

Hi @jonathantneal

The resolveUrl function is created here:

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

Lines 124 to 128 in 3e32369

	const resolveUrl = config.createResolver({
	preferRelative: true,
	tryIndex: false,
	extensions: []
	})

It uses config.createResolver, which only uses @rollup/plugin-alias and (optinally) vite:resolve internal plugin .

vite/packages/vite/src/node/config.ts

Lines 315 to 318 in 3e32369

	(aliasContainer = await createPluginContainer({
	...resolved,
	plugins: [aliasPlugin({ entries: resolved.resolve.alias })]
	}))

vite/packages/vite/src/node/config.ts

Lines 322 to 335 in 3e32369

	(resolverContainer = await createPluginContainer({
	...resolved,
	plugins: [
	aliasPlugin({ entries: resolved.resolve.alias }),
	resolvePlugin({
	...resolved.resolve,
	root: resolvedRoot,
	isProduction,
	isBuild: command === 'build',
	asSrc: true,
	preferRelative: false,
	tryIndex: true,
	...options
	})

[jonathantneal]

Thanks, @aleclarson. Does this.resolve also use @rollup/plugin-alias and (optionally) vite:resolve? ^reference

I was curious how they differed and also learning why they differed.

[aleclarson]

I'm not clear on why config.createResolver doesn't use all plugins. I think it was originally designed for use by Vite's dependency optimizer, then used for CSS url resolution post hoc (for unknown reasons).

Does this.resolve also use @rollup/plugin-alias and (optionally) vite:resolve?

This is true, and a good point. We can probably remove the resolveUrl function altogether here, but some tests to confirm that are needed (which I don't have time to contribute).

[bluwy]

Superseded by #10555