Skip to content

Commit 84c15ed

Browse files
YutamaKotaroYutamaKotaro
authoredMay 31, 2021
add css-module feature (#345)
* add css-module feature * remove excess code
·
v29.2.65.0.0-alpha.10
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

+1-1
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

+1-1
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

+20-1
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

+16-4
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

+20-1
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

+21-1
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

+17-1
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

+25-9
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

+1-1
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

+17-1
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
}

‎lib/process-style.js

+1
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
8282
config
8383
)
8484
const result = compileStyle({
85+
id: `vue-jest-${filePath}`,
8586
source: content,
8687
filePath,
8788
preprocessLang: stylePart.lang,

‎lib/process.js

+8-11
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const babelTransformer = require('babel-jest')
44

55
const typescriptTransformer = require('./transformers/typescript')
66
const coffeescriptTransformer = require('./transformers/coffee')
7-
// const _processStyle = require('./process-style')
7+
const _processStyle = require('./process-style')
88
// const processCustomBlocks = require('./process-custom-blocks')
99
const getVueJestConfig = require('./utils').getVueJestConfig
1010
const getTsJestConfig = require('./utils').getTsJestConfig
@@ -116,7 +116,6 @@ function processTemplate(descriptor, filename, config) {
116116
}
117117
}
118118

119-
/*
120119
function processStyle(styles, filename, config) {
121120
if (!styles) {
122121
return null
@@ -131,27 +130,25 @@ function processStyle(styles, filename, config) {
131130

132131
return filteredStyles.length ? filteredStyles : null
133132
}
134-
*/
135133

136134
module.exports = function(src, filename, config) {
137135
const { descriptor } = parse(src, { filename })
138136

139137
const templateResult = processTemplate(descriptor, filename, config)
140138
const scriptResult = processScript(descriptor.script, filename, config)
141139
const scriptSetupResult = processScriptSetup(descriptor, filename, config)
142-
/*
143140
const stylesResult = processStyle(descriptor.styles, filename, config)
144-
const customBlocksResult = processCustomBlocks(
145-
descriptor.customBlocks,
146-
filename,
147-
config
148-
)
149-
*/
141+
// const customBlocksResult = processCustomBlocks(
142+
// descriptor.customBlocks,
143+
// filename,
144+
// config
145+
// )
150146
const output = generateCode(
151147
scriptResult,
152148
scriptSetupResult,
153149
templateResult,
154-
filename
150+
filename,
151+
stylesResult
155152
)
156153

157154
return {

0 commit comments

Comments
 (0)
Please sign in to comment.