From 716a3d0da002a526b4f7b7881d9a151314d6c9a2 Mon Sep 17 00:00:00 2001
From: Jeremy Zahner <zahner@joshmartin.ch>
Date: Mon, 9 Apr 2018 15:55:29 +0200
Subject: [PATCH 1/2] fix: Removes scss from styles warning match since it is
 supported.

---
 lib/process.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/process.js b/lib/process.js
index 3e41c763..44b11d4a 100644
--- a/lib/process.js
+++ b/lib/process.js
@@ -84,7 +84,7 @@ module.exports = function (src, filePath, jestConfig) {
   }
 
   if (Array.isArray(parts.styles) && parts.styles.length > 0) {
-    if ((parts.styles.some(ast => /^scss|sass|less|pcss|postcss/.test(ast.lang))) && logger.shouldLogStyleWarn) {
+    if ((parts.styles.some(ast => /^sass|less|pcss|postcss/.test(ast.lang))) && logger.shouldLogStyleWarn) {
       !config.hideStyleWarn && logger.warn('Sass, Less and PostCSS are not currently compiled by vue-jest')
       logger.shouldLogStyleWarn = false
     }

From fddf8c68ac603ad80979f738509ba4f0f0eb383f Mon Sep 17 00:00:00 2001
From: Jeremy Zahner <zahner@joshmartin.ch>
Date: Mon, 9 Apr 2018 17:20:33 +0200
Subject: [PATCH 2/2] fix: Fixes scss-compiler and adds unit test.

---
 lib/compilers/scss-compiler.js |  2 +-
 lib/process.js                 | 29 ++++++++++++++++++-----------
 test/resources/Sass.vue        |  3 +--
 test/resources/SassModule.vue  | 10 +++++++++-
 test/scss.spec.js              | 16 ++++++++++++----
 5 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/lib/compilers/scss-compiler.js b/lib/compilers/scss-compiler.js
index 086c8575..5b7a0885 100644
--- a/lib/compilers/scss-compiler.js
+++ b/lib/compilers/scss-compiler.js
@@ -27,7 +27,7 @@ module.exports = (content, filePath, config) => {
   }
   let result
   try {
-    sass.renderSync({
+    result = sass.renderSync({
       data: scssResources + rewriteImports(content, filePath),
       outputStyle: 'compressed'
     }).css.toString()
diff --git a/lib/process.js b/lib/process.js
index 44b11d4a..1e564438 100644
--- a/lib/process.js
+++ b/lib/process.js
@@ -89,17 +89,24 @@ module.exports = function (src, filePath, jestConfig) {
       logger.shouldLogStyleWarn = false
     }
 
-    const styleStr = parts.styles.map(ast => {
-      if (!module) return
-
-      const styleObj = (/^sass|less|pcss|postcss/.test(ast.lang))
-        ? {}
-        : processStyle(ast, filePath, config)
-
-      const moduleName = ast.module === true ? '$style' : ast.module
-
-      return '\n  this[\'' + moduleName + '\'] = ' + JSON.stringify(styleObj)
-    }).filter(_ => _)
+    const styleStr = parts.styles
+      .filter(ast => module && ast.module)
+      .map(ast => {
+        const styleObj = (/^sass|less|pcss|postcss/.test(ast.lang))
+          ? {}
+          : processStyle(ast, filePath, config)
+
+        const moduleName = ast.module === true ? '$style' : ast.module
+
+        return `
+        if(!this['${moduleName}']) {
+          this['${moduleName}'] = {};
+        }
+        this['${moduleName}'] = Object.assign(this['${moduleName}'], ${JSON.stringify(styleObj)});
+        `
+      })
+      .filter(_ => _)
+      .join('')
 
     if (styleStr.length !== 0) {
       output += '\n;(function() {' +
diff --git a/test/resources/Sass.vue b/test/resources/Sass.vue
index 15332c06..77a258d3 100644
--- a/test/resources/Sass.vue
+++ b/test/resources/Sass.vue
@@ -4,8 +4,7 @@
 
 <style lang="scss">
   @import "./styles/transitions";
-  @import '~@design'
-
+  @import "~@design";
 
   .testA {
     background-color: red;
diff --git a/test/resources/SassModule.vue b/test/resources/SassModule.vue
index e9e968d3..79432c72 100644
--- a/test/resources/SassModule.vue
+++ b/test/resources/SassModule.vue
@@ -1,5 +1,10 @@
 <template>
-  <div :class="$style.testA"></div>
+  <div>
+    <div :class="$style.testA"></div>
+    <div :class="[ $style.testA ]"></div>
+    <div :class="{[$style.testB]: true }"></div>
+    <div :class="[$style.testA, { [$style.testB]: true }]"></div>
+  </div>
 </template>
 
 <style module lang="scss">
@@ -8,6 +13,9 @@
   .testA {
     background-color: red;
   }
+  .testB {
+    background-color: blue;
+  }
 </style>
 
 <style module lang="sass">
diff --git a/test/scss.spec.js b/test/scss.spec.js
index c59b2795..b2ed6741 100644
--- a/test/scss.spec.js
+++ b/test/scss.spec.js
@@ -3,12 +3,20 @@ import Sass from './resources/Sass.vue'
 import SassModule from './resources/SassModule.vue'
 
 describe('processes .vue file with scss style', () => {
-  it('does not error on scss or sass', () => {
-    const wrapper = shallow(Sass)
-    expect(wrapper.classes()).toContain('testA')
+  it('does not error on scss/sass', () => {
+    expect(() => shallow(Sass)).not.toThrow()
   })
-
   it('does not error on scss/sass module', () => {
     expect(() => shallow(SassModule)).not.toThrow()
   })
 })
+
+describe('processes .vue files which combine scss/sass and modules', () => {
+  it('does inject classes to $style', () => {
+    const wrapper = shallow(SassModule)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.vm.$style).toBeDefined()
+    expect(wrapper.vm.$style.testA).toBeDefined()
+    expect(wrapper.vm.$style.testB).toBeDefined()
+  })
+})