From b074b85b1919f3bc0552436da2dd041644dc1d45 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Thu, 29 Apr 2021 10:48:41 +0800
Subject: [PATCH] fix(compiler-sfc): should distinguish between normal script
 and script setup when processing css vars

---
 .../src/transforms/transformExpression.ts     |  5 +++-
 .../__snapshots__/cssVars.spec.ts.snap        | 23 ++++++++++++++++++
 .../compiler-sfc/__tests__/cssVars.spec.ts    | 24 +++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 1b746111acd..c64d3ca33ce 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -112,7 +112,10 @@ export function processExpression(
 
   const { inline, bindingMetadata } = context
   const rewriteIdentifier = (raw: string, parent?: Node, id?: Identifier) => {
-    const type = hasOwn(bindingMetadata, raw) && bindingMetadata[raw]
+    const type =
+      bindingMetadata.__isScriptSetup !== false &&
+      hasOwn(bindingMetadata, raw) &&
+      bindingMetadata[raw]
     if (inline) {
       // x = y
       const isAssignmentLVal =
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>