refactor: use component compiler utils to compile style (#150)

Author: eddyerburgh

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

@@ -15,8 +15,7 @@
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.2.3",
     "@vue/test-utils": "^1.0.0-beta.28",
-    "babel-core": "^7.0.0-bridge.0",
-    "jest": "^23.6.0",
+    "jest": "^24.0.0",
     "vue-jest": "file:../../../"
   },
   "jest": {
@@ -28,9 +27,6 @@
     "transform": {
       "^.+\\.js$": "babel-jest",
       "^.+\\.vue$": "vue-jest"
-    },
-    "moduleNameMapper": {
-      "^~?__styles/(.*)$": "<rootDir>/components/styles/$1"
     }
   },
   "babel": {

e2e/__projects__/babel-in-package/package.json

@@ -140,9 +140,3 @@ __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/__snapshots__/test.js.snap e2e/__projects__/basic/__snapshots__/test.js.snap

@@ -1,5 +1,5 @@
 {
-  "name": "babel-config",
+  "name": "basic",
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
@@ -15,14 +15,10 @@
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.2.3",
     "@vue/test-utils": "^1.0.0-beta.28",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "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",
+    "jest": "^24.0.0",
     "vue-jest": "file:../../../"
   },
   "jest": {
@@ -42,11 +38,6 @@
       "vue-jest": {
         "pug": {
           "basedir": "./"
-        },
-        "transform": {
-          "^scss$": "./scssTransform.js",
-          "^pcss|postcss$": "./pcssTransform.js",
-          "^js$": "./babel-transformer.js"
         }
       }
     }

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

@@ -1,11 +1,8 @@
 import { mount } from '@vue/test-utils'
 import TypeScript from './components/TypeScript.vue'
-import Stylus from './components/Stylus.vue'
 import { resolve } from 'path'
 import { readFileSync } from 'fs'
 import jestVue from 'vue-jest'
-import Scss from './components/Scss.vue'
-import Sass from './components/Sass.vue'
 import RenderFunction from './components/RenderFunction.vue'
 import Jade from './components/Jade.vue'
 import FunctionalSFC from './components/FunctionalSFC.vue'
@@ -16,8 +13,6 @@ import Coffee from './components/Coffee.vue'
 import CoffeeScript from './components/CoffeeScript.vue'
 import FunctionalSFCParent from './components/FunctionalSFCParent.vue'
 import NoScript from './components/NoScript.vue'
-import Less from './components/Less.vue'
-import PostCss from './components/PostCss.vue'
 import Pug from './components/Pug.vue'
 import PugRelative from './components/PugRelativeExtends.vue'
 import Jsx from './components/Jsx.vue'
@@ -113,18 +108,6 @@ test('processes .vue file with jade template', () => {
   expect(wrapper.classes()).toContain('jade')
 })
 
-it('processes Less', () => {
-  const wrapper = mount(Less)
-  expect(wrapper.is('div')).toBeTruthy()
-})
-
-it('processes PostCSS', () => {
-  const wrapper = mount(PostCss)
-  expect(wrapper.is('section')).toBeTruthy()
-  expect(wrapper.vm.$style.red).toEqual('red')
-  expect(wrapper.html()).toMatchSnapshot()
-})
-
 test('processes pug templates', () => {
   const wrapper = mount(Pug)
   expect(wrapper.is('div')).toBeTruthy()
@@ -142,38 +125,3 @@ test('processes SFC with no template', () => {
   const wrapper = mount(RenderFunction)
   expect(wrapper.is('section')).toBe(true)
 })
-
-it('processes Sass', () => {
-  const wrapper = mount(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', () => {
-  const wrapper = mount(Scss)
-  expect(wrapper.vm.$style.a).toEqual('a')
-  expect(wrapper.vm.$style.b).toEqual('b')
-  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/__projects__/babel-config/components/Basic.vue e2e/__projects__/basic/components/Basic.vue

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env']
+}

e2e/__projects__/babel-config/components/BasicSrc.html e2e/__projects__/basic/components/BasicSrc.html

@@ -1,26 +1,18 @@
 <template>
-  <div class="testA">
+  <div>
     <span :class="this.$style.g"></span>
     <span :class="this.$style.dark.f"></span>
   </div>
 </template>
 
-<style module lang="scss">
-@import '~__styles/scss-a';
-
-.c {
+<style lang="scss" module themed>
+.f {
   background-color: red;
 }
 </style>
 
-<style lang="scss">
+<style lang="scss" module>
 .d {
   background-color: red;
 }
 </style>
-
-<style lang="scss" module themed>
-.f {
-  background-color: red;
-}
-</style>

e2e/__projects__/babel-config/components/BasicSrc.js e2e/__projects__/basic/components/BasicSrc.js

@@ -0,0 +1,47 @@
+{
+  "name": "custom-transformers",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "test": "jest --no-cache --coverage test.js"
+  },
+  "dependencies": {
+    "vue": "^2.5.21",
+    "vue-template-compiler": "^2.5.21"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "@vue/test-utils": "^1.0.0-beta.28",
+    "jest": "^24.0.0",
+    "node-sass": "^4.11.0",
+    "postcss": "^7.0.13",
+    "postcss-color-function": "^4.0.1",
+    "vue-jest": "file:../../../"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.vue$": "vue-jest"
+    },
+    "moduleNameMapper": {
+      "^~?__styles/(.*)$": "<rootDir>/components/styles/$1"
+    },
+    "globals": {
+      "vue-jest": {
+        "transform": {
+          "^scss$": "./scss-transformer.js",
+          "^pcss|postcss$": "./pcss-transformer.js",
+          "^js$": "./babel-transformer.js"
+        }
+      }
+    }
+  }
+}

e2e/__projects__/babel-config/components/BasicSrc.vue e2e/__projects__/basic/components/BasicSrc.vue

@@ -1,21 +1,22 @@
 const cssExtract = require('extract-from-css')
 module.exports = {
-  postProcess: function postProcess(src, filepath, config, attrs) {
+  preprocess: function preprocess(src, filepath, config, attrs) {
+    return `${src}\n .g{width: 10px}`
+  },
+  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
-      }
+    if (!attrs.themed) {
+      return JSON.stringify(obj)
     }
-    return obj
-  },
-  preProcess: function postProcess(src, filepath, config, attrs) {
-    return `${src}\n .g{width: 10px}`
+
+    return JSON.stringify({
+      light: obj,
+      dark: obj
+    })
   }
 }

e2e/__projects__/babel-config/components/Coffee.vue e2e/__projects__/basic/components/Coffee.vue

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils'
+import Scss from './components/Scss.vue'
+
+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')
+})
+
+test('processes SCSS using user specified pre transforms', () => {
+  const wrapper = mount(Scss)
+  expect(wrapper.vm.$style.g).toEqual('g')
+})

e2e/__projects__/babel-config/components/CoffeeScript.vue e2e/__projects__/basic/components/CoffeeScript.vue

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env']
+}

e2e/__projects__/babel-config/components/Constructor.vue e2e/__projects__/basic/components/Constructor.vue

@@ -3,11 +3,7 @@
 </template>
 
 <style module lang="less">
-.testLess {
+.a {
   background-color: @primary-color;
 }
 </style>
-
-<style lang="less">
-@primary-color: #333;
-</style>

e2e/__projects__/babel-config/components/FunctionalSFC.vue e2e/__projects__/basic/components/FunctionalSFC.vue

@@ -1,18 +1,18 @@
 <template>
   <section>
-    <div :class="$style.testPcss"></div>
-    <div :class="$style.red"></div>
+    <div :class="$style.a"></div>
+    <div :class="$style.b"></div>
   </section>
 </template>
 
-<style lang="postcss">
-.testPcss {
+<style module lang="postcss">
+.a {
   background: color(purple a(90%));
 }
 </style>
 
 <style module lang="pcss">
-.red {
+.b {
   background: color(red a(90%));
 }
 </style>

e2e/__projects__/babel-config/components/FunctionalSFCParent.vue e2e/__projects__/basic/components/FunctionalSFCParent.vue

@@ -0,0 +1,23 @@
+<template>
+  <div />
+</template>
+
+<style lang="scss" module>
+@import '~__styles/scss-a';
+
+.c {
+  background-color: $primary-color;
+}
+</style>
+
+<style lang="scss">
+.d {
+  background-color: red;
+}
+</style>
+
+<style lang="scss" module themed>
+.f {
+  background-color: red;
+}
+</style>

e2e/__projects__/babel-config/components/Jade.vue e2e/__projects__/basic/components/Jade.vue

@@ -2,21 +2,16 @@
   <div />
 </template>
 
-<script>
-export default {
-  name: 'Button'
-}
-</script>
-
 <style lang="stylus" module="css">
 @import './relative/resource';
-.testA {
+
+.a {
   background-color: red;
 }
 </style>
 
 <style lang="styl" module>
-.testB {
+.b {
   background-color: blue;
 }
 </style>