Skip to content

Commit e9e76e6

Browse files
committed
perf: avoid creating unused style elements in pending CSS queue
- Don't create style element when queueing CSS for pending dependencies - Element will be created when dependencies are ready and CSS is actually inserted - Removes unnecessary DOM element creation and garbage collection - Fixes Graphite bot review feedback
1 parent 89948cf commit e9e76e6

File tree

1 file changed

+6
-21
lines changed

1 file changed

+6
-21
lines changed

packages/vite/src/client/client.ts

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -517,10 +517,7 @@ if ('document' in globalThis) {
517517
// Track which CSS files have been successfully inserted
518518
const insertedCSS = new Set<string>()
519519
// Queue for CSS files waiting for their dependencies
520-
const pendingCSS = new Map<
521-
string,
522-
{ css: string; deps: string[]; element?: HTMLStyleElement }
523-
>()
520+
const pendingCSS = new Map<string, { css: string; deps: string[] }>()
524521

525522
/**
526523
* Track the last inserted Vite CSS for maintaining arrival order.
@@ -569,18 +566,8 @@ export function updateStyle(
569566

570567
if (!depsReady) {
571568
// Dependencies not ready - queue this CSS for later
572-
// Create the element but don't insert it yet
573-
if (!style) {
574-
style = document.createElement('style')
575-
style.setAttribute('type', 'text/css')
576-
style.setAttribute('data-vite-dev-id', id)
577-
style.textContent = content
578-
if (cspNonce) {
579-
style.setAttribute('nonce', cspNonce)
580-
}
581-
}
582-
583-
pendingCSS.set(id, { css: content, deps, element: style })
569+
// Don't create element yet - it will be created when dependencies are ready
570+
pendingCSS.set(id, { css: content, deps })
584571
return
585572
}
586573

@@ -664,15 +651,13 @@ function processPendingCSS(): void {
664651

665652
while (processedAny) {
666653
processedAny = false
667-
const toProcess: Array<
668-
[string, { css: string; deps: string[]; element?: HTMLStyleElement }]
669-
> = []
654+
const toProcess: Array<[string, { css: string; deps: string[] }]> = []
670655

671656
// Find all pending CSS whose dependencies are now satisfied
672-
for (const [id, { css, deps, element }] of pendingCSS.entries()) {
657+
for (const [id, { css, deps }] of pendingCSS.entries()) {
673658
const allDepsReady = deps.every((depId) => insertedCSS.has(depId))
674659
if (allDepsReady) {
675-
toProcess.push([id, { css, deps, element }])
660+
toProcess.push([id, { css, deps }])
676661
processedAny = true
677662
}
678663
}

0 commit comments

Comments
 (0)