Allow plugins to fully control the CSS modules output (previously they were restricted to output that would be run through JSON.stringify) (#293)

Author: Nathan Reid

packages/vue-component/plugin/tag-handler.js

@@ -380,17 +380,12 @@ VueComponentTagHandler = class VueComponentTagHandler {
                 inputFile: this.inputFile,
                 dependencyManager: this.dependencyManager,
                 tag: styleTag,
+                cssModules,
               })
               // console.log('Css result', result)
               css = result.css
               cssMap = result.map
-              if (result.cssModules) {
-                const moduleName = typeof styleTag.attribs.module === 'string' ? styleTag.attribs.module : defaultModuleName
-                if (cssModules === undefined) {
-                  cssModules = {}
-                }
-                cssModules[moduleName] = { ...(cssModules[moduleName] || {}), ...result.cssModules }
-              }
+              cssModules = result.cssModules
               if (result.js) {
                 js += result.js
               }
@@ -448,6 +443,13 @@ VueComponentTagHandler = class VueComponentTagHandler {
       }
     }
 
+    if (cssModules && !global.vue.cssModules) {
+      cssModules = Object.keys(cssModules).reduce((result, key) => {
+        result[key] = JSON.stringify(cssModules[key]);
+        return result;
+      }, {});
+    }
+
     let compileResult = {
       code: js,
       map,

packages/vue-component/plugin/vue-compiler.js

@@ -631,7 +631,7 @@ function generateJs (vueId, inputFile, compileResult, isHotReload = false) {
   if(compileResult.cssModules) {
     const modules = Object.keys(compileResult.cssModules)
     const modulesCode = '__vue_options__.computed = __vue_options__.computed || {};\n' +
-      modules.map(module=>`__vue_options__.computed['${module}'] = function() {\n return ${JSON.stringify(compileResult.cssModules[module])}\n};\n`).join('\n')
+      modules.map(module=>`__vue_options__.computed['${module}'] = function() {\n return ${compileResult.cssModules[module]}\n};\n`).join('\n')
     js += modulesCode
     // console.log(modulesCode)
   }