fix(useCssVar): update variable when initial (#4641)

ilyaliao · web-flow · commit d680f1f9c350 · 2025-03-05T04:00:44.000Z
diff --git a/packages/core/useCssVar/index.test.ts b/packages/core/useCssVar/index.test.ts
@@ -19,6 +19,14 @@ describe('useCssVar', () => {
     expect(el.style.getPropertyValue(color)).toBe('red')
   })
 
+  it('should work with css variables', () => {
+    document.documentElement.style.setProperty('--rootColor', 'red')
+
+    const colorNoRef = useCssVar('--rootColor')
+
+    expect(colorNoRef.value).toBe('red')
+  })
+
   it('should use window.document.documentElement as default element if not set', async () => {
     const vm = mount(defineComponent({
       setup() {
diff --git a/packages/core/useCssVar/index.ts b/packages/core/useCssVar/index.ts
@@ -55,6 +55,7 @@ export function useCssVar(
         old[0].style.removeProperty(old[1])
       updateCssVar()
     },
+    { immediate: true },
   )
 
   watch(

Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,7 @@ export function useCssVar(`
`55`	`55`	`old[0].style.removeProperty(old[1])`
`56`	`56`	`updateCssVar()`
`57`	`57`	`},`
	`58`	`+ { immediate: true },`
`58`	`59`	`)`
`59`	`60`
`60`	`61`	`watch(`