Output .css file for styles instead of js strings

[antoniave]

Currently we are embedding the final styles for an application as a JavaScript string, i.e. const styles = "..." which is then loaded into a <style> tag.

This is triggered in our vite plugin, where we import the 'combined' css using the &inline query parameter, which prompts vite to return a raw css string to us (see https://github.com/open-pioneer/build-tools/blob/10112f6dfe15361e68fb48633d322b356fc20e7d/packages/vite-plugin/src/codegen/generateAppMetadata.ts#LL28C5-L29C88).

This approach has a number of disadvantages:

• The built css is included in a JavaScript chunk, making editing unnecessarily hard
• It worsens the developer experience (no source maps, no "jump to definition")

The &inline should be replaced by an &url, which would trigger vite to emit a .css asset and return its URL, not its content.

However, this was (and probably is still) blocked by https://github.com/vitejs/vite/issues/2522 (context: our topmost css "entry point" uses SCSS to support both SCSS and CSS). There is an open pull request but there has been no progress for some time.

[mbeckem]

Should be doable now with vite >= 5