fix(optimizer): properly externalize css/asset imports in optimized deps

fix #1443
vitejs · Jan 10, 2021 · 5d180db · 5d180db
1 parent 91dbb01
commit 5d180db
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 18 deletions.
diff --git 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
@@ -0,0 +1,3 @@
+body {
+  color: red;
+}
diff --git 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
@@ -22,15 +22,15 @@ <h2>Optimizing force included dep even when it's linked</h2>
 <div class="force-include"></div>
 
 <script type="module">
-import axios from 'axios'
+  import axios from 'axios'
 
-axios.get('/ping').then(res => {
-  document.querySelector('.cjs-browser-field').textContent = res.data
-})
+  axios.get('/ping').then((res) => {
+    document.querySelector('.cjs-browser-field').textContent = res.data
+  })
 
-import { camelCase } from 'optimize-deps-linked'
-document.querySelector('.deps-linked').textContent = camelCase('foo-bar-baz')
+  import { camelCase } from 'optimize-deps-linked'
+  document.querySelector('.deps-linked').textContent = camelCase('foo-bar-baz')
 
-import { msg } from 'optimize-deps-linked-include'
-document.querySelector('.force-include').textContent = msg
+  import { msg } from 'optimize-deps-linked-include'
+  document.querySelector('.force-include').textContent = msg
 </script>
diff --git 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
@@ -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
@@ -221,7 +221,7 @@ function tryResolveFile(
   }
 }
 
-const idToPkgMap = new Map<string, PackageData>()
+export const idToPkgMap = new Map<string, PackageData>()
 
 export function tryNodeResolve(
   id: string,