Commit 082c6eaf authored by wmzy's avatar wmzy Committed by Evan You

fix: css modules extends error (#1452)

fix #1449
parent 614b764c
...@@ -48,6 +48,7 @@ module.exports = function genStyleInjectionCode ( ...@@ -48,6 +48,7 @@ module.exports = function genStyleInjectionCode (
styleInjectionCode += ` styleInjectionCode += `
cssModules[${name}] = ${locals} cssModules[${name}] = ${locals}
Object.defineProperty(this, ${name}, { Object.defineProperty(this, ${name}, {
configurable: true,
get: function () { get: function () {
return cssModules[${name}] return cssModules[${name}]
} }
......
<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
...@@ -182,3 +182,43 @@ test('CSS Modules', async () => { ...@@ -182,3 +182,43 @@ test('CSS Modules', async () => {
/css-modules---red---\w{5}/ /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()
})
})
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment