Skip to content

Commit 082c6ea

Browse files
wmzyyyx990803
authored andcommitted
fix: css modules extends error (#1452)
fix #1449
1 parent 614b764 commit 082c6ea

File tree

3 files changed

+58
-0
lines changed

3 files changed

+58
-0
lines changed

Diff for: lib/codegen/styleInjection.js

+1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ module.exports = function genStyleInjectionCode (
4848
styleInjectionCode += `
4949
cssModules[${name}] = ${locals}
5050
Object.defineProperty(this, ${name}, {
51+
configurable: true,
5152
get: function () {
5253
return cssModules[${name}]
5354
}

Diff for: test/fixtures/css-modules-extend.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<style module>
2+
.red {
3+
color: #FF0000;
4+
}
5+
</style>
6+
7+
<script>
8+
import CssModuleSimple from './css-modules-simple.vue'
9+
10+
export default {
11+
extends: CssModuleSimple
12+
}
13+
</script>
14+
15+
<template>
16+
<div :class="$style.red"></div>
17+
</template>

Diff for: test/style.spec.js

+40
Original file line numberDiff line numberDiff line change
@@ -182,3 +182,43 @@ test('CSS Modules', async () => {
182182
/css-modules---red---\w{5}/
183183
)
184184
})
185+
186+
test('CSS Modules Extend', async () => {
187+
return new Promise((resolve, reject) => {
188+
const baseLoaders = [
189+
'vue-style-loader',
190+
{
191+
loader: 'css-loader',
192+
options: {
193+
modules: true
194+
}
195+
}
196+
]
197+
mockBundleAndRun({
198+
entry: 'css-modules-extend.vue',
199+
modify: config => {
200+
config.module.rules = [
201+
{
202+
test: /\.vue$/,
203+
loader: 'vue-loader'
204+
},
205+
{
206+
test: /\.css$/,
207+
use: baseLoaders
208+
}
209+
]
210+
}
211+
}, ({ window, module, instance, jsdomError, bundleError }) => {
212+
if (jsdomError) return reject(jsdomError)
213+
if (bundleError) return reject(bundleError)
214+
215+
const vnode = mockRender(module)
216+
expect(vnode.data.class).toBe(instance.$style.red)
217+
218+
const style = window.document.querySelectorAll('style')[1].textContent
219+
expect(style).toContain(`.${instance.$style.red} {\n color: #FF0000;\n}`)
220+
221+
resolve()
222+
})
223+
})
224+
})

0 commit comments

Comments
 (0)