From 8b94464a3b9759a7a98c23efeafc7a9359c9807d Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 28 May 2021 18:40:35 -0400
Subject: [PATCH] fix(compiler-sfc): fix style injection when using normal
 script + setup

fix #3688
---
 .../__snapshots__/cssVars.spec.ts.snap        | 23 ++++++++++++++++++
 .../compiler-sfc/__tests__/cssVars.spec.ts    | 24 +++++++++++++++++++
 packages/compiler-sfc/src/cssVars.ts          |  2 +-
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
index a2926e8fee1..99f963804b5 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
@@ -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__"
+`;
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index d9d41ecce8e..bdeada05714 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -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>
diff --git a/packages/compiler-sfc/src/cssVars.ts b/packages/compiler-sfc/src/cssVars.ts
index 4fb721f963d..021724fd190 100644
--- a/packages/compiler-sfc/src/cssVars.ts
+++ b/packages/compiler-sfc/src/cssVars.ts
@@ -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 =