Skip to content

Commit 7791d8e

Browse files
danielbastos11eddyerburgh
authored andcommitted
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
1 parent fff35e7 commit 7791d8e

File tree

6 files changed

+93
-0
lines changed

6 files changed

+93
-0
lines changed

lib/process.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const compileCoffeeScript = require('./compilers/coffee-compiler')
88
const extractPropsFromFunctionalTemplate = require('./extract-props')
99
const fs = require('fs')
1010
const join = require('path').join
11+
const cssExtract = require('extract-from-css')
1112

1213
const splitRE = /\r?\n/g
1314

@@ -27,6 +28,25 @@ function processScript (scriptPart) {
2728
return compileBabel(scriptPart.content)
2829
}
2930

31+
function processStyle (stylePart) {
32+
if (!stylePart) return {}
33+
34+
let cssCode = stylePart.content
35+
if (/^styl|stylus$/.test(stylePart.lang)) {
36+
const stylus = require('stylus')
37+
cssCode = stylus.render(stylePart.content)
38+
}
39+
40+
const cssNames = cssExtract.extractClasses(cssCode)
41+
const obj = {}
42+
43+
for (let i = 0, l = cssNames.length; i < l; i++) {
44+
obj[cssNames[i]] = cssNames[i]
45+
}
46+
47+
return obj
48+
}
49+
3050
function changePartsIfFunctional (parts) {
3151
const isFunctional = parts.template && parts.template.attrs && parts.template.attrs.functional
3252
if (isFunctional) {
@@ -78,5 +98,20 @@ module.exports = function (src, path) {
7898
}
7999
}
80100

101+
if (Array.isArray(parts.styles) && parts.styles.length > 0) {
102+
const styleStr = parts.styles.map(ast => {
103+
const moduleName = ast.module || '$style'
104+
const styleObj = processStyle(ast)
105+
106+
return '\n this[\'' + moduleName + '\'] = ' + JSON.stringify(styleObj)
107+
})
108+
109+
output += '\n;(function() {' +
110+
'\nvar render = __vue__options__.render' +
111+
'\n__vue__options__.render = function(h) {' + styleStr +
112+
'\n return render.call(this, h)' +
113+
'\n}})()'
114+
}
115+
81116
return { code: output, map }
82117
}

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"jade": "^1.11.0",
4646
"jest": "^20.0.4",
4747
"pug": "^2.0.0-rc.3",
48+
"stylus": "^0.54.5",
4849
"typescript": "^2.5.2",
4950
"vue": "^2.4.2",
5051
"vue-template-compiler": "^2.4.2",
@@ -58,6 +59,7 @@
5859
"dependencies": {
5960
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
6061
"chalk": "^2.1.0",
62+
"extract-from-css": "^0.4.4",
6163
"find-babel-config": "^1.1.0",
6264
"js-beautify": "^1.6.14",
6365
"node-cache": "^4.1.1",

test/css.spec.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { shallow } from 'vue-test-utils'
2+
import Css from './resources/Css.vue'
3+
4+
test('processes .vue file with Css style', () => {
5+
const wrapper = shallow(Css)
6+
expect(wrapper.classes()).toContain('testA')
7+
expect(wrapper.classes()).toContain('testB')
8+
})

test/resources/Css.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div :class="[css.testA, $style.testB]"></div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: 'Button',
8+
}
9+
</script>
10+
11+
<style module="css">
12+
.testA {
13+
background-color: red;
14+
}
15+
</style>
16+
<style>
17+
.testB {
18+
background-color: blue;
19+
}
20+
</style>

test/resources/Stylus.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div :class="[css.testA, $style.testB]"></div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: 'Button',
8+
}
9+
</script>
10+
11+
<style lang="stylus" module="css">
12+
.testA {
13+
background-color: red;
14+
}
15+
</style>
16+
<style lang="styl">
17+
.testB {
18+
background-color: blue;
19+
}
20+
</style>

test/stylus.spec.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { shallow } from 'vue-test-utils'
2+
import Stylus from './resources/Stylus.vue'
3+
4+
test('processes .vue file with Stylus style', () => {
5+
const wrapper = shallow(Stylus)
6+
expect(wrapper.classes()).toContain('testA')
7+
expect(wrapper.classes()).toContain('testB')
8+
})

0 commit comments

Comments
 (0)