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 215e9c1

Browse filesBrowse files
RaphaelDDLRaphaelDDL
committed
feat(css-modules): added multiple modules support; re-write tests & add more css module scenarios
1 parent b96af78 commit 215e9c1
Copy full SHA for 215e9c1
Expand file treeCollapse file tree

14 files changed

+493
-94
lines changed

‎src/cssModules.ts

Copy file name to clipboardExpand all lines: src/cssModules.ts
+9-2Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,20 @@ export function genCSSModulesCode(
1010

1111
// inject variable
1212
const name = typeof moduleName === 'string' ? moduleName : '$style'
13-
code += `\ncssModules["${name}"] = ${styleVar}`
13+
14+
const moduleAdd = `
15+
if(cssModules["${name}"]){
16+
Object.assign(cssModules["${name}"], ${styleVar});
17+
} else {
18+
cssModules["${name}"] = ${styleVar};
19+
}`
20+
code += `${moduleAdd}`
1421

1522
if (needsHotReload) {
1623
code += `
1724
if (module.hot) {
1825
module.hot.accept(${request}, () => {
19-
cssModules["${name}"] = ${styleVar}
26+
${moduleAdd}
2027
__VUE_HMR_RUNTIME__.rerender("${id}")
2128
})
2229
}`

‎test/advanced.spec.ts

Copy file name to clipboardExpand all lines: test/advanced.spec.ts
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ test('support rules with oneOf', async () => {
190190
const { window, instance } = await run('css-modules-simple.vue')
191191

192192
const className = instance.$style.red
193-
expect(className).toMatch(/^red_\w{5}/)
193+
expect(className).toMatch(/^red_[\w-]{5}/)
194194
style = normalizeNewline(window.document.querySelector('style')!.textContent!)
195195
expect(style).toContain('.' + className + ' {\n color: red;\n}')
196196
})

‎test/fixtures/css-modules.vue

Copy file name to clipboardExpand all lines: test/fixtures/css-modules.vue
-20Lines changed: 0 additions & 20 deletions
This file was deleted.

‎test/fixtures/css-modules/default-extend-composes-css.vue

Copy file name to clipboard
+16Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<style module>
2+
.black {
3+
composes: red from './red.css';
4+
font-weight: bold;
5+
}
6+
</style>
7+
8+
<script>
9+
/* composes directly import a class in style */
10+
export default {
11+
}
12+
</script>
13+
14+
<template>
15+
<div>{{ $style.black }}</div>
16+
</template>

‎test/fixtures/css-modules/default-extend-diffclass.vue

Copy file name to clipboard
+17Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<style module>
2+
.black {
3+
color: #000000;
4+
}
5+
</style>
6+
7+
<script>
8+
import CssModuleSimple from './default.vue'
9+
10+
export default {
11+
extends: CssModuleSimple
12+
}
13+
</script>
14+
15+
<template>
16+
<div>{{ $style.red }} | {{ $style.black }}</div>
17+
</template>

‎test/fixtures/css-modules-extend.vue renamed to ‎test/fixtures/css-modules/default-extend.vue

Copy file name to clipboardExpand all lines: test/fixtures/css-modules/default-extend.vue
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
</style>
66

77
<script>
8-
import CssModuleSimple from './css-modules-simple.vue'
8+
import CssModuleSimple from './default.vue'
99
1010
export default {
1111
extends: CssModuleSimple
1212
}
1313
</script>
1414

1515
<template>
16-
<div :class="$style.red"></div>
17-
</template>
16+
<div>{{ $style.red }}</div>
17+
</template>

‎test/fixtures/css-modules/default-multiple.vue

Copy file name to clipboard
+19Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<style module>
2+
.red {
3+
color: red;
4+
}
5+
</style>
6+
7+
<style module>
8+
.blue {
9+
color: blue;
10+
}
11+
</style>
12+
13+
<script>
14+
export default {}
15+
</script>
16+
17+
<template>
18+
<div>{{ $style }}</div>
19+
</template>

‎test/fixtures/css-modules-simple.vue renamed to ‎test/fixtures/css-modules/default.vue

Copy file name to clipboardExpand all lines: test/fixtures/css-modules/default.vue
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,7 @@
77
<script>
88
export default {}
99
</script>
10+
11+
<template>
12+
<div>{{ $style }}</div>
13+
</template>

‎test/fixtures/css-modules/named-multiple-diffnamediffclass.vue

Copy file name to clipboard
+19Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<style module="name1">
2+
.red {
3+
color: red;
4+
}
5+
</style>
6+
7+
<style module="name2">
8+
.blue {
9+
color: blue;
10+
}
11+
</style>
12+
13+
<script>
14+
export default {}
15+
</script>
16+
17+
<template>
18+
<div>{{ name1 }} | {{ name2 }}</div>
19+
</template>

‎test/fixtures/css-modules/named-multiple-diffnamesameclass.vue

Copy file name to clipboard
+19Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<style module="name1">
2+
.red {
3+
color: red;
4+
}
5+
</style>
6+
7+
<style module="name2">
8+
.red {
9+
color: red;
10+
}
11+
</style>
12+
13+
<script>
14+
export default {}
15+
</script>
16+
17+
<template>
18+
<div>{{ name1 }} | {{ name2 }}</div>
19+
</template>

‎test/fixtures/css-modules/named-multiple.vue

Copy file name to clipboard
+19Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<style module="named">
2+
.red {
3+
color: red;
4+
}
5+
</style>
6+
7+
<style module="named">
8+
.blue {
9+
color: blue;
10+
}
11+
</style>
12+
13+
<script>
14+
export default {}
15+
</script>
16+
17+
<template>
18+
<div>{{ named }}</div>
19+
</template>

‎test/fixtures/css-modules/named.vue

Copy file name to clipboard
+13Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<style module="named">
2+
.red {
3+
color: red;
4+
}
5+
</style>
6+
7+
<script>
8+
export default {}
9+
</script>
10+
11+
<template>
12+
<div>{{ named }}</div>
13+
</template>

‎test/fixtures/css-modules/red.css

Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.red {
2+
color: red;
3+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.