refactor(plugin-vue): ensure style processing in custom elements mode

Author: yyx990803

packages/plugin-vue/src/handleHotUpdate.ts

@@ -95,6 +95,9 @@ export async function handleHotUpdate({
       )
       if (mod) {
         affectedModules.add(mod)
+        if (mod.url.includes('&inline')) {
+          affectedModules.add(mainModule)
+        }
       } else {
         // new style block - force reload
         affectedModules.add(mainModule)

packages/plugin-vue/src/index.ts

@@ -45,9 +45,10 @@ export interface Options {
   style?: Partial<SFCStyleCompileOptions>
 
   /**
-   * Transform Vue SFCs into custom elements (requires Vue >= 3.2.0)
-   * - `true` -> all `*.vue` imports are converted into custom elements
-   * - `string | RegExp` -> matched files are converted into custom elements
+   * Transform Vue SFCs into custom elements.
+   * **requires Vue >= 3.2.0 & Vite >= 2.4.4**
+   * - `true`: all `*.vue` imports are converted into custom elements
+   * - `string | RegExp`: matched files are converted into custom elements
    *
    * @default /\.ce\.vue$/
    */

packages/plugin-vue/src/main.ts

@@ -14,7 +14,6 @@ import { transformTemplateInMain } from './template'
 import { isOnlyTemplateChanged, isEqualBlock } from './handleHotUpdate'
 import { RawSourceMap, SourceMapConsumer, SourceMapGenerator } from 'source-map'
 import { createRollupError } from './utils/error'
-import { transformStyle } from './style'
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export async function transformMain(
@@ -94,9 +93,11 @@ export async function transformMain(
   }
 
   // styles
-  const stylesCode = asCustomElement
-    ? await genCustomElementStyleCode(descriptor, options, pluginContext)
-    : await genStyleCode(descriptor, pluginContext)
+  const stylesCode = await genStyleCode(
+    descriptor,
+    pluginContext,
+    asCustomElement
+  )
 
   // custom blocks
   const customBlocksCode = await genCustomBlockCode(descriptor, pluginContext)
@@ -298,7 +299,8 @@ async function genScriptCode(
 
 async function genStyleCode(
   descriptor: SFCDescriptor,
-  pluginContext: PluginContext
+  pluginContext: PluginContext,
+  asCustomElement: boolean
 ) {
   let stylesCode = ``
   let hasCSSModules = false
@@ -313,23 +315,55 @@ async function genStyleCode(
       // that the module needs to export the modules json
       const attrsQuery = attrsToQuery(style.attrs, 'css')
       const srcQuery = style.src ? `&src` : ``
-      const query = `?vue&type=style&index=${i}${srcQuery}`
+      const directQuery = asCustomElement ? `&inline` : ``
+      const query = `?vue&type=style&index=${i}${srcQuery}${directQuery}`
       const styleRequest = src + query + attrsQuery
       if (style.module) {
+        if (asCustomElement) {
+          throw new Error(
+            `<style module> is not supported in custom elements mode.`
+          )
+        }
         if (!hasCSSModules) {
           stylesCode += `\nconst cssModules = _sfc_main.__cssModules = {}`
           hasCSSModules = true
         }
         stylesCode += genCSSModulesCode(i, styleRequest, style.module)
       } else {
-        stylesCode += `\nimport ${JSON.stringify(styleRequest)}`
+        if (asCustomElement) {
+          stylesCode += `\nimport _style_${i} from ${JSON.stringify(
+            styleRequest
+          )}`
+        } else {
+          stylesCode += `\nimport ${JSON.stringify(styleRequest)}`
+        }
       }
       // TODO SSR critical CSS collection
     }
+    if (asCustomElement) {
+      stylesCode += `\n_sfc_main.styles = [${descriptor.styles
+        .map((_, i) => `_style_${i}`)
+        .join(',')}]`
+    }
   }
   return stylesCode
 }
 
+function genCSSModulesCode(
+  index: number,
+  request: string,
+  moduleName: string | boolean
+): string {
+  const styleVar = `style${index}`
+  const exposedName = typeof moduleName === 'string' ? moduleName : '$style'
+  // inject `.module` before extension so vite handles it as css module
+  const moduleRequest = request.replace(/\.(\w+)$/, '.module.$1')
+  return (
+    `\nimport ${styleVar} from ${JSON.stringify(moduleRequest)}` +
+    `\ncssModules["${exposedName}"] = ${styleVar}`
+  )
+}
+
 async function genCustomBlockCode(
   descriptor: SFCDescriptor,
   pluginContext: PluginContext
@@ -351,21 +385,6 @@ async function genCustomBlockCode(
   return code
 }
 
-function genCSSModulesCode(
-  index: number,
-  request: string,
-  moduleName: string | boolean
-): string {
-  const styleVar = `style${index}`
-  const exposedName = typeof moduleName === 'string' ? moduleName : '$style'
-  // inject `.module` before extension so vite handles it as css module
-  const moduleRequest = request.replace(/\.(\w+)$/, '.module.$1')
-  return (
-    `\nimport ${styleVar} from ${JSON.stringify(moduleRequest)}` +
-    `\ncssModules["${exposedName}"] = ${styleVar}`
-  )
-}
-
 /**
  * For blocks with src imports, it is important to link the imported file
  * with its owner SFC descriptor so that we can get the information about
@@ -411,19 +430,3 @@ function attrsToQuery(
   }
   return query
 }
-
-async function genCustomElementStyleCode(
-  descriptor: SFCDescriptor,
-  options: ResolvedOptions,
-  pluginContext: TransformPluginContext
-) {
-  const styles = (
-    await Promise.all(
-      descriptor.styles.map((style, index) =>
-        transformStyle(style.content, descriptor, index, options, pluginContext)
-      )
-    )
-  ).map((res) => JSON.stringify(res!.code))
-
-  return `_sfc_main.styles = [${styles.join(',')}]`
-}