diff --git a/lib/codegen/styleInjection.js b/lib/codegen/styleInjection.js index b11e488a2..e8c676463 100644 --- a/lib/codegen/styleInjection.js +++ b/lib/codegen/styleInjection.js @@ -48,6 +48,7 @@ module.exports = function genStyleInjectionCode ( styleInjectionCode += ` cssModules[${name}] = ${locals} Object.defineProperty(this, ${name}, { + configurable: true, get: function () { return cssModules[${name}] } diff --git a/test/fixtures/css-modules-extend.vue b/test/fixtures/css-modules-extend.vue new file mode 100644 index 000000000..de95d1a25 --- /dev/null +++ b/test/fixtures/css-modules-extend.vue @@ -0,0 +1,17 @@ + + + + + \ No newline at end of file diff --git a/test/style.spec.js b/test/style.spec.js index 063499901..67777608d 100644 --- a/test/style.spec.js +++ b/test/style.spec.js @@ -182,3 +182,43 @@ test('CSS Modules', async () => { /css-modules---red---\w{5}/ ) }) + +test('CSS Modules Extend', async () => { + return new Promise((resolve, reject) => { + const baseLoaders = [ + 'vue-style-loader', + { + loader: 'css-loader', + options: { + modules: true + } + } + ] + mockBundleAndRun({ + entry: 'css-modules-extend.vue', + modify: config => { + config.module.rules = [ + { + test: /\.vue$/, + loader: 'vue-loader' + }, + { + test: /\.css$/, + use: baseLoaders + } + ] + } + }, ({ window, module, instance, jsdomError, bundleError }) => { + if (jsdomError) return reject(jsdomError) + if (bundleError) return reject(bundleError) + + const vnode = mockRender(module) + expect(vnode.data.class).toBe(instance.$style.red) + + const style = window.document.querySelectorAll('style')[1].textContent + expect(style).toContain(`.${instance.$style.red} {\n color: #FF0000;\n}`) + + resolve() + }) + }) +})