Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 84c15ed

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

File tree

Expand file treeCollapse file tree

12 files changed

+148
-32
lines changed
Filter options
Expand file treeCollapse file tree

12 files changed

+148
-32
lines changed

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

Copy file name to clipboardExpand all lines: e2e/__projects__/basic/__snapshots__/test.js.snap
+1-1Lines 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

Copy file name to clipboardExpand all lines: e2e/__projects__/style/components/External.vue
+1-1Lines 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

Copy file name to clipboard
+20-1Lines 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

Copy file name to clipboard
+16-4Lines 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

Copy file name to clipboardExpand all lines: e2e/__projects__/style/components/Sass.vue
+20-1Lines 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

Copy file name to clipboardExpand all lines: e2e/__projects__/style/components/Scss.vue
+21-1Lines 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

Copy file name to clipboardExpand all lines: e2e/__projects__/style/components/Stylus.vue
+17-1Lines 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

Copy file name to clipboardExpand all lines: e2e/__projects__/style/test.js
+25-9Lines 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

Copy file name to clipboardExpand all lines: e2e/test-runner.js
+1-1Lines 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

Copy file name to clipboardExpand all lines: lib/generate-code.js
+17-1Lines 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
}

‎lib/process-style.js

Copy file name to clipboardExpand all lines: lib/process-style.js
+1Lines changed: 1 addition & 0 deletions
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

Copy file name to clipboardExpand all lines: lib/process.js
+8-11Lines changed: 8 additions & 11 deletions
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.