enable custom css modules compilers (#132)

* enable custom css modules compilers

* remove leftover console.log

* add CSS modules usage sample and mention nathantreid:vue-css-modules comunity package.

* move package reference to lang section

Author: Nathan Reid

README.md

@@ -139,6 +139,7 @@ Currently supported and possible future features (in no particular order) are:
  - [x] Easy localization with vue-i18n out-of-the-box integration, auto-detection, server-side injection and key-in-hand ui ![vue](https://img.shields.io/badge/vue-1.x-green.svg)
  - [x] Easy state management with vuex integration ![vue](https://img.shields.io/badge/vue-1.x-green.svg)
  - [x] Use Blaze templates in your vue app ![vue](https://img.shields.io/badge/vue-1.x-green.svg) ![vue](https://img.shields.io/badge/vue-2.x-brightgreen.svg)
+ - [x] `module` attribute on `<style>` in .vue files
  - [ ] *Typescript official integration in .vue files*
  - [ ] *Server-side rendering (Vue 2.x)*
  - [ ] *`src` attribute support in `.vue` files*

packages/vue-component/README.md

@@ -72,6 +72,32 @@ a {
 </style>
 ```
 
+### CSS Modules
+
+As an alternative to scoped styles, you can use CSS modules to scope your CSS to your components by adding the `module` attribute to any `<style>` tag in your component file and accessing the styles via the `$style` property:
+```html
+<style module>
+/* Will only be applied to this component <a> elements */
+.red {
+   color: red;
+}
+</style>
+
+<template>
+  <div :class="$style.red">Red Text</div>
+</template>
+
+<script>
+  export default {
+    created() {
+      console.log(this.$style.red);
+    }
+  }
+</script>
+```
+
+Note: composing from other files is not supported by the built-in CSS modules processor. See the community packages.
+
 ### Language packages
 
 Using the power of preprocessors, you can use a different language (like less or jade) by adding a `lang` attribute on your `<template>`, `<script>` or `<style>` tags.
@@ -91,6 +117,9 @@ Official packages for `<style>` tag:
  - [akryum:vue-stylus](https://github.com/Akryum/meteor-vue-component/tree/master/packages/vue-stylus)
 
 Community packages welcomed (add a your package with a PR)!
+Community packages for `<style>` tag:
+
+ - [nathantreid:vue-css-modules](https://github.com/nathantreid/vue-css-modules) enables interop with nathantreid:css-modules, including support for composing from other files.
 
 ### Manual import
 

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

@@ -313,22 +313,53 @@ VueComponentTagHandler = class VueComponentTagHandler {
         // CSS Modules
         let isAsync = false;
         if (styleTag.attribs.module) {
-          const moduleName = typeof styleTag.attribs.module === 'string' ? styleTag.attribs.module : '';
-          const scopedModuleName = moduleName ? `_${moduleName}` : '';
-          plugins.push(postcssModules({
-            getJSON(cssFilename, json) {
-              console.log('getjson')
-              cssModules = { ...(cssModules || {}), ...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}`;
-            },
-           }));
-          isAsync = true;
+          if (global.vue.cssModules) {
+            try {
+              let compile = global.vue.cssModules;
+              //console.log(`Compiling <style> css modules ${lang}...`);
+              let result = compile({
+                source: css,
+                map: cssMap,
+                inputFile: this.inputFile,
+                dependencyManager: this.dependencyManager,
+                tag: styleTag,
+              });
+              // console.log('Css result', result);
+              css = result.css;
+              cssMap = result.map;
+              if (result.cssModules) {
+                cssModules = { ...(cssModules || {}), ...result.cssModules };
+              }
+              if (result.js) {
+                js += result.js;
+              }
+            } catch (e) {
+              throwCompileError({
+                inputFile: this.inputFile,
+                tag: 'style',
+                charIndex: styleTag.tagStartIndex,
+                action: 'compiling css modules',
+                error: e,
+                showError: true
+              });
+            }
+          } else {
+            const moduleName = typeof styleTag.attribs.module === 'string' ? styleTag.attribs.module : '';
+            const scopedModuleName = moduleName ? `_${moduleName}` : '';
+            plugins.push(postcssModules({
+              getJSON(cssFilename, json) {
+                cssModules = { ...(cssModules || {}), ...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}`;
+              },
+            }));
+            isAsync = true;
+          }
         }
 
         // Autoprefixer

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

@@ -582,7 +582,6 @@ function generateJs (vueId, inputFile, compileResult, isHotReload = false) {
 
   // CSS Modules
   if(compileResult.cssModules) {
-    console.log('adding css modules', JSON.stringify(compileResult.cssModules))
     const modulesCode = '__vue_options__.computed = __vue_options__.computed || {};\n' +
      `__vue_options__.computed.$style = function() {\n return ${JSON.stringify(compileResult.cssModules)}\n};\n`;
     js += modulesCode;