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

close #6926

diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 5b01d73d77225f439850811cbdc77b03388bc481..9fb72d7ad50761e8f002bbea7dbfb89621cf3f7e 100644 (file)
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -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`)
+      })
+    })
   })
 })

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index cfcc607c72df988d1c76dfaf2c55ab052392ce13..2a33f69936d67ff334a1a0f9330dfd1338c049fd 100644 (file)
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -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')

diff --git a/packages/compiler-sfc/src/script/normalScript.ts b/packages/compiler-sfc/src/script/normalScript.ts
index 76b25c66350f8e257561c19549a32f40cd83f9a9..d0f161342735cd2280a3fa00a6b205aa5637463b 100644 (file)
--- a/packages/compiler-sfc/src/script/normalScript.ts
+++ b/packages/compiler-sfc/src/script/normalScript.ts
@@ -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,