support for custom transformers

Author: yohodopo

e2e/__projects__/babel-config/__snapshots__/test.js.snap

@@ -138,9 +138,11 @@ render._withStripped = true
 __options__.render = render
 __options__.staticRenderFns = staticRenderFns
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2ljU3JjLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUhBO0FBS0E7QUFQQTtBQVNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFJQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSEE7QUFqQkEiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCB7XG4gIG5hbWU6ICdiYXNpYycsXG4gIGNvbXB1dGVkOiB7XG4gICAgaGVhZGluZ0NsYXNzZXM6IGZ1bmN0aW9uIGhlYWRpbmdDbGFzc2VzKCkge1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgcmVkOiB0aGlzLmlzQ3JhenksXG4gICAgICAgIGJsdWU6ICF0aGlzLmlzQ3JhenksXG4gICAgICAgIHNoYWRvdzogdGhpcy5pc0NyYXp5XG4gICAgICB9XG4gICAgfVxuICB9LFxuICBkYXRhOiBmdW5jdGlvbiBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICBtc2c6ICdXZWxjb21lIHRvIFlvdXIgVnVlLmpzIEFwcCcsXG4gICAgICBpc0NyYXp5OiBmYWxzZVxuICAgIH1cbiAgfSxcbiAgbWV0aG9kczoge1xuICAgIHRvZ2dsZUNsYXNzOiBmdW5jdGlvbiB0b2dnbGVDbGFzcygpIHtcbiAgICAgIHRoaXMuaXNDcmF6eSA9ICF0aGlzLmlzQ3JhenlcbiAgICB9XG4gIH1cbn1cbiJdfQ=="
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2ljU3JjLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUhBO0FBS0E7QUFQQTtBQVNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFJQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSEE7QUFqQkEiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCB7XG4gIG5hbWU6ICdiYXNpYycsXG4gIGNvbXB1dGVkOiB7XG4gICAgaGVhZGluZ0NsYXNzZXM6IGZ1bmN0aW9uIGhlYWRpbmdDbGFzc2VzKCkge1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgcmVkOiB0aGlzLmlzQ3JhenksXG4gICAgICAgIGJsdWU6ICF0aGlzLmlzQ3JhenksXG4gICAgICAgIHNoYWRvdzogdGhpcy5pc0NyYXp5XG4gICAgICB9XG4gICAgfVxuICB9LFxuICBkYXRhOiBmdW5jdGlvbiBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICBtc2c6ICdXZWxjb21lIHRvIFlvdXIgVnVlLmpzIEFwcCcsXG4gICAgICBpc0NyYXp5OiBmYWxzZVxuICAgIH1cbiAgfSxcbiAgbWV0aG9kczoge1xuICAgIHRvZ2dsZUNsYXNzOiBmdW5jdGlvbiB0b2dnbGVDbGFzcygpIHtcbiAgICAgIHRoaXMuaXNDcmF6eSA9ICF0aGlzLmlzQ3JhenlcbiAgICB9XG4gIH1cbn0iXX0="
 `;
 
+exports[`processes PostCSS 1`] = `"<section><div></div> <div class=\\"red\\"></div></section>"`;
+
 exports[`processes SCSS using user specified post transforms 1`] = `"<div class=\\"testA\\"><span class=\\"g\\"></span> <span class=\\"f\\"></span></div>"`;
 
 exports[`processes SCSS using user specified pre transforms 1`] = `"<div class=\\"testA\\"><span class=\\"g\\"></span> <span class=\\"f\\"></span></div>"`;

e2e/__projects__/babel-config/babel-transformer.js

@@ -0,0 +1,5 @@
+const { createTransformer } = require('babel-jest')
+module.exports = createTransformer({
+  presets: ['@babel/preset-env'],
+  plugins: ['transform-vue-jsx']
+})

e2e/__projects__/babel-config/components/PostCss.vue

@@ -1,21 +1,18 @@
 <template>
-  <div :class="$style.testPcss"></div>
+  <section>
+    <div :class="$style.testPcss"></div>
+    <div :class="$style.red"></div>
+  </section>
 </template>
 
 <style lang="postcss">
 .testPcss {
-  background-color: purple;
+  background: color(purple a(90%));
 }
 </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;
-  }
+.red {
+  background: color(red a(90%));
 }
 </style>

e2e/__projects__/babel-config/cssPostTransform.js

@@ -21,6 +21,8 @@
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "jest": "^23.6.0",
     "node-sass": "^4.11.0",
+    "postcss": "^7.0.13",
+    "postcss-color-function": "^4.0.1",
     "vue-jest": "file:../../../"
   },
   "jest": {
@@ -41,11 +43,10 @@
         "pug": {
           "basedir": "./"
         },
-        "cssTransform": {
-          "scss": {
-            "post": "./cssPostTransform.js",
-            "pre": "./cssPreTransform.js"
-          }
+        "transform": {
+          "^scss$": "./scssTransform.js",
+          "^pcss|postcss$": "./pcssTransform.js",
+          "^js$": "./babel-transformer.js"
         }
       }
     }

e2e/__projects__/babel-config/cssPreTransform.js

@@ -0,0 +1,7 @@
+const postcss = require('postcss')
+var colorFunction = require('postcss-color-function')
+module.exports = {
+  process: function(content, filepath, config, attrs) {
+    return postcss([colorFunction()]).process(content).css
+  }
+}

e2e/__projects__/babel-config/package.json

@@ -0,0 +1,21 @@
+const cssExtract = require('extract-from-css')
+module.exports = {
+  postProcess: function postProcess(src, filepath, config, attrs) {
+    const cssNames = cssExtract.extractClasses(src)
+    const obj = {}
+    for (let i = 0, l = cssNames.length; i < l; i++) {
+      obj[cssNames[i]] = cssNames[i]
+    }
+
+    if (attrs.themed) {
+      return {
+        light: obj,
+        dark: obj
+      }
+    }
+    return obj
+  },
+  preProcess: function postProcess(src, filepath, config, attrs) {
+    return `${src}\n .g{width: 10px}`
+  }
+}

e2e/__projects__/babel-config/pcssTransform.js

@@ -25,6 +25,7 @@ import Constructor from './components/Constructor.vue'
 
 test('processes .vue files', () => {
   const wrapper = mount(Basic)
+  expect(wrapper.vm.msg).toEqual('Welcome to Your Vue.js App')
   wrapper.vm.toggleClass()
 })
 
@@ -119,7 +120,9 @@ it('processes Less', () => {
 
 it('processes PostCSS', () => {
   const wrapper = mount(PostCss)
-  expect(wrapper.is('div')).toBeTruthy()
+  expect(wrapper.is('section')).toBeTruthy()
+  expect(wrapper.vm.$style.red).toEqual('red')
+  expect(wrapper.html()).toMatchSnapshot()
 })
 
 test('processes pug templates', () => {

e2e/__projects__/babel-config/scssTransform.js

@@ -33,17 +33,17 @@ function runTest(dir) {
 
   log('Running tests')
 
-  log('Removing node_modules')
-  fs.removeSync(`${resolvedPath}/node_modules`)
+  // log('Removing node_modules')
+  // fs.removeSync(`${resolvedPath}/node_modules`)
 
-  log('Removing package-lock.json')
-  fs.removeSync(`${resolvedPath}/package-lock.json`)
+  // log('Removing package-lock.json')
+  // fs.removeSync(`${resolvedPath}/package-lock.json`)
 
-  log('Installing node_modules')
-  run('npm install --silent')
+  // log('Installing node_modules')
+  // run('npm install --silent')
 
-  log('Running tests')
-  run('npm run test')
+  // log('Running tests')
+   run('npm run test')
 
   success(`(${dir}) Complete`)
 }

e2e/__projects__/babel-config/test.js

@@ -3,12 +3,16 @@ const babelJest = require('babel-jest')
 const getBabelOptions = require('../utils').getBabelOptions
 const getTsJestConfig = require('../utils').getTsJestConfig
 const stripInlineSourceMap = require('../utils').stripInlineSourceMap
+const getCustomTransformer = require('../utils').getCustomTransformer
+const getVueJestConfig = require('../utils').getVueJestConfig
 
 module.exports = function compileTypescript(scriptContent, filePath, config) {
   ensureRequire('typescript', ['typescript'])
   const typescript = require('typescript')
-
-  const { tsconfig } = getTsJestConfig(config)
+  const vueJestConfig = getVueJestConfig(config)
+  const {
+    tsconfig
+  } = getTsJestConfig(config)
   const babelOptions = getBabelOptions(filePath)
 
   const res = typescript.transpileModule(scriptContent, tsconfig)
@@ -26,10 +30,12 @@ module.exports = function compileTypescript(scriptContent, filePath, config) {
       plugins: [require('@babel/plugin-transform-modules-commonjs')]
     }
   }
-
-  const transformer = babelJest.createTransformer(
-    Object.assign(inlineBabelOptions, { inputSourceMap })
+  const customTransformer = getCustomTransformer(vueJestConfig['transform'], 'js');
+  const transformer = customTransformer.process ? customTransformer : babelJest.createTransformer(
+    Object.assign(inlineBabelOptions, {
+      inputSourceMap
+    })
   )
 
   return transformer.process(res.outputText, filePath, config)
-}
+}