css is not being extracted for systemjs

[shir0u]

Describe the bug

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.

Reproduction

Believe this line here should include system or systemjs as well

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

Line 397 in 1809fcc

if (opts.format === 'es' || opts.format === 'cjs') {

Potentially adding to this line as well:

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

Line 456 in 1809fcc

opts.format === 'es'

• Absolutely sure that the issue is obvious and the provided information is enough to understand the problem.

A PR is available for your convenience #5902 :)
Have tested, and works as expected after applying the patch.

System Info

System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 40.56 GB / 64.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Firefox: 92.0
    Safari: 14.0
  npmPackages:
    vite:  2.7.0-beta.9

Used Package Manager

yarn

Logs

No error, just the CSS not being extracted.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Reopening beacause #5902 was reverted by #8654.

[malthoff]

I have the exact same problem. For systemjs bundle target the CSS is not created. Any chance this gets fixed?

[deadem]

How about cssCodeSplit to be cssCodeSplit?: boolean | 'extract'; instead of cssCodeSplit?: boolean?

This allows tuning code generation more precisely:

if (opts.format === 'es' || opts.format === 'cjs' || config.build.cssCodeSplit == 'extract') {