Merge pull request #195 from mrvasia/postcss

added support postcss

Author: lmiller1990

lib/compilers/postcss-compiler.js

@@ -0,0 +1,77 @@
+const postcss = require('postcss')
+const postcssrc = require('postcss-load-config')
+const ctx = { parser: true, map: 'inline' }
+const { plugins } = postcssrc.sync(ctx)
+const logger = require('../logger')
+const getVueJestConfig = require('../get-vue-jest-config')
+const ensureRequire = require('../ensure-require')
+
+let prevCheckIsAsync = null
+function hasAsyncPlugin () {
+  if (prevCheckIsAsync !== null) {
+    return prevCheckIsAsync
+  }
+  const result = postcss(plugins)
+    .process('', {
+      from: undefined
+    })
+
+  if (result.processing) {
+    prevCheckIsAsync = true
+    return prevCheckIsAsync
+  }
+  for (const plugin of result.processor.plugins) {
+    const promise = result.run(plugin)
+    if (typeof promise === 'object' && typeof promise.then === 'function') {
+      prevCheckIsAsync = true
+      break
+    }
+  }
+  if (prevCheckIsAsync === null) {
+    prevCheckIsAsync = false
+  }
+
+  return prevCheckIsAsync
+}
+
+function catchError (error, filePath, jestConfig) {
+  if (!getVueJestConfig(jestConfig).hideStyleWarn) {
+    logger.warn(`There was an error rendering the POSTCSS in ${filePath}. `)
+    logger.warn(`Error while compiling styles: ${error}`)
+  }
+}
+
+module.exports = (content, filePath, jestConfig) => {
+  ensureRequire('postcss', ['postcss'])
+
+  let css = null
+
+  const res = postcss(plugins)
+    .process(content, {
+      from: undefined
+    })
+
+  if (hasAsyncPlugin()) {
+    res
+      .then(result => {
+        css = result.css || ''
+      })
+      .catch((e) => {
+        css = ''
+        catchError(e, filePath, jestConfig)
+      })
+
+    while (css === null) { //eslint-disable-line
+      require('deasync').sleep(100)
+    }
+
+    return css
+  }
+
+  try {
+    return res.css
+  } catch (e) {
+    catchError(e, filePath, jestConfig)
+    return ''
+  }
+}

lib/process-style.js

@@ -22,6 +22,10 @@ module.exports = function processStyle (stylePart, filePath, jestConfig = {}) {
     case 'sass':
       cssCode = processStyleByLang('sass')
       break
+    case 'pcss':
+    case 'postcss':
+      cssCode = processStyleByLang('postcss')
+      break
   }
 
   const cssNames = cssExtract.extractClasses(cssCode)

lib/process.js

@@ -80,15 +80,15 @@ module.exports = function (src, filePath, jestConfig) {
   }
 
   if (Array.isArray(parts.styles) && parts.styles.length > 0) {
-    if ((parts.styles.some(ast => /^less|pcss|postcss/.test(ast.lang))) && logger.shouldLogStyleWarn) {
-      !vueJestConfig.hideStyleWarn && logger.warn('Less and PostCSS are not currently compiled by vue-jest')
+    if ((parts.styles.some(ast => /^less/.test(ast.lang))) && logger.shouldLogStyleWarn) {
+      !vueJestConfig.hideStyleWarn && logger.warn('Less are not currently compiled by vue-jest')
       logger.shouldLogStyleWarn = false
     }
 
     const styleStr = parts.styles
       .filter(ast => ast.module)
       .map(ast => {
-        const styleObj = (/^less|pcss|postcss/.test(ast.lang))
+        const styleObj = (/^less/.test(ast.lang))
           ? {}
           : processStyle(ast, filePath, jestConfig)
 

package.json

@@ -46,6 +46,10 @@
     "jade": "^1.11.0",
     "jest": "^20.0.4",
     "node-sass": "^4.10.0",
+    "postcss": "^7.0.18",
+    "postcss-css-variables": "^0.13.0",
+    "postcss-load-config": "^2.1.0",
+    "postcss-nested": "^4.1.2",
     "pug": "^2.0.0-rc.3",
     "stylus": "^0.54.5",
     "typescript": "^2.5.2",
@@ -60,6 +64,7 @@
   "dependencies": {
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "chalk": "^2.1.0",
+    "deasync": "^0.1.15",
     "extract-from-css": "^0.4.4",
     "find-babel-config": "^1.1.0",
     "js-beautify": "^1.6.14",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    'postcss-css-variables': {},
+    '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>