fix(css): dynamic import css in package fetches removed js (fixes #7955…

…, #6823) (#7969)

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

@@ -1,4 +1,4 @@
-import { isBuild, untilUpdated } from '../../testUtils'
+import { getColor, isBuild, untilUpdated } from '../../testUtils'
 
 test('should load literal dynamic import', async () => {
   await page.click('.baz')
@@ -59,3 +59,8 @@ test('should load dynamic import with css', async () => {
     true
   )
 })
+
+test('should load dynamic import with css in package', async () => {
+  await page.click('.pkg-css')
+  await untilUpdated(() => getColor('.pkg-css'), 'blue', true)
+})

packages/playground/dynamic-import/index.html

@@ -8,6 +8,7 @@
 <button class="issue-2658-1">Issue 2658 - 1</button>
 <button class="issue-2658-2">Issue 2658 - 2</button>
 <button class="css">css</button>
+<button class="pkg-css">pkg-css</button>
 
 <div class="view"></div>
 

packages/playground/dynamic-import/nested/deps.js

@@ -0,0 +1,3 @@
+/* don't include dynamic import inside this file */
+
+import 'pkg'

packages/playground/dynamic-import/nested/index.js

@@ -70,6 +70,11 @@ document.querySelector('.css').addEventListener('click', async () => {
   text('.view', 'dynamic import css')
 })
 
+document.querySelector('.pkg-css').addEventListener('click', async () => {
+  await import('./deps')
+  text('.view', 'dynamic import css in package')
+})
+
 function text(el, text) {
   document.querySelector(el).textContent = text
 }

packages/playground/dynamic-import/package.json

@@ -6,6 +6,10 @@
     "dev": "vite",
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "postinstall": "ts-node ../../../scripts/patchFileDeps.ts"
+  },
+  "dependencies": {
+    "pkg": "file:./pkg"
   }
 }

packages/playground/dynamic-import/pkg/index.js

@@ -0,0 +1 @@
+import('./pkg.css')

packages/playground/dynamic-import/pkg/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "pkg",
+  "type": "module",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js"
+}

packages/playground/dynamic-import/pkg/pkg.css

@@ -0,0 +1,3 @@
+.pkg-css {
+  color: blue;
+}

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

@@ -24,6 +24,8 @@ export const preloadBaseMarker = `__VITE_PRELOAD_BASE__`
 const preloadHelperId = 'vite/preload-helper'
 const preloadMarkerWithQuote = `"${preloadMarker}"` as const
 
+const dynamicImportPrefixRE = /import\s*\(/
+
 /**
  * Helper for preloading CSS and direct imports of async chunks in parallel to
  * the async chunk itself.
@@ -118,7 +120,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
     async transform(source, importer) {
       if (
         importer.includes('node_modules') &&
-        !source.includes('import.meta.glob')
+        !source.includes('import.meta.glob') &&
+        !dynamicImportPrefixRE.test(source)
       ) {
         return
       }