Expose replacing VITE_ASSET markers externally

[matthewp]

Clear and concise description of the problem

In Astro we have had to write our own CSS plugin, due to the fact that the internal vite:css-post plugin has private state that only the HTML plugin knows about.

As such, we have had to solve most of the same problems that vite:css-post solves. One problem we cannot solve, however, is replacing VITE_ASSET_hash markers that the Asset plugin adds.

Suggested solution

One idea is to expose a function from the Asset plugin that replaces all VITE_ASSET markers, like:

import { replaceAssetMarkers } from 'vite';

css = replaceAssetMarkers(config, css);

Or alternatively, expose getAssetFilename and assetUrlRE so that they can be used in the same way that the CSS plugin does:

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

Lines 391 to 402 in e6495f0

	css = css.replace(assetUrlRE, (_, fileHash, postfix = '') => {
	const filename = getAssetFilename(fileHash, config) + postfix
	registerAssetToChunk(chunk, filename)
	if (!isRelativeBase || inlined) {
	// absolute base or relative base but inlined (injected as style tag into
	// index.html) use the base as-is
	return config.base + filename
	} else {
	// relative base + extracted CSS - asset file will be in the same dir
	return `./${path.posix.basename(filename)}`
	}
	})

Alternative

No response

Additional context

The coupling of HTML, CSS, and Asset plugins has made it difficult for us to use any of them, because they each rely on private state of the other. This means that if you try and replace one, it's difficult to keep the others.

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.

[matthewp]

This is no longer needed due to the new metadata added by the asset plugin.

[patak-dev]

Related, there will be fine-grained control when replacing __VITE_ASSET__ after #8762