【build】multi html inputs with same entry might cause missing css in the first html

[WarrenJones]

Describe the bug

my project are built with multi inputs with different html but he same entrys.
like :
us.html -> main.tsx -> App.tsx
jp.html-> main.tsx -> App.tsx
cn.html -> main.tsx -> App.tsx
App.ts-> Left.tsx-> LeftLazy.tsx
App.ts-> Left.tsx->LeftNotLazy.tsx
App.ts-> Right.tsx-> RightLazy.tsx
App.ts-> Right.tsx->RightNotLazy.tsx
test.html -> Right.tsx .

I found it occurs to happen when build with vite , jp.html and cn.html are always good,but us.html sometimes missing css.


I expect
us.html
jp.html
cn.html
they always have the same sequence of js and css list.

Reproduction

https://stackblitz.com/edit/vitejs-vite-dpuudd?file=patches%2Fvite%2B4.3.9.patch,src%2Fmain1.tsx,src%2Fmain.tsx,src%2FLeft1.tsx,index.html,vite.config.ts,src%2FApp.tsx,src%2FRight.tsx

Steps to reproduce

yarn install and yarn build.

I found that in the 'vite:build-html' plugin,It will deals with the processedHtml,the processedHtml comes from build inputs ,and if the build inputs depends on the same entry.It will generate the same chunk named after the first input name like /assets/en-us-a5167a8d.js

  // vite/packages/vite/src/node/plugins/html.ts
  // find corresponding entry chunk
        const chunk = Object.values(bundle).find(
          (chunk) =>
            chunk.type === 'chunk' &&
            chunk.isEntry &&
            chunk.facadeModuleId === id,
        ) as OutputChunk | undefined
        let canInlineEntry = false

which will be marked as canInlineEntry=false

And the css import by the chunk will be add up to the html.

  // vite/packages/vite/src/node/plugins/html.ts
      const getCssTagsForChunk = (
        chunk: OutputChunk,
        toOutputPath: (filename: string) => string,
        seen: Set<string> = new Set(),
      ): HtmlTagDescriptor[] => {
        const tags: HtmlTagDescriptor[] = []
        if (!analyzedChunk.has(chunk)) {
          analyzedChunk.set(chunk, 1)
          chunk.imports.forEach((file) => {
            const importee = bundle[file]
            if (importee?.type === 'chunk') {
              tags.push(...getCssTagsForChunk(importee, toOutputPath, seen))
            }
          })
        }

if the us.html or the canInlineEntry are not set as the first place in the processedHtml,the bug will occur and the us.html will miss the css list.

to make the bug 100% occurs I patch the vite+4.3.9 just to let the first entry placing in the end of processedHtml

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.3 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.0.3 => 4.0.3 
    vite: 4.3.9 => 4.3.9

Used Package Manager

yarn

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-dpuudd (Open reproduction)

[WarrenJones]

@sapphi-red pls help check this issue

[sapphi-red]

This is a duplicate of #13436 and is fixed in 4.4.8 by #13962.