From abfab79d4329d30f853265ca741967a2df905821 Mon Sep 17 00:00:00 2001
From: Nathan Reid <nathan-code@nathantreid.com>
Date: Mon, 13 Feb 2017 17:15:42 -0600
Subject: [PATCH 1/4] basic support for css modules via <style module>

---
 packages/vue-component/package.js             |  1 +
 packages/vue-component/plugin/tag-handler.js  | 47 ++++++++++++++++++-
 packages/vue-component/plugin/vue-compiler.js |  8 ++++
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/packages/vue-component/package.js b/packages/vue-component/package.js
index 8a9ca53..64a953f 100644
--- a/packages/vue-component/package.js
+++ b/packages/vue-component/package.js
@@ -27,6 +27,7 @@ Package.registerBuildPlugin({
   npmDependencies: {
     'postcss': '5.0.21',
     'postcss-selector-parser': '2.0.0',
+    'postcss-modules': '0.6.4',
     'socket.io': '1.4.6',
     'async': '1.4.0',
     'lodash': '4.13.1',
diff --git a/packages/vue-component/plugin/tag-handler.js b/packages/vue-component/plugin/tag-handler.js
index 9252736..0305e0f 100644
--- a/packages/vue-component/plugin/tag-handler.js
+++ b/packages/vue-component/plugin/tag-handler.js
@@ -1,5 +1,6 @@
 import postcss from 'postcss';
 import autoprefixer from 'autoprefixer';
+import postcssModules from 'postcss-modules';
 import SourceMapMerger from 'source-map-merger';
 
 global._vue_js_cache = global._vue_js_cache || {};
@@ -245,6 +246,7 @@ VueComponentTagHandler = class VueComponentTagHandler {
     }
 
     // Styles
+    let cssModules;
     if(this.parts.style) {
       for (let styleTag of this.component.styles) {
         let css = styleTag.contents;
@@ -307,13 +309,55 @@ VueComponentTagHandler = class VueComponentTagHandler {
           }));
         }
 
+        // Modules
+        let isAsync = false;
+        if (styleTag.attribs.module) {
+          const moduleName = typeof styleTag.attribs.module === 'string' ? styleTag.attribs.module : '';
+          const generateScopedName = (function () {
+            const scopedModuleName = moduleName ? `_${moduleName}` : '';
+            return function generateScopedName(name, filename, css) {
+              const path  = require('path');
+              const i     = css.indexOf('.' + name);
+              const line  = css.substr(0, i).split(/[\r\n]/).length;
+              const file  = path.basename(filename, '.css');
+
+              return `_${file}${scopedModuleName}_${line}_${name}`;
+            }
+          })();
+          plugins.push(postcssModules({
+            getJSON(cssFilename, json) {
+              console.log('getjson')
+              cssModules = { ...(cssModules || {}), ...json };
+            },
+            generateScopedName,
+           }));
+          isAsync = true;
+        }
+
         // Autoprefixer
         if (styleTag.attribs.autoprefix !== 'off') {
           plugins.push(autoprefixer());
         }
 
         // Postcss result
-        let result = postcss(plugins).process(css, postcssOptions);
+        let result;
+        if (isAsync) {
+          const promise = new Promise((resolve, reject) => {
+            postcss(plugins).process(css, postcssOptions).then(function (result) {
+              resolve(result);
+            })
+            .catch(function(err){
+              console.error('got err')
+              console.error('got err')
+              reject(err)
+            });
+          });
+          result = promise.await();
+          // result = postcss(plugins).process(css, postcssOptions).await();
+        } else {
+          result = postcss(plugins).process(css, postcssOptions);
+        }
+
         css = result.css;
         cssMap = result.map;
 
@@ -329,6 +373,7 @@ VueComponentTagHandler = class VueComponentTagHandler {
       map,
       styles,
       template,
+      cssModules,
       hash,
     };
 
diff --git a/packages/vue-component/plugin/vue-compiler.js b/packages/vue-component/plugin/vue-compiler.js
index 2b5cfb1..709bd5a 100644
--- a/packages/vue-component/plugin/vue-compiler.js
+++ b/packages/vue-component/plugin/vue-compiler.js
@@ -607,6 +607,14 @@ function generateJs (vueId, inputFile, compileResult, isHotReload = false) {
     js += `__vue_options__._scopeId = '${vueId}';`;
   }
 
+  // CSS Modules
+  if(compileResult.cssModules) {
+    console.log('adding css modules', JSON.stringify(compileResult.cssModules))
+    const modulesCode = `__vue_options__.computed = {\n $style: function() {\n return ${JSON.stringify(compileResult.cssModules)}\n }\n};\n`;
+    js += modulesCode;
+    console.log(modulesCode)
+  }
+
   // Package context
   js += `__vue_options__.packageName = '${inputFile.getPackageName()}';`;
 

From a63bd4f5baa3beb46547c787b3de48f341120a43 Mon Sep 17 00:00:00 2001
From: Nathan Reid <nathan-code@nathantreid.com>
Date: Mon, 13 Feb 2017 17:31:52 -0600
Subject: [PATCH 2/4] fix css modules wiping out other computed properties

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

diff --git a/packages/vue-component/plugin/vue-compiler.js b/packages/vue-component/plugin/vue-compiler.js
index 709bd5a..829eb25 100644
--- a/packages/vue-component/plugin/vue-compiler.js
+++ b/packages/vue-component/plugin/vue-compiler.js
@@ -610,7 +610,8 @@ 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 = {\n $style: function() {\n return ${JSON.stringify(compileResult.cssModules)}\n }\n};\n`;
+    const modulesCode = '__vue_options__.computed = __vue_options__.computed || {};\n' +
+     `__vue_options__.computed.$style = function() {\n return ${JSON.stringify(compileResult.cssModules)}\n};\n`;
     js += modulesCode;
     console.log(modulesCode)
   }

From 853d534f6113e5e67fe1a02d8e3a61537277e3f3 Mon Sep 17 00:00:00 2001
From: Nathan Reid <nathan-code@nathantreid.com>
Date: Mon, 13 Feb 2017 17:53:54 -0600
Subject: [PATCH 3/4] fix typoe in postcss 'from' property

---
 packages/vue-component/plugin/tag-handler.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-component/plugin/tag-handler.js b/packages/vue-component/plugin/tag-handler.js
index 0305e0f..8ab7f61 100644
--- a/packages/vue-component/plugin/tag-handler.js
+++ b/packages/vue-component/plugin/tag-handler.js
@@ -293,7 +293,7 @@ VueComponentTagHandler = class VueComponentTagHandler {
         // Postcss
         let plugins = [];
         let postcssOptions = {
-          form: inputFilePath,
+          from: inputFilePath,
           to: inputFilePath,
           map: {
             inline: false,

From 16f157a58639f853d714a1753f12aade01519724 Mon Sep 17 00:00:00 2001
From: Nathan Reid <nathan-code@nathantreid.com>
Date: Mon, 13 Feb 2017 17:55:20 -0600
Subject: [PATCH 4/4] set scoped class name generation to
 _file_directory_path_with_underscores__filenamewithoutextension__className

---
 packages/vue-component/plugin/tag-handler.js | 22 ++++++++------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/vue-component/plugin/tag-handler.js b/packages/vue-component/plugin/tag-handler.js
index 8ab7f61..e75be9b 100644
--- a/packages/vue-component/plugin/tag-handler.js
+++ b/packages/vue-component/plugin/tag-handler.js
@@ -309,27 +309,23 @@ VueComponentTagHandler = class VueComponentTagHandler {
           }));
         }
 
-        // Modules
+        // CSS Modules
         let isAsync = false;
         if (styleTag.attribs.module) {
           const moduleName = typeof styleTag.attribs.module === 'string' ? styleTag.attribs.module : '';
-          const generateScopedName = (function () {
-            const scopedModuleName = moduleName ? `_${moduleName}` : '';
-            return function generateScopedName(name, filename, css) {
-              const path  = require('path');
-              const i     = css.indexOf('.' + name);
-              const line  = css.substr(0, i).split(/[\r\n]/).length;
-              const file  = path.basename(filename, '.css');
-
-              return `_${file}${scopedModuleName}_${line}_${name}`;
-            }
-          })();
+          const scopedModuleName = moduleName ? `_${moduleName}` : '';
           plugins.push(postcssModules({
             getJSON(cssFilename, json) {
               console.log('getjson')
               cssModules = { ...(cssModules || {}), ...json };
             },
-            generateScopedName,
+            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;
         }