Skip to content

Commit 8b94464

Browse files
committed
fix(compiler-sfc): fix style injection when using normal script + setup
fix #3688
1 parent 2c7bd42 commit 8b94464

File tree

3 files changed

+48
-1
lines changed

3 files changed

+48
-1
lines changed

packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap

+23
Original file line numberDiff line numberDiff line change
@@ -109,3 +109,26 @@ return { color, size, ref }
109109
110110
}"
111111
`;
112+
113+
exports[`CSS vars injection w/ normal <script> binding analysis 1`] = `
114+
"
115+
const __default__ = {
116+
setup() {
117+
return {
118+
size: ref('100px')
119+
}
120+
}
121+
}
122+
123+
import { useCssVars as _useCssVars } from 'vue'
124+
const __injectCSSVars__ = () => {
125+
_useCssVars(_ctx => ({
126+
\\"xxxxxxxx-size\\": (_ctx.size)
127+
}))}
128+
const __setup__ = __default__.setup
129+
__default__.setup = __setup__
130+
? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
131+
: __injectCSSVars__
132+
133+
export default __default__"
134+
`;

packages/compiler-sfc/__tests__/cssVars.spec.ts

+24
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,30 @@ describe('CSS vars injection', () => {
1717
assertCode(content)
1818
})
1919

20+
test('w/ normal <script> binding analysis', () => {
21+
const { content } = compileSFCScript(
22+
`<script>
23+
export default {
24+
setup() {
25+
return {
26+
size: ref('100px')
27+
}
28+
}
29+
}
30+
</script>\n` +
31+
`<style>
32+
div {
33+
font-size: v-bind(size);
34+
}
35+
</style>`
36+
)
37+
expect(content).toMatch(`_useCssVars(_ctx => ({
38+
"${mockId}-size": (_ctx.size)
39+
})`)
40+
expect(content).toMatch(`import { useCssVars as _useCssVars } from 'vue'`)
41+
assertCode(content)
42+
})
43+
2044
test('w/ <script setup> binding analysis', () => {
2145
const { content } = compileSFCScript(
2246
`<script setup>

packages/compiler-sfc/src/cssVars.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export function genCssVarsCode(
7676
const context = createTransformContext(createRoot([]), {
7777
prefixIdentifiers: true,
7878
inline: true,
79-
bindingMetadata: bindings
79+
bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings
8080
})
8181
const transformed = processExpression(exp, context)
8282
const transformedString =

0 commit comments

Comments
 (0)