feat: add pre and post transform system (#146)

Author: yohodopo

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

@@ -140,3 +140,9 @@ __options__.staticRenderFns = staticRenderFns
 
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2ljU3JjLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUhBO0FBS0E7QUFQQTtBQVNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFJQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSEE7QUFqQkEiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCB7XG4gIG5hbWU6ICdiYXNpYycsXG4gIGNvbXB1dGVkOiB7XG4gICAgaGVhZGluZ0NsYXNzZXM6IGZ1bmN0aW9uIGhlYWRpbmdDbGFzc2VzKCkge1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgcmVkOiB0aGlzLmlzQ3JhenksXG4gICAgICAgIGJsdWU6ICF0aGlzLmlzQ3JhenksXG4gICAgICAgIHNoYWRvdzogdGhpcy5pc0NyYXp5XG4gICAgICB9XG4gICAgfVxuICB9LFxuICBkYXRhOiBmdW5jdGlvbiBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICBtc2c6ICdXZWxjb21lIHRvIFlvdXIgVnVlLmpzIEFwcCcsXG4gICAgICBpc0NyYXp5OiBmYWxzZVxuICAgIH1cbiAgfSxcbiAgbWV0aG9kczoge1xuICAgIHRvZ2dsZUNsYXNzOiBmdW5jdGlvbiB0b2dnbGVDbGFzcygpIHtcbiAgICAgIHRoaXMuaXNDcmF6eSA9ICF0aGlzLmlzQ3JhenlcbiAgICB9XG4gIH1cbn1cbiJdfQ=="
 `;
+
+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/components/Sass.vue

@@ -13,3 +13,8 @@
 .d
   background-color: blue
 </style>
+
+<style lang="sass" module themed>
+.e
+  background-color: blue
+</style>

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="testA"></div>
+  <div class="testA">
+    <span :class="this.$style.g"></span>
+    <span :class="this.$style.dark.f"></span>
+  </div>
 </template>
 
 <style module lang="scss">
@@ -15,3 +18,9 @@
   background-color: red;
 }
 </style>
+
+<style lang="scss" module themed>
+.f {
+  background-color: red;
+}
+</style>

e2e/__projects__/babel-config/package.json

@@ -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": {
@@ -40,6 +42,11 @@
       "vue-jest": {
         "pug": {
           "basedir": "./"
+        },
+        "transform": {
+          "^scss$": "./scssTransform.js",
+          "^pcss|postcss$": "./pcssTransform.js",
+          "^js$": "./babel-transformer.js"
         }
       }
     }

e2e/__projects__/babel-config/pcssTransform.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/scssTransform.js

@@ -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/test.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', () => {
@@ -145,6 +148,7 @@ it('processes Sass', () => {
   expect(wrapper.vm.$style.a).toEqual('a')
   expect(wrapper.vm.$style.b).toEqual('b')
   expect(wrapper.vm.$style.c).toEqual('c')
+  expect(wrapper.vm.$style.light).toBeUndefined()
 })
 
 it('processes SCSS', () => {
@@ -154,6 +158,21 @@ it('processes SCSS', () => {
   expect(wrapper.vm.$style.c).toEqual('c')
 })
 
+test('processes SCSS using user specified post transforms', () => {
+  const wrapper = mount(Scss)
+  expect(wrapper.vm.$style.light.a).toBeUndefined()
+  expect(wrapper.vm.$style.light.f).toEqual('f')
+  expect(wrapper.vm.$style.dark.f).toEqual('f')
+  expect(wrapper.vm.$style.dark.g).toEqual('g')
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('processes SCSS using user specified pre transforms', () => {
+  const wrapper = mount(Scss)
+  expect(wrapper.vm.$style.g).toEqual('g')
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
 test('process Stylus', () => {
   const wrapper = mount(Stylus)
   expect(wrapper.vm).toBeTruthy()

e2e/test-runner.js

@@ -43,7 +43,7 @@ function runTest(dir) {
   run('npm install --silent')
 
   log('Running tests')
-  run('npm run test')
+   run('npm run test')
 
   success(`(${dir}) Complete`)
 }