Skip to content

Commit 84c15ed

Browse files
YutamaKotaroYutamaKotaro
authored
add css-module feature (#345)
* add css-module feature * remove excess code
1 parent d086ee5 commit 84c15ed

File tree

12 files changed

+148
-32
lines changed

12 files changed

+148
-32
lines changed

‎e2e/__projects__/basic/__snapshots__/test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function render(_ctx, _cache) {
4242
]));
4343
}
4444
exports.render = render;
45-
;exports.default = {...exports.default, render};"
45+
;exports.default = {...exports.default, render};;exports.default = {...exports.default, __cssModules: {\\"css\\":{\\"testA\\":\\"testA\\"},\\"$style\\":{\\"testB\\":\\"testB\\"}}}"
4646
`;
4747
4848
exports[`generates source maps using src attributes 1`] = `

‎e2e/__projects__/style/components/External.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div :class="$style.testClass">
3-
<div class="a" />
3+
<div :class="css.a" />
44
</div>
55
</template>
66

‎e2e/__projects__/style/components/Less.vue‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
11
<template>
2-
<div />
2+
<div>
3+
<div :class="$style.a">a</div>
4+
<div :class="styles.b">b</div>
5+
</div>
36
</template>
47

8+
<script>
9+
import { useCssModule, defineComponent } from 'vue'
10+
export default defineComponent({
11+
setup() {
12+
const styles = useCssModule()
13+
14+
return {
15+
styles
16+
}
17+
}
18+
})
19+
</script>
20+
521
<style module lang="less">
622
.a {
723
background-color: @primary-color;
824
}
25+
.b {
26+
color: @primary-color;
27+
}
928
</style>

‎e2e/__projects__/style/components/PostCss.vue‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
11
<template>
22
<section>
3-
<div :class="$style.a"></div>
4-
<div :class="$style.b"></div>
3+
<div :class="$style.c"></div>
4+
<div :class="style.d"></div>
55
</section>
66
</template>
77

8+
<script>
9+
import { useCssModule, defineComponent } from 'vue'
10+
export default defineComponent({
11+
setup() {
12+
const style = useCssModule()
13+
return {
14+
style
15+
}
16+
}
17+
})
18+
</script>
19+
820
<style module lang="postcss">
9-
.a {
21+
.c {
1022
background: color(purple a(90%));
1123
}
1224
</style>
1325

1426
<style module lang="pcss">
15-
.b {
27+
.d {
1628
background: color(red a(90%));
1729
}
1830
</style>

‎e2e/__projects__/style/components/Sass.vue‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,26 @@
11
<template>
2-
<div />
2+
<div>
3+
<div :class="$style.a"></div>
4+
<div :class="style.b"></div>
5+
<div :class="$style.c"></div>
6+
<div :class="style.d"></div>
7+
<div :class="$style.e"></div>
8+
</div>
39
</template>
410

11+
<script>
12+
import { defineComponent, useCssModule } from 'vue'
13+
14+
export default defineComponent({
15+
setup() {
16+
const style = useCssModule()
17+
return {
18+
style
19+
}
20+
}
21+
})
22+
</script>
23+
524
<style module lang="sass">
625
@import "~__styles/sass-a"
726

‎e2e/__projects__/style/components/Scss.vue‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
11
<template>
2-
<div />
2+
<div>
3+
<div :class="$style.a" />
4+
<div :class="style.b" />
5+
<div :class="$style.c" />
6+
<div :class="style.d" />
7+
<div :class="$style.e" />
8+
<div :class="style.f" />
9+
</div>
310
</template>
411

12+
<script>
13+
import { defineComponent, useCssModule } from 'vue'
14+
15+
export default defineComponent({
16+
setup() {
17+
const style = useCssModule()
18+
return {
19+
style
20+
}
21+
}
22+
})
23+
</script>
24+
525
<style lang="scss" module>
626
@import '~__styles/scss-a';
727

‎e2e/__projects__/style/components/Stylus.vue‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,23 @@
11
<template>
2-
<div />
2+
<div>
3+
<div :class="css.a" />
4+
<div :class="style.b" />
5+
</div>
36
</template>
47

8+
<script>
9+
import { defineComponent, useCssModule } from 'vue'
10+
11+
export default defineComponent({
12+
setup() {
13+
const style = useCssModule()
14+
return {
15+
style
16+
}
17+
}
18+
})
19+
</script>
20+
521
<style lang="stylus" module="css">
622
@import './relative/resource';
723

‎e2e/__projects__/style/test.js‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
//
33
import { createApp, h } from 'vue'
44

5+
import Less from './components/Less.vue'
56
import Stylus from './components/Stylus.vue'
67
import Scss from './components/Scss.vue'
78
import Sass from './components/Sass.vue'
8-
import Less from './components/Less.vue'
99
import PostCss from './components/PostCss.vue'
1010
import External from './components/External.vue'
1111

@@ -22,43 +22,59 @@ function mount(Component, props, slots) {
2222
createApp(Parent).mount(el)
2323
}
2424

25-
xtest('processes Less', () => {
25+
test('processes Less', () => {
2626
mount(Less)
27-
// expect(wrapper.is('div')).toBeTruthy()
28-
// expect(wrapper.vm.$style.a).toEqual('a')
27+
expect(document.getElementById('app').innerHTML).toEqual(
28+
'<div><div class="a">a</div><div class="b">b</div></div>'
29+
)
2930
})
3031

31-
xtest('processes PostCSS', () => {
32+
test('processes PostCSS', () => {
3233
mount(PostCss)
34+
expect(document.getElementById('app').innerHTML).toEqual(
35+
'<section><div class="c"></div><div class="d"></div></section>'
36+
)
3337
// expect(wrapper.is('section')).toBeTruthy()
3438
// expect(wrapper.vm.$style.a).toEqual('a')
3539
// expect(wrapper.vm.$style.b).toEqual('b')
3640
})
3741

38-
xtest('processes Sass', () => {
42+
test('processes Sass', () => {
3943
mount(Sass)
44+
expect(document.getElementById('app').innerHTML).toEqual(
45+
'<div><div class="a"></div><div class="b"></div><div class="c"></div><div class=""></div><div class="e"></div></div>'
46+
)
4047
// expect(wrapper.vm.$style.a).toEqual('a')
4148
// expect(wrapper.vm.$style.b).toEqual('b')
4249
// expect(wrapper.vm.$style.c).toEqual('c')
4350
// expect(wrapper.vm.$style.light).toBeUndefined()
4451
})
4552

46-
xtest('processes SCSS with resources', () => {
53+
test('processes SCSS with resources', () => {
4754
mount(Scss)
55+
expect(document.getElementById('app').innerHTML).toEqual(
56+
'<div><div class="a"></div><div class="b"></div><div class="c"></div><div class=""></div><div class=""></div><div class="f"></div></div>'
57+
)
4858
// expect(wrapper.vm.$style.a).toEqual('a')
4959
// expect(wrapper.vm.$style.b).toEqual('b')
5060
// expect(wrapper.vm.$style.c).toEqual('c')
5161
})
5262

53-
xtest('process Stylus', () => {
63+
test('process Stylus', () => {
5464
mount(Stylus)
65+
expect(document.getElementById('app').innerHTML).toEqual(
66+
'<div><div class="a"></div><div class="b"></div></div>'
67+
)
5568
// expect(wrapper.vm).toBeTruthy()
5669
// expect(wrapper.vm.css.a).toEqual('a')
5770
// expect(wrapper.vm.$style.b).toEqual('b')
5871
})
5972

60-
xtest('process External', () => {
73+
test('process External', () => {
6174
mount(External)
75+
expect(document.getElementById('app').innerHTML).toEqual(
76+
'<div class="testClass"><div class="a"></div></div>'
77+
)
6278
// expect(wrapper.vm).toBeTruthy()
6379
// expect(wrapper.vm.$style.xtestClass).toEqual('xtestClass')
6480
// expect(wrapper.vm.css.a).toEqual('a')

‎e2e/test-runner.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ function info(msg) {
1818
console.info(chalk.blue('\n[vue-jest]: ' + msg + '\n'))
1919
}
2020

21+
// eslint-disable-next-line no-unused-vars
2122
function runTest(dir) {
2223
const resolvedPath = path.resolve(__dirname, '__projects__', dir)
2324

@@ -71,7 +72,6 @@ async function testRunner() {
7172
const directories = fs
7273
.readdirSync(path.resolve(__dirname, '__projects__'))
7374
.filter(d => !IGNORE_FILES.includes(d))
74-
7575
const matches = args.filter(d => directories.includes(d))
7676

7777
if (matches.length) {

‎lib/generate-code.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ module.exports = function generateCode(
1919
scriptResult,
2020
scriptSetupResult,
2121
templateResult,
22-
filename
22+
filename,
23+
stylesResult
2324
) {
2425
var node = new SourceNode(null, null, null)
2526
addToSourceMap(node, scriptResult)
@@ -46,6 +47,21 @@ module.exports = function generateCode(
4647
} else {
4748
// node.add(';exports.default = {...exports.default};')
4849
}
50+
if (Array.isArray(stylesResult)) {
51+
const mergedStyle = {}
52+
stylesResult.forEach(styleObj => {
53+
const { code, moduleName } = styleObj
54+
mergedStyle[moduleName] = {
55+
...(mergedStyle[moduleName] || {}),
56+
...(JSON.parse(code) || {})
57+
}
58+
})
59+
node.add(
60+
`;exports.default = {...exports.default, __cssModules: ${JSON.stringify(
61+
mergedStyle
62+
)}}`
63+
)
64+
}
4965

5066
return node.toStringWithSourceMap({ file: filename })
5167
}

0 commit comments

Comments
 (0)