Skip to content

Commit

Permalink
fix(compiler-sfc): fix style injection when using normal script + setup
Browse files Browse the repository at this point in the history
fix #3688
  • Loading branch information
yyx990803 committed May 28, 2021
1 parent 2c7bd42 commit 8b94464
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 1 deletion.
23 changes: 23 additions & 0 deletions packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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__"
`;
24 changes: 24 additions & 0 deletions packages/compiler-sfc/__tests__/cssVars.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,30 @@ describe('CSS vars injection', () => {
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', () => {
const { content } = compileSFCScript(
`<script setup>
Expand Down
2 changes: 1 addition & 1 deletion packages/compiler-sfc/src/cssVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export function genCssVarsCode(
const context = createTransformContext(createRoot([]), {
prefixIdentifiers: true,
inline: true,
bindingMetadata: bindings
bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings
})
const transformed = processExpression(exp, context)
const transformedString =
Expand Down

0 comments on commit 8b94464

Please sign in to comment.