fix(compiler-sfc): fix style injection when using normal script + setup

fix #3688
This commit is contained in:
Evan You 2021-05-28 18:40:35 -04:00
parent 2c7bd42801
commit 8b94464a3b
3 changed files with 48 additions and 1 deletions

View File

@ -109,3 +109,26 @@ return { color, size, ref }
}" }"
`; `;
exports[`CSS vars injection w/ normal <script> binding analysis 1`] = `
"
const __default__ = {
setup() {
return {
size: ref('100px')
}
}
}
import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({
\\"xxxxxxxx-size\\": (_ctx.size)
}))}
const __setup__ = __default__.setup
__default__.setup = __setup__
? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
: __injectCSSVars__
export default __default__"
`;

View File

@ -17,6 +17,30 @@ describe('CSS vars injection', () => {
assertCode(content) assertCode(content)
}) })
test('w/ normal <script> binding analysis', () => {
const { content } = compileSFCScript(
`<script>
export default {
setup() {
return {
size: ref('100px')
}
}
}
</script>\n` +
`<style>
div {
font-size: v-bind(size);
}
</style>`
)
expect(content).toMatch(`_useCssVars(_ctx => ({
"${mockId}-size": (_ctx.size)
})`)
expect(content).toMatch(`import { useCssVars as _useCssVars } from 'vue'`)
assertCode(content)
})
test('w/ <script setup> binding analysis', () => { test('w/ <script setup> binding analysis', () => {
const { content } = compileSFCScript( const { content } = compileSFCScript(
`<script setup> `<script setup>

View File

@ -76,7 +76,7 @@ export function genCssVarsCode(
const context = createTransformContext(createRoot([]), { const context = createTransformContext(createRoot([]), {
prefixIdentifiers: true, prefixIdentifiers: true,
inline: true, inline: true,
bindingMetadata: bindings bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings
}) })
const transformed = processExpression(exp, context) const transformed = processExpression(exp, context)
const transformedString = const transformedString =