Skip to content

fix(compiler-sfc): avoid gen useCssVars when targeting SSR #6979

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Oct 21, 2023
68 changes: 68 additions & 0 deletions packages/compiler-sfc/__tests__/cssVars.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -272,5 +272,73 @@ describe('CSS vars injection', () => {
`export default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCssVars(_ctx => ({\n "xxxxxxxx-background": (_unref(background))\n}))`
)
})

describe('skip codegen in SSR', () => {
test('script setup, inline', () => {
const { content } = compileSFCScript(
`<script setup>
let size = 1
</script>\n` +
`<style>
div {
font-size: v-bind(size);
}
</style>`,
{
inlineTemplate: true,
templateOptions: {
ssr: true
}
}
)
expect(content).not.toMatch(`_useCssVars`)
})

// #6926
test('script, non-inline', () => {
const { content } = compileSFCScript(
`<script setup>
let size = 1
</script>\n` +
`<style>
div {
font-size: v-bind(size);
}
</style>`,
{
inlineTemplate: false,
templateOptions: {
ssr: true
}
}
)
expect(content).not.toMatch(`_useCssVars`)
})

test('normal script', () => {
const { content } = compileSFCScript(
`<script>
export default {
setup() {
return {
size: ref('100px')
}
}
}
</script>\n` +
`<style>
div {
font-size: v-bind(size);
}
</style>`,
{
templateOptions: {
ssr: true
}
}
)
expect(content).not.toMatch(`_useCssVars`)
})
})
})
})
2 changes: 1 addition & 1 deletion packages/compiler-sfc/src/compileScript.ts
Original file line number Diff line number Diff line change
Expand Up @@ -765,7 +765,7 @@ export function compileScript(
if (
sfc.cssVars.length &&
// no need to do this when targeting SSR
!(options.inlineTemplate && options.templateOptions?.ssr)
!options.templateOptions?.ssr
) {
ctx.helperImports.add(CSS_VARS_HELPER)
ctx.helperImports.add('unref')
Expand Down
2 changes: 1 addition & 1 deletion packages/compiler-sfc/src/script/normalScript.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function processNormalScript(
const s = new MagicString(content)
rewriteDefaultAST(scriptAst.body, s, defaultVar)
content = s.toString()
if (cssVars.length) {
if (cssVars.length && !ctx.options.templateOptions?.ssr) {
content += genNormalScriptCssVarsCode(
cssVars,
bindings,
Expand Down