wip: more efficient style handling for vite

Author: yyx990803

src/handleHotUpdate.ts

@@ -1,7 +1,10 @@
 import fs from 'fs'
+import _debug from 'debug'
 import { parse, SFCBlock } from '@vue/compiler-sfc'
 import { getDescriptor, setDescriptor } from './utils/descriptorCache'
 
+const debug = _debug('vite:hmr')
+
 /**
  * Vite-specific HMR handling
  */
@@ -33,8 +36,10 @@ export async function handleHotUpdate(file: string, modules: any[]) {
   const filteredModules = []
 
   const reload = () => {
-    console.log(`[vue:reload] ${file}`)
-    return modules.filter((m) => /type=script/.test(m.id))
+    debug(`[vue:reload] ${file}`)
+    return modules.filter(
+      (m) => !/type=/.test(m.id) || /type=script/.test(m.id)
+    )
   }
 
   if (
@@ -52,16 +57,6 @@ export async function handleHotUpdate(file: string, modules: any[]) {
   const prevStyles = prevDescriptor.styles || []
   const nextStyles = descriptor.styles || []
 
-  // css modules update causes a reload because the $style object is changed
-  // and it may be used in JS. It also needs to trigger a vue-style-update
-  // event so the client busts the sw cache.
-  if (
-    prevStyles.some((s) => s.module != null) ||
-    nextStyles.some((s) => s.module != null)
-  ) {
-    return reload()
-  }
-
   // force reload if CSS vars injection changed
   if (descriptor.cssVars) {
     if (prevDescriptor.cssVars.join('') !== descriptor.cssVars.join('')) {
@@ -76,12 +71,21 @@ export async function handleHotUpdate(file: string, modules: any[]) {
 
   // only need to update styles if not reloading, since reload forces
   // style updates as well.
-  nextStyles.forEach((_, i) => {
-    if (!prevStyles[i] || !isEqualBlock(prevStyles[i], nextStyles[i])) {
+  for (let i = 0; i < nextStyles.length; i++) {
+    const prev = prevStyles[i]
+    const next = nextStyles[i]
+    if (!prev || !isEqualBlock(prev, next)) {
+      // css modules update causes a reload because the $style object is changed
+      // and it may be used in JS.
+      // if (prev.module != null || next.module != null) {
+      //   return modules.filter(
+      //     (m) => !/type=/.test(m.id) || /type=script/.test(m.id)
+      //   )
+      // }
       didUpdateStyle = true
       filteredModules.push(modules.find((m) => m.id.includes(`index=${i}`)))
     }
-  })
+  }
 
   const prevCustoms = prevDescriptor.customBlocks || []
   const nextCustoms = descriptor.customBlocks || []
@@ -108,7 +112,7 @@ export async function handleHotUpdate(file: string, modules: any[]) {
     updateType.push(`style`)
   }
   if (updateType.length) {
-    console.log(`[vue:update(${updateType.join('&')})] ${file}`)
+    debug(`[vue:update(${updateType.join('&')})] ${file}`)
   }
   return filteredModules
 }

src/index.ts

@@ -31,9 +31,9 @@ export interface Options {
   include: string | RegExp | (string | RegExp)[]
   exclude: string | RegExp | (string | RegExp)[]
   target: 'node' | 'browser'
+  vite: boolean
   hmr: boolean
   exposeFilename: boolean
-
   customBlocks?: string[]
 
   // if true, handle preprocessors directly instead of delegating to other
@@ -60,6 +60,7 @@ export interface Options {
 const defaultOptions: Options = {
   include: /\.vue$/,
   exclude: [],
+  vite: false,
   hmr: false,
   target: 'browser',
   exposeFilename: false,
@@ -72,6 +73,10 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
     ...userOptions,
   }
 
+  if (options.vite) {
+    options.preprocessStyles = false
+  }
+
   const isServer = options.target === 'node'
   const isProduction =
     process.env.NODE_ENV === 'production' || process.env.BUILD === 'production'

src/sfc.ts

@@ -66,7 +66,12 @@ export function transformSFCEntry(
     options,
     pluginContext
   )
-  const stylesCode = genStyleCode(descriptor, scopeId, options.preprocessStyles)
+  const stylesCode = genStyleCode(
+    descriptor,
+    scopeId,
+    options.preprocessStyles,
+    options.vite
+  )
   const customBlocksCode = getCustomBlock(descriptor, filterCustomBlock)
   const output = [
     scriptImport,
@@ -158,7 +163,8 @@ function genScriptCode(
 function genStyleCode(
   descriptor: SFCDescriptor,
   scopeId: string,
-  preprocessStyles?: boolean
+  preprocessStyles?: boolean,
+  isVite?: boolean
 ) {
   let stylesCode = ``
   let hasCSSModules = false
@@ -188,7 +194,8 @@ function genStyleCode(
           i,
           styleRequest,
           styleRequestWithoutModule,
-          style.module
+          style.module,
+          isVite
         )
       } else {
         stylesCode += `\nimport ${JSON.stringify(styleRequest)}`
@@ -224,14 +231,22 @@ function genCSSModulesCode(
   index: number,
   request: string,
   requestWithoutModule: string,
-  moduleName: string | boolean
+  moduleName: string | boolean,
+  isVite?: boolean
 ): string {
   const styleVar = `style${index}`
-  let code =
-    // first import the CSS for extraction
-    `\nimport ${JSON.stringify(requestWithoutModule)}` +
-    // then import the json file to expose to component...
-    `\nimport ${styleVar} from ${JSON.stringify(request + '.js')}`
+  let code
+  if (!isVite) {
+    code =
+      // first import the CSS for extraction
+      `\nimport ${JSON.stringify(requestWithoutModule)}` +
+      // then import the json file to expose to component...
+      `\nimport ${styleVar} from ${JSON.stringify(request + '.js')}`
+  } else {
+    // vite handles module.ext in a single import
+    request = request.replace(/\.(\w+)$/, '.module.$1.js')
+    code = `\n import ${styleVar} from ${JSON.stringify(request)}`
+  }
 
   // inject variable
   const name = typeof moduleName === 'string' ? moduleName : '$style'

src/style.ts

@@ -20,7 +20,7 @@ export async function transformStyle(
   const block = descriptor.styles[query.index]!
 
   let preprocessOptions = options.preprocessOptions || {}
-  const preprocessLang = (options.preprocessStyles
+  const preprocessLang = (options.preprocessStyles && !options.vite
     ? block.lang
     : undefined) as SFCAsyncStyleCompileOptions['preprocessLang']
 
@@ -52,7 +52,8 @@ export async function transformStyle(
     isProd: isProduction,
     source: code,
     scoped: block.scoped,
-    modules: !!block.module,
+    // vite handle CSS modules
+    modules: !!block.module && !options.vite,
     postcssOptions: options.postcssOptions,
     postcssPlugins: options.postcssPlugins,
     modulesOptions: options.cssModulesOptions,
@@ -62,16 +63,21 @@ export async function transformStyle(
   })
 
   if (result.errors.length) {
-    result.errors.forEach((error) =>
-      pluginContext.error({
-        id: query.filename,
-        message: error.message,
-      })
-    )
+    result.errors.forEach((error: any) => {
+      if (error.line && error.column) {
+        error.loc = {
+          file: query.filename,
+          line: error.line + block.loc.start.line,
+          column: error.column,
+        }
+      }
+      pluginContext.error(error)
+    })
     return null
   }
 
-  if (query.module) {
+  if (query.module && !options.vite) {
+    // vite handles css modules code generation down the stream
     return {
       code: `export default ${JSON.stringify(result.modules)}`,
       map: null,

src/utils/error.ts

@@ -5,7 +5,6 @@ export function createRollupError(
   id: string,
   error: CompilerError | SyntaxError
 ): RollupError {
-  debugger
   if ('code' in error) {
     return {
       id,