fix(html): fix css disorder when building multiple entry html

[thy486]

Description

When Vite collects css tags, it will cache the analyzed css chunk. But when collecting css tags for the second time, since the css chunk has been cached, Vite will no longer analyze the deep import, which will ignore the results of the previous import, causing the css to be out of order.

[sapphi-red]

Would you create a reproduction so that I can understand when this happens?

[thy486]

Would you create a reproduction so that I can understand when this happens?

Reproduction

https://stackblitz.com/edit/vitejs-vite-f9kv8tr4

The meaning of parentImports is: It is passed in by the parent importer and is used to collect the css used by imported modules and itself

[thy486]

But there may be a problem here. If it is the previous logic, when encountering a module introduced in a loop, the css tag of the module will be generated first.

[sapphi-red]

I think that is fine. Actually I think it's more a bug fix as it will align with this code:

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

Lines 536 to 566 in 71506f0

	const addDeps = (filename: string) => {
	if (filename === ownerFilename) return
	if (analyzed.has(filename)) return
	analyzed.add(filename)
	const chunk = bundle[filename]
	if (chunk) {
	deps.add(chunk.fileName)
	if (chunk.type === 'chunk') {
	chunk.imports.forEach(addDeps)
	// Ensure that the css imported by current chunk is loaded after the dependencies.
	// So the style of current chunk won't be overwritten unexpectedly.
	chunk.viteMetadata!.importedCss.forEach((file) => {
	deps.add(file)
	})
	}
	} else {
	const removedPureCssFiles =
	removedPureCssFilesCache.get(config)!
	const chunk = removedPureCssFiles.get(filename)
	if (chunk) {
	if (chunk.viteMetadata!.importedCss.size) {
	chunk.viteMetadata!.importedCss.forEach((file) => {
	deps.add(file)
	})
	hasRemovedPureCssChunk = true
	}
	s.update(expStart, expEnd, 'Promise.resolve({})')
	}
	}
	}

[sapphi-red]

Thanks for the reproduction.

[sapphi-red]

I think splitting the function into 3 like this will make the function more easier to understand

const toStyleSheetLinkTag = (
  file: string,
  toOutputPath: (filename: string) => string,
): HtmlTagDescriptor => ({
  tag: 'link',
  attrs: {
    rel: 'stylesheet',
    crossorigin: true,
    href: toOutputPath(file),
  },
})

const getCssFilesForChunk = (
  chunk: OutputChunk,
  seenChunks: Set<string> = new Set(),
  seenCss: Set<string> = new Set(),
): string[] => {
  if (seenChunks.has(chunk.fileName)) {
    return []
  }
  seenChunks.add(chunk.fileName)

  if (analyzedChunk.has(chunk)) {
    return analyzedChunk.get(chunk)!
  }

  const files: string[] = []
  chunk.imports.forEach((file) => {
    const importee = bundle[file]
    if (importee?.type === 'chunk') {
      files.push(...getCssFilesForChunk(importee, seenChunks, seenCss))
    }
  })
  analyzedChunk.set(chunk, files)

  chunk.viteMetadata!.importedCss.forEach((file) => {
    if (!seenCss.has(file)) {
      seenCss.add(file)
      files.push(file)
    }
  })

  return files
}

const getCssTagsForChunk = (
  chunk: OutputChunk,
  toOutputPath: (filename: string) => string,
) =>
  getCssFilesForChunk(chunk).map((file) =>
    toStyleSheetLinkTag(file, toOutputPath),
  )

I think analyzedChunk should be renamed to analyzedImportedCssFiles in this case.