fix: preload css for nested dynamic imports (fix #22700)

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

@@ -369,7 +369,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin[] {
           }
 
           if (imports.length) {
-            for (let index = 0; index < imports.length; index++) {
+            // Nested preload wrappers emit inner markers before outer markers.
+            // Pair dynamic imports from the inside out so each import claims its own marker.
+            for (let index = imports.length - 1; index >= 0; index--) {
               // To handle escape sequences in specifier strings, the .n field will be provided where possible.
               const {
                 n: name,
@@ -439,6 +441,15 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin[] {
               }
 
               let markerStartPos = findPreloadMarker(code, end)
+              while (
+                markerStartPos !== -1 &&
+                rewroteMarkerStartPos.has(markerStartPos)
+              ) {
+                markerStartPos = findPreloadMarker(
+                  code,
+                  markerStartPos + preloadMarker.length,
+                )
+              }
               // fix issue #3051
               if (markerStartPos === -1 && imports.length === 1) {
                 markerStartPos = findPreloadMarker(code)

playground/dynamic-import/__tests__/dynamic-import.spec.ts

@@ -123,6 +123,37 @@ test('should load dynamic import with css in package', async () => {
   await expect.poll(() => getColor('.pkg-css')).toBe('blue')
 })
 
+test.runIf(isBuild)(
+  'should preload css for nested dynamic imports',
+  async () => {
+    const js = findAssetFile(/index-[-\w]{8}\.js$/) ?? ''
+    const innerPreload = js.match(
+      /import\([^)]*issue-22700-b-[-\w]+\.js[^)]*\)[\s\S]*?(,\[\]\)|__vite__mapDeps)/,
+    )?.[1]
+    expect(innerPreload).toBe(',[])')
+
+    await page.click('.issue-22700')
+    await expect
+      .poll(() => page.textContent('.issue-22700-result'))
+      .toMatch('nested dynamic import with css')
+    await expect
+      .poll(() =>
+        page.evaluate(() =>
+          Array.from(
+            document.querySelectorAll<HTMLLinkElement>(
+              'link[rel="stylesheet"]',
+            ),
+            (link) => link.href,
+          ).some((href) => /issue-22700-a-[-\w]+\.css$/.test(href)),
+        ),
+      )
+      .toBe(true)
+    await expect
+      .poll(() => getColor('.issue-22700-result'))
+      .toBe('rgb(12, 34, 56)')
+  },
+)
+
 test('should work with load ../ and itself directory', async () => {
   await expect
     .poll(() => page.textContent('.dynamic-import-self'))

playground/dynamic-import/index.html

@@ -9,6 +9,7 @@
 <button class="issue-2658-2">Issue 2658 - 2</button>
 <button class="css">css</button>
 <button class="pkg-css">pkg-css</button>
+<button class="issue-22700">Issue 22700</button>
 
 <p>dynamic-import-with-vars</p>
 <div class="dynamic-import-with-vars">todo</div>
@@ -39,6 +40,8 @@
 
 <div class="view"></div>
 
+<div class="issue-22700-result"></div>
+
 <div class="dynamic-import-self"></div>
 
 <div class="dynamic-import-static"></div>

playground/dynamic-import/nested/index.js

@@ -74,6 +74,15 @@ document.querySelector('.pkg-css').addEventListener('click', async () => {
   text('.view', 'dynamic import css in package')
 })
 
+document.querySelector('.issue-22700').addEventListener('click', async () => {
+  const { markerClass } = await import('./issue-22700-a.js').then((mod) => {
+    return import('./issue-22700-b.js').then(() => mod)
+  })
+  const result = document.querySelector('.issue-22700-result')
+  result.classList.add(markerClass)
+  text('.issue-22700-result', 'nested dynamic import with css')
+})
+
 function text(el, text) {
   document.querySelector(el).textContent = text
 }

playground/dynamic-import/nested/issue-22700-a.css

@@ -0,0 +1,3 @@
+.issue-22700-loaded {
+  color: rgb(12, 34, 56);
+}

playground/dynamic-import/nested/issue-22700-a.js

@@ -0,0 +1,3 @@
+import './issue-22700-a.css'
+
+export const markerClass = 'issue-22700-loaded'

playground/dynamic-import/nested/issue-22700-b.js

@@ -0,0 +1 @@
+export const msg = 'nested dynamic import with css'