From b404550b94ee098fa643aded8ea241e2c7d81a15 Mon Sep 17 00:00:00 2001
From: Nathan Reid <nathan-code@nathantreid.com>
Date: Sun, 5 Mar 2017 12:28:29 -0600
Subject: [PATCH 1/4] enable custom css modules compilers

---
 packages/vue-component/plugin/tag-handler.js | 63 +++++++++++++++-----
 1 file changed, 47 insertions(+), 16 deletions(-)

diff --git a/packages/vue-component/plugin/tag-handler.js b/packages/vue-component/plugin/tag-handler.js
index af2ac82..e6cc238 100644
--- a/packages/vue-component/plugin/tag-handler.js
+++ b/packages/vue-component/plugin/tag-handler.js
@@ -312,22 +312,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

From f39391db44889c245b2f6b8a84b6bd9e322b7622 Mon Sep 17 00:00:00 2001
From: Nathan Reid <nathan-code@nathantreid.com>
Date: Sun, 19 Mar 2017 00:02:28 -0500
Subject: [PATCH 2/4] remove leftover console.log

---
 packages/vue-component/plugin/vue-compiler.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/vue-component/plugin/vue-compiler.js b/packages/vue-component/plugin/vue-compiler.js
index 210eed0..a700575 100644
--- a/packages/vue-component/plugin/vue-compiler.js
+++ b/packages/vue-component/plugin/vue-compiler.js
@@ -613,7 +613,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;

From 1b4c50e9eacb2910c1569ed2c5d432adbe8b0a88 Mon Sep 17 00:00:00 2001
From: Nathan Reid <nathan-code@nathantreid.com>
Date: Sun, 19 Mar 2017 00:04:50 -0500
Subject: [PATCH 3/4] add CSS modules usage sample and mention
 nathantreid:vue-css-modules comunity package.

---
 README.md                        |  1 +
 packages/vue-component/README.md | 31 +++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/README.md b/README.md
index 8792c8d..0071ccc 100644
--- a/README.md
+++ b/README.md
@@ -138,6 +138,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*
diff --git a/packages/vue-component/README.md b/packages/vue-component/README.md
index c37d846..d5ddc1a 100644
--- a/packages/vue-component/README.md
+++ b/packages/vue-component/README.md
@@ -72,6 +72,37 @@ 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.
+
+Community packages:
+
+- [nathantreid:vue-css-modules](https://github.com/nathantreid/vue-css-modules) enables interop with nathantreid:css-modules, including support for composing from other files.
+
+
 ### 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.

From 46b46199cd24fd8ba4b762b2920f5b3df48dfcca Mon Sep 17 00:00:00 2001
From: Nathan Reid <nathan-code@nathantreid.com>
Date: Sun, 19 Mar 2017 00:08:35 -0500
Subject: [PATCH 4/4] move package reference to lang section

---
 packages/vue-component/README.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/vue-component/README.md b/packages/vue-component/README.md
index d5ddc1a..799b6ab 100644
--- a/packages/vue-component/README.md
+++ b/packages/vue-component/README.md
@@ -98,11 +98,6 @@ As an alternative to scoped styles, you can use CSS modules to scope your CSS to
 
 Note: composing from other files is not supported by the built-in CSS modules processor. See the community packages.
 
-Community packages:
-
-- [nathantreid:vue-css-modules](https://github.com/nathantreid/vue-css-modules) enables interop with nathantreid:css-modules, including support for composing from other files.
-
-
 ### 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.
@@ -122,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