diff --git a/packages/playground/optimize-deps-linked-include/index.js b/packages/playground/optimize-deps-linked-include/index.js
index 74c1e295715f63..508a908abefa6a 100644
--- a/packages/playground/optimize-deps-linked-include/index.js
+++ b/packages/playground/optimize-deps-linked-include/index.js
@@ -5,3 +5,6 @@ import { useState } from 'react'
export function useCount() {
return useState(0)
}
+
+// test dep with css/asset imports
+import './test.css'
diff --git a/packages/playground/optimize-deps-linked-include/test.css b/packages/playground/optimize-deps-linked-include/test.css
new file mode 100644
index 00000000000000..b719c608467fdd
--- /dev/null
+++ b/packages/playground/optimize-deps-linked-include/test.css
@@ -0,0 +1,3 @@
+body {
+ color: red;
+}
\ No newline at end of file
diff --git a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
index f7616fb9d6be71..9623590c007b7b 100644
--- a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
+++ b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
@@ -1,3 +1,5 @@
+import { getColor } from '../../testUtils'
+
test('default + named imports from cjs dep (react)', async () => {
expect(await page.textContent('.cjs button')).toBe('count is 0')
await page.click('.cjs button')
@@ -27,3 +29,7 @@ test('dep from linked dep (lodash-es)', async () => {
test('forced include', async () => {
expect(await page.textContent('.force-include')).toMatch(`[success]`)
})
+
+test('dep with css import', async () => {
+ expect(await getColor('h1')).toBe('red')
+})
diff --git a/packages/playground/optimize-deps/index.html b/packages/playground/optimize-deps/index.html
index d79167fa82bf80..7e881b1daeabab 100644
--- a/packages/playground/optimize-deps/index.html
+++ b/packages/playground/optimize-deps/index.html
@@ -22,15 +22,15 @@
Optimizing force included dep even when it's linked
diff --git a/packages/vite/src/node/optimizer/depAssetPlugin.ts b/packages/vite/src/node/optimizer/depAssetPlugin.ts
index 3922a204387f6d..e3b21d42c71b83 100644
--- a/packages/vite/src/node/optimizer/depAssetPlugin.ts
+++ b/packages/vite/src/node/optimizer/depAssetPlugin.ts
@@ -3,8 +3,9 @@ import { Plugin } from 'rollup'
import { init, parse } from 'es-module-lexer'
import { isCSSRequest } from '../plugins/css'
import MagicString from 'magic-string'
-import { bareImportRE, normalizePath, resolveFrom } from '../utils'
+import { normalizePath } from '../utils'
import { ResolvedConfig } from '../config'
+import { idToPkgMap } from '../plugins/resolve'
export const depAssetExternalPlugin = (config: ResolvedConfig): Plugin => ({
name: 'vite:dep-assets-external',
@@ -47,12 +48,17 @@ export const depAssetRewritePlugin = (config: ResolvedConfig): Plugin => {
s.remove(statementStart, statementEnd)
continue
}
- const deepPath = `/@fs/${normalizePath(
- bareImportRE.test(importee)
- ? resolveFrom(config.root, importee)
- : path.resolve(path.dirname(id), importee)
- )}`
- s.overwrite(start, end, deepPath)
+ if (importee.startsWith('.')) {
+ const pkg = idToPkgMap.get(id)
+ if (pkg) {
+ const fsPath = path.resolve(path.dirname(id), importee)
+ const deepPath =
+ pkg.data.name +
+ '/' +
+ normalizePath(path.relative(pkg.dir, fsPath))
+ s.overwrite(start, end, deepPath)
+ }
+ }
}
} else {
// ignore dynamic import
diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts
index 195d031605b65a..380f88bfda4310 100644
--- a/packages/vite/src/node/optimizer/index.ts
+++ b/packages/vite/src/node/optimizer/index.ts
@@ -326,12 +326,12 @@ async function resolveQualifiedDeps(
if (i.startsWith('.')) {
debug(`optimizing ${id} (contains relative imports)`)
qualified[id] = filePath
- continue
+ break
}
if (!deps.includes(i)) {
debug(`optimizing ${id} (imports sub dependencies)`)
qualified[id] = filePath
- continue
+ break
}
}
debug(`skipping ${id} (single esm file, doesn't need optimization)`)
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index a092b0600446ec..c9c8956bc05a67 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -221,7 +221,7 @@ function tryResolveFile(
}
}
-const idToPkgMap = new Map()
+export const idToPkgMap = new Map()
export function tryNodeResolve(
id: string,