fix test

Author: vasia

lib/compilers/postcss-compiler.js

@@ -9,7 +9,9 @@ module.exports = (content) => {
   let css = null
 
   postcss(plugins)
-    .process(content)
+    .process(content, {
+      from: undefined
+    })
     .then(result => {
       css = result.css || ''
     })

lib/process.js

@@ -81,7 +81,7 @@ module.exports = function (src, filePath, jestConfig) {
 
   if (Array.isArray(parts.styles) && parts.styles.length > 0) {
     if ((parts.styles.some(ast => /^less/.test(ast.lang))) && logger.shouldLogStyleWarn) {
-      !vueJestConfig.hideStyleWarn && logger.warn('Less and PostCSS are not currently compiled by vue-jest')
+      !vueJestConfig.hideStyleWarn && logger.warn('Less are not currently compiled by vue-jest')
       logger.shouldLogStyleWarn = false
     }
 

package.json

@@ -46,6 +46,7 @@
     "jade": "^1.11.0",
     "jest": "^20.0.4",
     "node-sass": "^4.10.0",
+    "postcss-custom-properties": "^9.0.2",
     "pug": "^2.0.0-rc.3",
     "stylus": "^0.54.5",
     "typescript": "^2.5.2",
@@ -68,6 +69,7 @@
     "object-assign": "^4.1.1",
     "postcss": "^7.0.17",
     "postcss-load-config": "^2.1.0",
+    "postcss-nested": "^4.1.2",
     "source-map": "^0.5.6",
     "tsconfig": "^7.0.0",
     "vue-template-es2015-compiler": "^1.6.0"

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    'postcss-custom-properties': {},
+    'postcss-nested': {}
+  }
+}

test/postcss.spec.js

@@ -3,12 +3,25 @@ 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 = shallowMount(PostCss)
+  const wrapper = shallowMount(PostCss)
+
+  it('does stick classes to component', () => {
     expect(wrapper.classes()).toContain('testPcss')
   })
 
-  it('does not error on pcss/postcss module', () => {
-    expect(() => shallowMount(PostCssModule)).not.toThrow()
+  it('does stick next classes to component', () => {
+    expect(wrapper.find('span').classes()).toContain('nestedCom')
+  })
+
+  const wrapperModules = shallowMount(PostCssModule)
+
+  const classListModules = Object.keys(wrapperModules.vm.$style)
+
+  it('does inject classes to $style', () => {
+    expect(classListModules).toContain('testPcss')
+  })
+
+  it('does inject nested classes to $style', () => {
+    expect(classListModules).toContain('nestedClass')
   })
 })

test/resources/PostCss.vue

@@ -1,10 +1,16 @@
 <template>
-  <div class="testPcss"></div>
+  <div class="testPcss">
+    <span class="nestedCom"></span>
+  </div>
 </template>
 
 <style lang="postcss">
   .testPcss {
     background-color: purple;
+
+    & .nestedCom {
+      background-color: purple;
+    }
   }
 </style>
 

test/resources/PostCssModule.vue

@@ -5,17 +5,23 @@
 <style module lang="postcss">
   .testPcss {
     background-color: purple;
+
+		& .nestedClass {
+			background-color: purple;
+		}
   }
 </style>
 
 <style module lang="pcss">
   /* This syntax is for postcss-custom-properties */
-  --primary-color: green;
+	:root {
+		primary-color: green;
+	}
 
   /* This syntax is for postcss-nesting, but invalid as Pure CSS */
   body {
     @media screen {
-      background-color: grey;
+      background-color: var(--primary-color);
     }
   }
 </style>