add support for customizing the name of CSS modules property via the module attribute (#145)

Author: Nathan Reid

packages/vue-component/README.md

@@ -96,6 +96,26 @@ As an alternative to scoped styles, you can use CSS modules to scope your CSS to
 </script>
 ```
 
+By default, your styles will be assigned to the `$style` computed property. You can customize this by setting the module attribute. This also allows you to create multiple "modules" in one component file:
+
+```html
+<style module="foo">
+  .color {
+    color: orange;
+  }
+</style>
+<style module="bar">
+  .color {
+    color: purple;
+  }
+</style>
+
+<template>
+  <div :class="foo.color">Foo Text</div>
+  <div :class="bar.color">Bar Text</div>
+</template>
+```
+
 Note: composing from other files is not supported by the built-in CSS modules processor. See the community packages.
 
 ### Language packages

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

@@ -312,6 +312,7 @@ VueComponentTagHandler = class VueComponentTagHandler {
 
         // CSS Modules
         let isAsync = false;
+        let defaultModuleName = '$style';
         if (styleTag.attribs.module) {
           if (global.vue.cssModules) {
             try {
@@ -328,7 +329,11 @@ VueComponentTagHandler = class VueComponentTagHandler {
               css = result.css;
               cssMap = result.map;
               if (result.cssModules) {
-                cssModules = { ...(cssModules || {}), ...result.cssModules };
+                const moduleName = typeof styleTag.attribs.module === 'string' ? styleTag.attribs.module : defaultModuleName;
+                if (cssModules === undefined) {
+                  cssModules = {};
+                }
+                cssModules[moduleName] = { ...(cssModules[moduleName] || {}), ...result.cssModules };
               }
               if (result.js) {
                 js += result.js;
@@ -344,18 +349,20 @@ VueComponentTagHandler = class VueComponentTagHandler {
               });
             }
           } else {
-            const moduleName = typeof styleTag.attribs.module === 'string' ? styleTag.attribs.module : '';
-            const scopedModuleName = moduleName ? `_${moduleName}` : '';
+            const moduleName = typeof styleTag.attribs.module === 'string' ? styleTag.attribs.module : defaultModuleName;
+            const scopedModuleName = moduleName !== defaultModuleName ? `__${moduleName}` : '';
             plugins.push(postcssModules({
               getJSON(cssFilename, json) {
-                cssModules = { ...(cssModules || {}), ...json };
+                if (cssModules === undefined)
+                  cssModules = {};
+                cssModules[moduleName] = { ...(cssModules[moduleName] || {}), ...json };
               },
               generateScopedName(exportedName, filePath) {
                 const path = require('path');
                 let sanitisedPath = path.relative(process.cwd(), filePath).replace(/.*\{}[/\\]/, '').replace(/.*\{.*?}/, 'packages').replace(/\.[^\.\/\\]+$/, '').replace(/[\W_]+/g, '_');
                 const filename = path.basename(filePath).replace(/\.[^\.\/\\]+$/, '').replace(/[\W_]+/g, '_');
                 sanitisedPath = sanitisedPath.replace(new RegExp(`_(${filename})$`), '__$1');
-                return `_${sanitisedPath}__${exportedName}`;
+                return `_${sanitisedPath}${scopedModuleName}__${exportedName}`;
               },
             }));
             isAsync = true;

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

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