From d51c485ea60c1590f1daba75ecc72a535aabbacb Mon Sep 17 00:00:00 2001
From: Matias Capeletto <matias.capeletto@gmail.com>
Date: Fri, 11 Dec 2020 21:47:17 +0100
Subject: [PATCH] fix(compiler-sfc): duplicated injected css var with repeated
 vars in style

---
 .../__snapshots__/cssVars.spec.ts.snap        | 19 +++++++++++++++++
 .../compiler-sfc/__tests__/cssVars.spec.ts    | 21 +++++++++++++++++++
 packages/compiler-sfc/src/cssVars.ts          |  5 ++++-
 3 files changed, 44 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..791c5edc5aa 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
@@ -66,6 +66,25 @@ return { color }
 }"
 `;
 
+exports[`CSS vars injection codegen w/ <script setup> using the same var multiple times 1`] = `
+"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
+
+export default {
+  expose: [],
+  setup(__props) {
+
+_useCssVars(_ctx => ({
+  \\"xxxxxxxx-color\\": (color)
+}))
+
+        const color = 'red'
+        
+return { color }
+}
+
+}"
+`;
+
 exports[`CSS vars injection generating correct code for nested paths 1`] = `
 "const a = 1
 const __default__ = {}
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index d9d41ecce8e..c3c23655380 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -136,5 +136,26 @@ describe('CSS vars injection', () => {
         ).content
       )
     })
+
+    test('w/ <script setup> using the same var multiple times', () => {
+      const { content } = compileSFCScript(
+        `<script setup>
+        const color = 'red'
+        </script>\n` +
+          `<style>
+          div {
+            color: v-bind(color);
+          }
+          p {
+            color: v-bind(color);
+          }
+        </style>`
+      )
+      // color should only be injected once, even if it is twice in style
+      expect(content).toMatch(`_useCssVars(_ctx => ({
+  "${mockId}-color": (color)
+})`)
+      assertCode(content)
+    })
   })
 })
diff --git a/packages/compiler-sfc/src/cssVars.ts b/packages/compiler-sfc/src/cssVars.ts
index 7489d1b511d..d388c7e7188 100644
--- a/packages/compiler-sfc/src/cssVars.ts
+++ b/packages/compiler-sfc/src/cssVars.ts
@@ -37,7 +37,10 @@ export function parseCssVars(sfc: SFCDescriptor): string[] {
   sfc.styles.forEach(style => {
     let match
     while ((match = cssVarRE.exec(style.content))) {
-      vars.push(match[1] || match[2] || match[3])
+      const variable = match[1] || match[2] || match[3]
+      if (!vars.includes(variable)) {
+        vars.push(variable)
+      }
     }
   })
   return vars