fix: css modules extends error (#1452)

fix #1449

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}]
           }

test/fixtures/css-modules-extend.vue

@@ -0,0 +1,17 @@
+<style module>
+.red {
+  color: #FF0000;
+}
+</style>
+
+<script>
+import CssModuleSimple from './css-modules-simple.vue'
+
+export default {
+  extends: CssModuleSimple
+}
+</script>
+
+<template>
+  <div :class="$style.red"></div>
+</template>

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()
+    })
+  })
+})