From b82fc56a0b4e27cfae37d5f1484cfe63a9cfec9b Mon Sep 17 00:00:00 2001
From: wmzy <1256573276@qq.com>
Date: Wed, 12 Dec 2018 15:51:53 +0800
Subject: [PATCH] fix: css modules extends error

---
 lib/codegen/styleInjection.js        |  1 +
 test/fixtures/css-modules-extend.vue | 17 ++++++++++++
 test/style.spec.js                   | 40 ++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 test/fixtures/css-modules-extend.vue

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