diff --git a/lib/process.js b/lib/process.js
index 0d70621b..805b6497 100644
--- a/lib/process.js
+++ b/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 }
}
diff --git a/package.json b/package.json
index 8524956f..e5b1834c 100644
--- a/package.json
+++ b/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",
diff --git a/test/css.spec.js b/test/css.spec.js
new file mode 100644
index 00000000..3fe8f940
--- /dev/null
+++ b/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')
+})
diff --git a/test/resources/Css.vue b/test/resources/Css.vue
new file mode 100644
index 00000000..f831d0f6
--- /dev/null
+++ b/test/resources/Css.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
diff --git a/test/resources/Stylus.vue b/test/resources/Stylus.vue
new file mode 100644
index 00000000..0edb1ed9
--- /dev/null
+++ b/test/resources/Stylus.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
diff --git a/test/stylus.spec.js b/test/stylus.spec.js
new file mode 100644
index 00000000..3c812aa9
--- /dev/null
+++ b/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')
+})