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') +})