Allow opting-out of loading specific dynamic component css

Describe the problem

When using dynamically imported components as suggested in this thread, css of all dynamically imported components is loaded.

Here's a link to the example repo and here it is deployed. On Foo page it renders two components so it is ok to load css bundles of all dynamically imported components. On Bar and Baz only one of the components is rendered but both css bundles are loaded.

Describe the proposed solution

I recognize that for the majority setups loading all css upfront is desired. Thus, I would like to propose a solution that does not change the default behaviour of SvelteKit and instead extends its api to give users a bit more control over css loading.

I suggest to add an additional function to handle server hook, similar to preload, that would be used to determine what files to should be loaded on the page. Example:

export async function handle({ event, resolve }) {
	const response = await resolve(event, {
		load: ({ type, path }) => type === 'css' || path.includes('/important/')
	});

	return response;
}

I implemented a draft PR for this functionality and would be happy to continue working on it if the suggested solution makes sense to SvelteKit's maintainers.

Alternatives considered

No response

Importance

i cannot use SvelteKit without it

Additional Information

No response

Start by reviewing the linked example repository and draft PR, then inspect the handle hook and resolve API described in the issue. Done means users can opt out of loading selected dynamic component CSS while preserving the default behavior for existing setups.