feat: recalculate import graph when import change

vitejs · Jun 1, 2020 · 65afca8 · 65afca8
1 parent fd275b1
commit 65afca8
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 18 deletions.
diff --git a/src/node/server/serverPluginCss.ts b/src/node/server/serverPluginCss.ts
@@ -7,9 +7,10 @@ import { srcImportMap, vueCache } from './serverPluginVue'
 import {
   codegenCss,
   compileCss,
-  cssImportMap,
+  cssImporterMap,
   cssPreprocessLangRE,
   getCssImportBoundaries,
+  recordCssImportChain,
   rewriteCssUrls
 } from '../utils/cssUtils'
 import qs from 'querystring'
@@ -58,7 +59,7 @@ export const cssPlugin: ServerPlugin = ({ root, app, watcher, resolver }) => {
 
       /** filter unused files */
       if (
-        !cssImportMap.has(filePath) &&
+        !cssImporterMap.has(filePath) &&
         !processedCSS.has(publicPath) &&
         !srcImportMap.has(filePath)
       ) {
@@ -129,10 +130,11 @@ export const cssPlugin: ServerPlugin = ({ root, app, watcher, resolver }) => {
 
   async function processCss(root: string, ctx: Context) {
     const css = (await readBody(ctx.body))!
+    const filePath = resolver.requestToFile(ctx.path)
     const result = await compileCss(root, ctx.path, {
       id: '',
       source: css,
-      filename: resolver.requestToFile(ctx.path),
+      filename: filePath,
       scoped: false,
       modules: ctx.path.includes('.module'),
       preprocessLang: ctx.path.replace(cssPreprocessLangRE, '$2') as any
@@ -143,6 +145,8 @@ export const cssPlugin: ServerPlugin = ({ root, app, watcher, resolver }) => {
       return
     }
 
+    recordCssImportChain(result.dependencies, filePath)
+
     if (result.errors.length) {
       console.error(`[vite] error applying css transforms: `)
       result.errors.forEach(console.error)

diff --git a/src/node/server/serverPluginVue.ts b/src/node/server/serverPluginVue.ts
@@ -29,7 +29,12 @@ import { Context } from 'koa'
 import { transform } from '../esbuildService'
 import { InternalResolver } from '../resolver'
 import { seenUrls } from './serverPluginServeStatic'
-import { codegenCss, compileCss, rewriteCssUrls } from '../utils/cssUtils'
+import {
+  codegenCss,
+  compileCss,
+  recordCssImportChain,
+  rewriteCssUrls
+} from '../utils/cssUtils'
 import { parse } from '../utils/babelParse'
 import MagicString from 'magic-string'
 import { resolveImport } from './serverPluginModuleRewrite'
@@ -514,15 +519,18 @@ async function compileSFCStyle(
   const start = Date.now()
 
   const { generateCodeFrame } = resolveCompiler(root)
+  const resource = filePath + `?type=style&index=${index}`
   const result = (await compileCss(root, publicPath, {
     source: style.content,
-    filename: filePath + `?type=style&index=${index}`,
+    filename: resource,
     id: ``, // will be computed in compileCss
     scoped: style.scoped != null,
     modules: style.module != null,
     preprocessLang: style.lang as any
   })) as SFCStyleCompileResults
 
+  recordCssImportChain(result.dependencies, resource)
+
   if (result.errors.length) {
     console.error(chalk.red(`\n[vite] SFC style compilation error: `))
     result.errors.forEach((e: any) => {

diff --git a/src/node/utils/cssUtils.ts b/src/node/utils/cssUtils.ts
@@ -72,7 +72,7 @@ export async function compileCss(
   // parser plain css @import
   postcssPlugins.unshift(require('postcss-import')())
 
-  const res = await compileStyleAsync({
+  return await compileStyleAsync({
     source,
     filename,
     id: `data-v-${id}`,
@@ -91,15 +91,6 @@ export async function compileCss(
     postcssOptions,
     postcssPlugins
   })
-
-  res.dependencies.forEach((dependency) => {
-    if (cssImportMap.has(dependency)) {
-      cssImportMap.get(dependency)!.add(filename)
-    } else {
-      cssImportMap.set(dependency, new Set([filename]))
-    }
-  })
-  return res
 }
 
 export function codegenCss(
@@ -144,7 +135,11 @@ async function loadPostcssConfig(
   }
 }
 
-export const cssImportMap = new Map<
+export const cssImporterMap = new Map<
+  string /*filePath*/,
+  Set<string /*filePath*/>
+>()
+export const cssImporteeMap = new Map<
   string /*filePath*/,
   Set<string /*filePath*/>
 >()
@@ -153,13 +148,39 @@ export function getCssImportBoundaries(
   filePath: string,
   boundaries = new Set<string>()
 ) {
-  if (!cssImportMap.has(filePath)) {
+  if (!cssImporterMap.has(filePath)) {
     return boundaries
   }
-  const importers = cssImportMap.get(filePath)!
+  const importers = cssImporterMap.get(filePath)!
   for (const importer of importers) {
     boundaries.add(importer)
     getCssImportBoundaries(importer, boundaries)
   }
   return boundaries
 }
+
+export function recordCssImportChain(dependencies: string[], filePath: string) {
+  const preImportees = cssImporteeMap.get(filePath)
+  const currentImportees = new Set(dependencies)
+  // if import code change, should removed unused previous importee
+  if (preImportees) {
+    for (const preImportee of preImportees) {
+      if (!currentImportees.has(preImportee)) {
+        const importers = cssImporterMap.get(preImportee)
+        if (importers) {
+          importers.delete(filePath)
+        }
+      }
+    }
+  }
+
+  currentImportees.forEach((dependency) => {
+    if (cssImporterMap.has(dependency)) {
+      cssImporterMap.get(dependency)!.add(filePath)
+    } else {
+      cssImporterMap.set(dependency, new Set([filePath]))
+    }
+  })
+
+  cssImporteeMap.set(filePath, currentImportees)
+}