fix: allow css to be written for systemjs output

[shir0u]

Description

According to https://vitejs.dev/guide/features.html#css-code-splitting

Vite automatically extracts the CSS used by modules in an async chunk and generates a separate file for it. The CSS file is automatically loaded via a tag when the associated async chunk is loaded, and the async chunk is guaranteed to only be evaluated after the CSS is loaded to avoid FOUC.

However, when building to systemjs output, this feature seems to be ignored. This PR fixes #5901

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

[Shinigami92]

@patak-js is this wanted?

[shir0u]

Hi @Shinigami92 @patak-dev

Really appreciate your time and please consider merging this PR, I strongly believe it's not a matter of "wanted" or not. It is actually a missing feature as it should work as stated from the docs description:

Vite automatically extracts the CSS used by modules in an async chunk and generates a separate file for it. The CSS file is automatically loaded via a tag when the associated async chunk is loaded, and the async chunk is guaranteed to only be evaluated after the CSS is loaded to avoid FOUC.

If people don't want it, they can use the already available cssCodeSplit option as intended. Looking forward to your response. Many thanks.

[shir0u]

Sorry for keep pushing @Shinigami92 @patak-dev

But we really need this merged, appreciate your time if you can facilitate the merge and release that would be ideal, otherwise, if you can respond with a reason for the rejection would also be appreciated and what we can do or change to make it fit with your envision. Many thanks.

[Shinigami92]

I think it's not a thing of approve or reject, but current capacity of vite team over the winter holidays.
I will bring it to @patak-dev cause I cannot approve it without his answer on my question.

[patak-dev]

Hey @shir0u, sorry for the delay, we missed this one in our previous team meeting. I don't know why system wasn't included here, we'll discuss it in the next meeting. If this PR is blocking you, I recommend that you vendor or fork Vite until this gets resolved upstream.

[shir0u]

Thanks @patak-dev I've created a fork already on npm which is fine for now, but needs to rebase every now and then. Was wondering if you guys had your meeting yet?

[patak-dev]

@shir0u we talked about the PR in our last team meeting, and we are good to go if we can test before that it doesn't break plugin-legacy. Would it be possible to add a test for dynamic CSS chuncks in legacy playground so we make sure that there won't be a regression?

[shir0u]

Hi @patak-dev this current PR has passed all current tests, as for adding new tests, looks like it's beyond my expertise, would you or your team be able to give me a hand with this? Many thanks, much appreciated.

[shir0u]

Hi @patak-dev I have attempted to add that dynamic CSS config, not sure where else to do it. Please let me know if I am missing something. Thanks. Very keen to get this merged as soon as possible.

[shir0u]

Hi @patak-dev have rebased and all tests seem to have passed. Please review at your earliest convenience. Many thanks.

[sapphi-red]

This PR broke plugin-legacy (#8243).
If I change build.cssCodeSplit to true in playground\legacy\vite.config.js, tests fails.

Also does this PR work as intended?
If I set build.rollupOptions.output.format to 'systemjs', import points to the pure css dynamic imported module which is removed from dist.
https://stackblitz.com/edit/vitejs-vite-gwpbea?terminal=dev

[sapphi-red]

Looks like this PR works with build.cssCodeSplit=false but not with true.
But this PR only changes code around build.cssCodeSplit=true. 🤔