suppress the error when using sass, postcss, less module (#70)

Author: rchaser53

lib/process.js

@@ -107,12 +107,10 @@ module.exports = function (src, filePath) {
 
     const styleStr = parts.styles.map(ast => {
       if (!module) return
-      if (/^scss|sass|less|pcss|postcss/.test(ast.lang)) {
-        return false
-      }
-
+      const styleObj = (/^scss|sass|less|pcss|postcss/.test(ast.lang))
+        ? {}
+        : processStyle(ast, filePath)
       const moduleName = ast.module === true ? '$style' : ast.module
-      const styleObj = processStyle(ast, filePath)
 
       return '\n  this[\'' + moduleName + '\'] = ' + JSON.stringify(styleObj)
     }).filter(_ => _)

test/less.spec.js

@@ -1,9 +1,14 @@
 import { shallow } from 'vue-test-utils'
 import Less from './resources/Less.vue'
+import LessModule from './resources/LessModule.vue'
 
 describe('processes .vue file with Less style', () => {
   it('does not error on less', () => {
     const wrapper = shallow(Less)
     expect(wrapper.classes()).toContain('testLess')
   })
+
+  it('does not error on less module', () => {
+    expect(() => shallow(LessModule)).not.toThrow()
+  })
 })

test/postcss.spec.js

@@ -1,9 +1,14 @@
 import { shallow } from 'vue-test-utils'
 import PostCss from './resources/PostCss.vue'
+import PostCssModule from './resources/PostCssModule.vue'
 
 describe('processes .vue file with PostCSS style', () => {
   it('does not error on pcss/postcss', () => {
     const wrapper = shallow(PostCss)
     expect(wrapper.classes()).toContain('testPcss')
   })
+
+  it('does not error on pcss/postcss module', () => {
+    expect(() => shallow(PostCssModule)).not.toThrow()
+  })
 })

test/resources/LessModule.vue

@@ -0,0 +1,15 @@
+<template>
+  <div :class="$style.testLess"></div>
+</template>
+
+<style module lang="less">
+  @import "./styles/transitions";
+
+  .testLess {
+    background-color: red;
+  }
+</style>
+
+<style module lang="less">
+  @primary-color: #333;
+</style>

test/resources/PostCssModule.vue

@@ -0,0 +1,23 @@
+<template>
+  <div :class="$style.testPcss"></div>
+</template>
+
+<style module lang="postcss">
+  @import "./styles/transitions";
+
+  .testPcss {
+    background-color: purple;
+  }
+</style>
+
+<style module lang="pcss">
+  /* This syntax is for postcss-custom-properties */
+  --primary-color: green;
+
+  /* This syntax is for postcss-nesting, but invalid as Pure CSS */
+  body {
+    @media screen {
+      background-color: grey;
+    }
+  }
+</style>

test/resources/SassModule.vue

@@ -0,0 +1,15 @@
+<template>
+  <div :class="$style.testA"></div>
+</template>
+
+<style module lang="scss">
+  @import "./styles/transitions";
+
+  .testA {
+    background-color: red;
+  }
+</style>
+
+<style module lang="sass">
+  $primary-color: #333
+</style>

test/scss.spec.js

@@ -1,9 +1,14 @@
 import { shallow } from 'vue-test-utils'
 import Sass from './resources/Sass.vue'
+import SassModule from './resources/SassModule.vue'
 
 describe('processes .vue file with Stylus 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 module', () => {
+    expect(() => shallow(SassModule)).not.toThrow()
+  })
 })