feat(useCssVars): remove property on null/undefined (#3821)

Signed-off-by: GitHub <[email protected]>

Author: ferferga

packages/core/useCssVar/index.test.ts

@@ -16,6 +16,18 @@ describe('useCssVar', () => {
     expect(variable.value).toBe('red')
   })
 
+  it('should handle null and undefined', () => {
+    const el = document.createElement('div')
+    const property = '---color'
+    const variable = useCssVar(property, el)
+
+    expect(window?.getComputedStyle(el).getPropertyValue('--color')).toBe('')
+    variable.value = 'red'
+    setTimeout(() => {
+      expect(window?.getComputedStyle(el).getPropertyValue('--color')).toBe('red')
+    }, 100)
+  })
+
   it('should work observe', async () => {
     const window = defaultWindow
     const el = document.createElement('div')

packages/core/useCssVar/index.ts

@@ -25,18 +25,18 @@ export interface UseCssVarOptions extends ConfigurableWindow {
  * @param options
  */
 export function useCssVar(
-  prop: MaybeRefOrGetter<string>,
+  prop: MaybeRefOrGetter<string | null | undefined>,
   target?: MaybeElementRef,
   options: UseCssVarOptions = {},
 ) {
-  const { window = defaultWindow, initialValue = '', observe = false } = options
-  const variable = ref(initialValue)
+  const { window = defaultWindow, initialValue, observe = false } = options
+  const variable = ref<string | null | undefined>(initialValue)
   const elRef = computed(() => unrefElement(target) || window?.document?.documentElement)
 
   function updateCssVar() {
     const key = toValue(prop)
     const el = toValue(elRef)
-    if (el && window) {
+    if (el && window && key) {
       const value = window.getComputedStyle(el).getPropertyValue(key)?.trim()
       variable.value = value || initialValue
     }
@@ -51,15 +51,24 @@ export function useCssVar(
 
   watch(
     [elRef, () => toValue(prop)],
-    updateCssVar,
+    (_, old) => {
+      if (old[0] && old[1] && window)
+        window.getComputedStyle(old[0]).removeProperty(old[1])
+      updateCssVar()
+    },
     { immediate: true },
   )
 
   watch(
     variable,
     (val) => {
-      if (elRef.value?.style)
-        elRef.value.style.setProperty(toValue(prop), val)
+      const raw_prop = toValue(prop)
+      if (elRef.value?.style && raw_prop) {
+        if (val == null)
+          elRef.value.style.removeProperty(raw_prop)
+        else
+          elRef.value.style.setProperty(raw_prop, val)
+      }
     },
   )