fix(plugin-vue): make cssm code tree shakeable (#6353)

vitejs · Jan 21, 2022 · dac8075 · dac8075
1 parent 91be66b
commit dac8075
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
@@ -299,7 +299,7 @@ async function genStyleCode(
   attachedProps: [string, string][]
 ) {
   let stylesCode = ``
-  let hasCSSModules = false
+  let cssModulesMap: Record<string, string> | undefined
   if (descriptor.styles.length) {
     for (let i = 0; i < descriptor.styles.length; i++) {
       const style = descriptor.styles[i]
@@ -320,12 +320,13 @@ async function genStyleCode(
             `<style module> is not supported in custom elements mode.`
           )
         }
-        if (!hasCSSModules) {
-          stylesCode += `\nconst cssModules = {}`
-          attachedProps.push([`__cssModules`, `cssModules`])
-          hasCSSModules = true
-        }
-        stylesCode += genCSSModulesCode(i, styleRequest, style.module)
+        const [importCode, nameMap] = genCSSModulesCode(
+          i,
+          styleRequest,
+          style.module
+        )
+        stylesCode += importCode
+        Object.assign((cssModulesMap ||= {}), nameMap)
       } else {
         if (asCustomElement) {
           stylesCode += `\nimport _style_${i} from ${JSON.stringify(
@@ -344,22 +345,31 @@ async function genStyleCode(
       ])
     }
   }
+  if (cssModulesMap) {
+    const mappingCode =
+      Object.entries(cssModulesMap).reduce(
+        (code, [key, value]) => code + `"${key}":${value},\n`,
+        '{\n'
+      ) + '}'
+    stylesCode += `\nconst cssModules = ${mappingCode}`
+    attachedProps.push([`__cssModules`, `cssModules`])
+  }
   return stylesCode
 }
 
 function genCSSModulesCode(
   index: number,
   request: string,
   moduleName: string | boolean
-): string {
+): [importCode: string, nameMap: Record<string, 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}`
-  )
+  return [
+    `\nimport ${styleVar} from ${JSON.stringify(moduleRequest)}`,
+    { [exposedName]: styleVar }
+  ]
 }
 
 async function genCustomBlockCode(