Add support for <style> and the Stylus lang (#49)

* Add support for <style> and the Stylus lang

* Add Stylus as dev dependency

* Add test for vanilla CSS

* Group styles HOCs into one single HOC

* Fix typo in test name

Author: danielbastos11

lib/process.js

@@ -8,6 +8,7 @@ const compileCoffeeScript = require('./compilers/coffee-compiler')
 const extractPropsFromFunctionalTemplate = require('./extract-props')
 const fs = require('fs')
 const join = require('path').join
+const cssExtract = require('extract-from-css')
 
 const splitRE = /\r?\n/g
 
@@ -27,6 +28,25 @@ function processScript (scriptPart) {
   return compileBabel(scriptPart.content)
 }
 
+function processStyle (stylePart) {
+  if (!stylePart) return {}
+
+  let cssCode = stylePart.content
+  if (/^styl|stylus$/.test(stylePart.lang)) {
+    const stylus = require('stylus')
+    cssCode = stylus.render(stylePart.content)
+  }
+
+  const cssNames = cssExtract.extractClasses(cssCode)
+  const obj = {}
+
+  for (let i = 0, l = cssNames.length; i < l; i++) {
+    obj[cssNames[i]] = cssNames[i]
+  }
+
+  return obj
+}
+
 function changePartsIfFunctional (parts) {
   const isFunctional = parts.template && parts.template.attrs && parts.template.attrs.functional
   if (isFunctional) {
@@ -78,5 +98,20 @@ module.exports = function (src, path) {
     }
   }
 
+  if (Array.isArray(parts.styles) && parts.styles.length > 0) {
+    const styleStr = parts.styles.map(ast => {
+      const moduleName = ast.module || '$style'
+      const styleObj = processStyle(ast)
+
+      return '\n  this[\'' + moduleName + '\'] = ' + JSON.stringify(styleObj)
+    })
+
+    output += '\n;(function() {' +
+      '\nvar render = __vue__options__.render' +
+      '\n__vue__options__.render = function(h) {' + styleStr +
+      '\n  return render.call(this, h)' +
+      '\n}})()'
+  }
+
   return { code: output, map }
 }

package.json

@@ -45,6 +45,7 @@
     "jade": "^1.11.0",
     "jest": "^20.0.4",
     "pug": "^2.0.0-rc.3",
+    "stylus": "^0.54.5",
     "typescript": "^2.5.2",
     "vue": "^2.4.2",
     "vue-template-compiler": "^2.4.2",
@@ -58,6 +59,7 @@
   "dependencies": {
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "chalk": "^2.1.0",
+    "extract-from-css": "^0.4.4",
     "find-babel-config": "^1.1.0",
     "js-beautify": "^1.6.14",
     "node-cache": "^4.1.1",

test/css.spec.js

@@ -0,0 +1,8 @@
+import { shallow } from 'vue-test-utils'
+import Css from './resources/Css.vue'
+
+test('processes .vue file with Css style', () => {
+  const wrapper = shallow(Css)
+  expect(wrapper.classes()).toContain('testA')
+  expect(wrapper.classes()).toContain('testB')
+})

test/resources/Css.vue

@@ -0,0 +1,20 @@
+<template>
+  <div :class="[css.testA, $style.testB]"></div>
+</template>
+
+<script>
+export default {
+  name: 'Button',
+}
+</script>
+
+<style module="css">
+  .testA {
+    background-color: red;
+  }
+</style>
+<style>
+  .testB {
+    background-color: blue;
+  }
+</style>

test/resources/Stylus.vue

@@ -0,0 +1,20 @@
+<template>
+  <div :class="[css.testA, $style.testB]"></div>
+</template>
+
+<script>
+export default {
+  name: 'Button',
+}
+</script>
+
+<style lang="stylus" module="css">
+  .testA {
+    background-color: red;
+  }
+</style>
+<style lang="styl">
+  .testB {
+    background-color: blue;
+  }
+</style>

test/stylus.spec.js

@@ -0,0 +1,8 @@
+import { shallow } from 'vue-test-utils'
+import Stylus from './resources/Stylus.vue'
+
+test('processes .vue file with Stylus style', () => {
+  const wrapper = shallow(Stylus)
+  expect(wrapper.classes()).toContain('testA')
+  expect(wrapper.classes()).toContain('testB')
+})