[Vite CSS] css not loaded when build.cssCodeSplit: true and build.modulePreload: false

[AngusFu]

Describe the bug

According to the vite official site, when build.cssCodeSplit is "enabled, CSS imported in async chunks will be inlined into the async chunk itself and inserted when the chunk is loaded".

Throughout the whole site, I just can't find any relation between build.modulePreload and build.cssCodeSplit.

However, when build.modulePreload: false and build.cssCodeSplit: true are set, I find that the async css chunk is not "inlined into the async chunk itself", let alone loaded.

BTW, with the command grep -nr ${HASH_OF_CSS_CHUNK} ./dist I found no match in those generated assets.

My vite config is:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    minify: false,
    cssCodeSplit: true,
    modulePreload: false,
  },
});

Reproduction

https://stackblitz.com/edit/vitejs-vite-qz7uvm?file=vite.config.js

Steps to reproduce

Open stackblitz.com and just run npm run build in the command line.

System Info

vite/4.1.4 linux-x64 node-v16.14.2

Used Package Manager

npm

Logs

No response

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 vuejs/core 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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-qz7uvm (Open reproduction)

[fi3ework]

duplicated with #10773