Skip to content

Commit e7b4ba3

Browse files
authored
fix(html): fix css disorder when building multiple entry html (#19143)
1 parent 3f5f2bd commit e7b4ba3

File tree

1 file changed

+48
-25
lines changed
  • packages/vite/src/node/plugins

1 file changed

+48
-25
lines changed

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

+48-25
Original file line numberDiff line numberDiff line change
@@ -717,7 +717,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
717717
},
718718

719719
async generateBundle(options, bundle) {
720-
const analyzedChunk = new Map<OutputChunk, number>()
720+
const analyzedImportedCssFiles = new Map<OutputChunk, string[]>()
721721
const inlineEntryChunk = new Set<string>()
722722
const getImportedChunks = (
723723
chunk: OutputChunk,
@@ -777,39 +777,62 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
777777
},
778778
})
779779

780-
const getCssTagsForChunk = (
781-
chunk: OutputChunk,
780+
const toStyleSheetLinkTag = (
781+
file: string,
782782
toOutputPath: (filename: string) => string,
783-
seen: Set<string> = new Set(),
784-
): HtmlTagDescriptor[] => {
785-
const tags: HtmlTagDescriptor[] = []
786-
if (!analyzedChunk.has(chunk)) {
787-
analyzedChunk.set(chunk, 1)
788-
chunk.imports.forEach((file) => {
789-
const importee = bundle[file]
790-
if (importee?.type === 'chunk') {
791-
tags.push(...getCssTagsForChunk(importee, toOutputPath, seen))
792-
}
793-
})
783+
): HtmlTagDescriptor => ({
784+
tag: 'link',
785+
attrs: {
786+
rel: 'stylesheet',
787+
crossorigin: true,
788+
href: toOutputPath(file),
789+
},
790+
})
791+
792+
const getCssFilesForChunk = (
793+
chunk: OutputChunk,
794+
seenChunks: Set<string> = new Set(),
795+
seenCss: Set<string> = new Set(),
796+
): string[] => {
797+
if (seenChunks.has(chunk.fileName)) {
798+
return []
799+
}
800+
seenChunks.add(chunk.fileName)
801+
802+
if (analyzedImportedCssFiles.has(chunk)) {
803+
const files = analyzedImportedCssFiles.get(chunk)!
804+
const additionals = files.filter((file) => !seenCss.has(file))
805+
additionals.forEach((file) => seenCss.add(file))
806+
return additionals
794807
}
795808

809+
const files: string[] = []
810+
chunk.imports.forEach((file) => {
811+
const importee = bundle[file]
812+
if (importee?.type === 'chunk') {
813+
files.push(...getCssFilesForChunk(importee, seenChunks, seenCss))
814+
}
815+
})
816+
analyzedImportedCssFiles.set(chunk, files)
817+
796818
chunk.viteMetadata!.importedCss.forEach((file) => {
797-
if (!seen.has(file)) {
798-
seen.add(file)
799-
tags.push({
800-
tag: 'link',
801-
attrs: {
802-
rel: 'stylesheet',
803-
crossorigin: true,
804-
href: toOutputPath(file),
805-
},
806-
})
819+
if (!seenCss.has(file)) {
820+
seenCss.add(file)
821+
files.push(file)
807822
}
808823
})
809824

810-
return tags
825+
return files
811826
}
812827

828+
const getCssTagsForChunk = (
829+
chunk: OutputChunk,
830+
toOutputPath: (filename: string) => string,
831+
) =>
832+
getCssFilesForChunk(chunk).map((file) =>
833+
toStyleSheetLinkTag(file, toOutputPath),
834+
)
835+
813836
for (const [normalizedId, html] of processedHtml(this)) {
814837
const relativeUrlPath = normalizePath(
815838
path.relative(config.root, normalizedId),

0 commit comments

Comments
 (0)