fix(css): dynamic import css abnormal after build (#3333)

* fix(css): dynamic import css abnormal after build * fix(css): dynamic import css abnormal after build * fix: dynamicIndex * fix: typo & clear removedPureCssFiles in buildStart * fix: depend on the resolved config * fix: assert Co-authored-by: patak <matias.capeletto@gmail.com> * fix: assert Co-authored-by: patak <matias.capeletto@gmail.com> Co-authored-by: patak <matias.capeletto@gmail.com>
vitejs · Aug 16, 2021 · b572f57 · b572f57
1 parent dbfd931
commit b572f57
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 3 deletions.
diff --git a/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts b/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts
@@ -45,3 +45,13 @@ test('should load dynamic import with vars', async () => {
   await page.click('.bar')
   await untilUpdated(() => page.textContent('.view'), 'Bar view', true)
 })
+
+// dynamic import css
+test('should load dynamic import with css', async () => {
+  await page.click('.css')
+  await untilUpdated(
+    () => page.$eval('.css', (node) => window.getComputedStyle(node).boxSizing),
+    'border-box',
+    true
+  )
+})
diff --git a/packages/playground/dynamic-import/css/index.css b/packages/playground/dynamic-import/css/index.css
@@ -0,0 +1,2 @@
+.css { box-sizing: border-box; }
+.view { color: red; }
diff --git a/packages/playground/dynamic-import/index.html b/packages/playground/dynamic-import/index.html
@@ -7,6 +7,7 @@
 <button class="mxdjson">Mxdjson</button>
 <button class="issue-2658-1">Issue 2658 - 1</button>
 <button class="issue-2658-2">Issue 2658 - 2</button>
+<button class="css">css</button>
 
 <div class="view"></div>
 

diff --git a/packages/playground/dynamic-import/nested/index.js b/packages/playground/dynamic-import/nested/index.js
@@ -65,6 +65,11 @@ document.querySelector('.issue-2658-2').addEventListener('click', async () => {
   text('.view', msg)
 })
 
+document.querySelector('.css').addEventListener('click', async () => {
+  await import('../css/index.css')
+  text('.view', 'dynamic import css')
+})
+
 function text(el, text) {
   document.querySelector(el).textContent = text
 }
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -120,6 +120,11 @@ export const chunkToEmittedCssFileMap = new WeakMap<
   Set<string>
 >()
 
+export const removedPureCssFilesCache = new WeakMap<
+  ResolvedConfig,
+  Map<string, RenderedChunk>
+>()
+
 const postcssConfigCache = new WeakMap<
   ResolvedConfig,
   PostCSSConfigResult | null
@@ -150,6 +155,8 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
       // Ensure a new cache for every build (i.e. rebuilding in watch mode)
       moduleCache = new Map<string, Record<string, string>>()
       cssModulesCache.set(config, moduleCache)
+
+      removedPureCssFilesCache.set(config, new Map<string, RenderedChunk>())
     },
 
     async transform(raw, id) {
@@ -471,7 +478,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             )
           }
         }
+        const removedPureCssFiles = removedPureCssFilesCache.get(config)!
         pureCssChunks.forEach((fileName) => {
+          removedPureCssFiles.set(fileName, bundle[fileName] as RenderedChunk)
           delete bundle[fileName]
         })
       }

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -4,7 +4,7 @@ import { Plugin } from '../plugin'
 import MagicString from 'magic-string'
 import { ImportSpecifier, init, parse as parseImports } from 'es-module-lexer'
 import { OutputChunk } from 'rollup'
-import { chunkToEmittedCssFileMap } from './css'
+import { chunkToEmittedCssFileMap, removedPureCssFilesCache } from './css'
 import { transformImportGlob } from '../importGlob'
 
 /**
@@ -232,10 +232,11 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           if (imports.length) {
             const s = new MagicString(code)
             for (let index = 0; index < imports.length; index++) {
-              const { s: start, e: end } = imports[index]
+              const { s: start, e: end, d: dynamicIndex } = imports[index]
               // check the chunk being imported
               const url = code.slice(start, end)
               const deps: Set<string> = new Set()
+              let hasRemovedPureCssChunk = false
 
               if (url[0] === `"` && url[url.length - 1] === `"`) {
                 const ownerFilename = chunk.fileName
@@ -255,6 +256,21 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                       })
                     }
                     chunk.imports.forEach(addDeps)
+                  } else {
+                    const removedPureCssFiles =
+                      removedPureCssFilesCache.get(config)!
+                    const chunk = removedPureCssFiles.get(filename)
+                    if (chunk) {
+                      const cssFiles = chunkToEmittedCssFileMap.get(chunk)
+                      if (cssFiles && cssFiles.size > 0) {
+                        cssFiles.forEach((file) => {
+                          deps.add(config.base + file)
+                        })
+                        hasRemovedPureCssChunk = true
+                      }
+
+                      s.overwrite(dynamicIndex, end + 1, 'Promise.resolve({})')
+                    }
                   }
                 }
                 const normalizedFile = path.posix.join(
@@ -276,7 +292,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   markPos + preloadMarker.length + 1,
                   // the dep list includes the main chunk, so only need to
                   // preload when there are actual other deps.
-                  deps.size > 1
+                  deps.size > 1 ||
+                    // main chunk is removed
+                    (hasRemovedPureCssChunk && deps.size > 0)
                     ? `[${[...deps].map((d) => JSON.stringify(d)).join(',')}]`
                     : `[]`
                 )