fix: avoid parsing LESS, and PostCSS (#58)

Author: hmsk

lib/process.js

@@ -103,8 +103,8 @@ module.exports = function (src, filePath) {
   if (Array.isArray(parts.styles) && parts.styles.length > 0) {
     const styleStr = parts.styles.map(ast => {
       if (!module) return
-      if (/^scss|sass/.test(ast.lang)) {
-        logger.warn('scss and sass are not currently compiled by vue-jest')
+      if (/^scss|sass|less|pcss|postcss/.test(ast.lang)) {
+        logger.warn('Sass/SCSS, Less and PostCSS are not currently compiled by vue-jest')
         return false
       }
 

test/less.spec.js

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

test/postcss.spec.js

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

test/resources/Less.vue

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

test/resources/PostCss.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="testPcss"></div>
+</template>
+
+<style lang="postcss">
+  @import "./styles/transitions";
+
+  .testPcss {
+    background-color: purple;
+  }
+</style>
+
+<style 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>