Styles (#50)

* 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

* Move style definition to beforeCreate in order to allow for usage in other parts of the lifecycle

* Stop importing classes for non-module CSS

Author: danielbastos11

lib/process.js

@@ -100,17 +100,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'
+      if (!module) return
+      const moduleName = ast.module === true ? '$style' : ast.module
       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}})()'
+    if (styleStr.length !== 0) {
+      output += '\n;(function() {' +
+      '\nvar beforeCreate = __vue__options__.beforeCreate' +
+      '\nvar styleFn = function () { ' + styleStr + ' }' +
+      '\n__vue__options__.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]' +
+      '\n})()'
+    }
   }
 
   return { code: output, map }

test/css.spec.js

@@ -1,8 +1,21 @@
 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')
+describe('processes .vue file with Css style', () => {
+  let wrapper
+  beforeAll(() => {
+    wrapper = shallow(Css)
+  })
+
+  it('should bind from style tags with named module', () => {
+    expect(wrapper.classes()).toContain('testA')
+  })
+
+  it('should bind from style tags with anonymous modules', () => {
+    expect(wrapper.classes()).toContain('testB')
+  })
+
+  it('should not bind from style tags without a module', () => {
+    expect(wrapper.vm.$style.testC).toBeFalsy()
+  })
 })

test/resources/Css.vue

@@ -13,8 +13,13 @@ export default {
     background-color: red;
   }
 </style>
-<style>
+<style module>
   .testB {
     background-color: blue;
   }
 </style>
+<style>
+  .testC {
+    background-color: blue;
+  }
+</style>

test/resources/Stylus.vue

@@ -13,8 +13,13 @@ export default {
     background-color: red;
   }
 </style>
-<style lang="styl">
+<style lang="styl" module>
   .testB {
     background-color: blue;
   }
 </style>
+<style>
+  .testC {
+    background-color: blue;
+  }
+</style>

test/stylus.spec.js

@@ -1,8 +1,21 @@
 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')
+describe('processes .vue file with Stylus style', () => {
+  let wrapper
+  beforeAll(() => {
+    wrapper = shallow(Stylus)
+  })
+
+  it('should bind from style tags with named module', () => {
+    expect(wrapper.classes()).toContain('testA')
+  })
+
+  it('should bind from style tags with anonymous modules', () => {
+    expect(wrapper.classes()).toContain('testB')
+  })
+
+  it('should not bind from style tags without a module', () => {
+    expect(wrapper.vm.$style.testC).toBeFalsy()
+  })
 })