From abbc76d869a7599f40fb9f58a0c31e01b14e74c3 Mon Sep 17 00:00:00 2001
From: JD Solanki <47495003+jd-solanki@users.noreply.github.com>
Date: Fri, 20 May 2022 17:05:43 +0530
Subject: [PATCH 1/4] feat(useCssVar): Support initial value

---
 packages/core/useCssVar/index.md |  3 +++
 packages/core/useCssVar/index.ts | 11 ++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/core/useCssVar/index.md b/packages/core/useCssVar/index.md
index eff4bbe4e04..0d6569a01d5 100644
--- a/packages/core/useCssVar/index.md
+++ b/packages/core/useCssVar/index.md
@@ -17,4 +17,7 @@ const color = useCssVar('--color', el)
 const elv = ref(null)
 const key = ref('--color')
 const colorVal = useCssVar(key, elv)
+
+const someEl = ref(null)
+const color = useCssVar('--color', someEl, '#eee')
 ```
diff --git a/packages/core/useCssVar/index.ts b/packages/core/useCssVar/index.ts
index e51a52a34ee..4bef2658f22 100644
--- a/packages/core/useCssVar/index.ts
+++ b/packages/core/useCssVar/index.ts
@@ -10,22 +10,27 @@ import { unrefElement } from '../unrefElement'
  *
  * @see https://vueuse.org/useCssVar
  * @param prop
- * @param el
+ * @param target
+ * @param initialValue
  * @param options
  */
 export function useCssVar(
   prop: MaybeRef<string>,
   target?: MaybeElementRef,
+  initialValue?: MaybeRef<string>,
   { window = defaultWindow }: ConfigurableWindow = {},
 ) {
   const variable = ref('')
   const elRef = computed(() => unrefElement(target) || window?.document?.documentElement)
+  const _initialValue = unref(initialValue)
 
   watch(
     [elRef, () => unref(prop)],
     ([el, prop]) => {
-      if (el && window)
-        variable.value = window.getComputedStyle(el).getPropertyValue(prop)
+      if (el && window) {
+        const value = window.getComputedStyle(el).getPropertyValue(prop)
+        variable.value = value == '' ? _initialValue : value
+      }
     },
     { immediate: true },
   )

From 2d65e798e266f7dfb4ca1106916b19c7ff12dc92 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 31 May 2022 20:36:38 +0800
Subject: [PATCH 2/4] chore: update

---
 packages/core/useCssVar/index.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/core/useCssVar/index.ts b/packages/core/useCssVar/index.ts
index 4bef2658f22..203086961d5 100644
--- a/packages/core/useCssVar/index.ts
+++ b/packages/core/useCssVar/index.ts
@@ -17,19 +17,18 @@ import { unrefElement } from '../unrefElement'
 export function useCssVar(
   prop: MaybeRef<string>,
   target?: MaybeElementRef,
-  initialValue?: MaybeRef<string>,
+  initialValue?: string,
   { window = defaultWindow }: ConfigurableWindow = {},
 ) {
   const variable = ref('')
   const elRef = computed(() => unrefElement(target) || window?.document?.documentElement)
-  const _initialValue = unref(initialValue)
 
   watch(
     [elRef, () => unref(prop)],
     ([el, prop]) => {
       if (el && window) {
         const value = window.getComputedStyle(el).getPropertyValue(prop)
-        variable.value = value == '' ? _initialValue : value
+        variable.value = value || initialValue || ''
       }
     },
     { immediate: true },

From d391ccd22b802949ff9a98f025b80ce85eff0a58 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 31 May 2022 20:38:34 +0800
Subject: [PATCH 3/4] chore: update

---
 packages/core/useCssVar/index.md | 2 +-
 packages/core/useCssVar/index.ts | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/core/useCssVar/index.md b/packages/core/useCssVar/index.md
index 0d6569a01d5..f2e2bd949ba 100644
--- a/packages/core/useCssVar/index.md
+++ b/packages/core/useCssVar/index.md
@@ -19,5 +19,5 @@ const key = ref('--color')
 const colorVal = useCssVar(key, elv)
 
 const someEl = ref(null)
-const color = useCssVar('--color', someEl, '#eee')
+const color = useCssVar('--color', someEl, { initialValue: '#eee' })
 ```
diff --git a/packages/core/useCssVar/index.ts b/packages/core/useCssVar/index.ts
index 203086961d5..cc820c480ff 100644
--- a/packages/core/useCssVar/index.ts
+++ b/packages/core/useCssVar/index.ts
@@ -5,6 +5,10 @@ import { defaultWindow } from '../_configurable'
 import type { MaybeElementRef } from '../unrefElement'
 import { unrefElement } from '../unrefElement'
 
+export interface UseCssVarOptions extends ConfigurableWindow {
+  initialValue?: string
+}
+
 /**
  * Manipulate CSS variables.
  *
@@ -17,10 +21,9 @@ import { unrefElement } from '../unrefElement'
 export function useCssVar(
   prop: MaybeRef<string>,
   target?: MaybeElementRef,
-  initialValue?: string,
-  { window = defaultWindow }: ConfigurableWindow = {},
+  { window = defaultWindow, initialValue = '' }: UseCssVarOptions = {},
 ) {
-  const variable = ref('')
+  const variable = ref(initialValue)
   const elRef = computed(() => unrefElement(target) || window?.document?.documentElement)
 
   watch(

From e216eea3efda051e590ef1a17572e7dfb5e2182b Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 31 May 2022 20:39:26 +0800
Subject: [PATCH 4/4] chore: update

---
 packages/core/useCssVar/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/useCssVar/index.ts b/packages/core/useCssVar/index.ts
index cc820c480ff..943408e35b5 100644
--- a/packages/core/useCssVar/index.ts
+++ b/packages/core/useCssVar/index.ts
@@ -31,7 +31,7 @@ export function useCssVar(
     ([el, prop]) => {
       if (el && window) {
         const value = window.getComputedStyle(el).getPropertyValue(prop)
-        variable.value = value || initialValue || ''
+        variable.value = value || initialValue
       }
     },
     { immediate: true },