feat: css variables listener

packages/uniwind/src/core/config/config.native.ts

@@ -62,7 +62,7 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
         })
 
         if (theme === this.currentTheme) {
-            UniwindListener.notify([StyleDependency.Theme])
+            UniwindListener.notify([StyleDependency.Variables])
         }
     }
 }

packages/uniwind/src/core/config/config.ts

@@ -47,7 +47,7 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
         })
 
         if (theme === this.currentTheme) {
-            UniwindListener.notify([StyleDependency.Theme])
+            UniwindListener.notify([StyleDependency.Variables])
         }
     }
 

packages/uniwind/src/core/listener.ts

@@ -14,6 +14,7 @@ class UniwindListenerBuilder {
         [StyleDependency.FontScale]: new Set<() => void>(),
         [StyleDependency.Rtl]: new Set<() => void>(),
         [StyleDependency.AdaptiveThemes]: new Set<() => void>(),
+        [StyleDependency.Variables]: new Set<() => void>(),
     }
 
     notify(dependencies: Array<StyleDependency>) {

packages/uniwind/src/core/native/store.ts

@@ -84,7 +84,7 @@ class UniwindStoreBuilder {
     private resolveStyles(classNames: string, state?: ComponentState) {
         const result = {} as Record<string, any>
         let vars = this.vars
-        const dependencies = [] as Array<StyleDependency>
+        const dependencies = new Set<StyleDependency>()
         const bestBreakpoints = new Map<string, Style>()
 
         for (const className of classNames.split(' ')) {
@@ -93,7 +93,9 @@ class UniwindStoreBuilder {
             }
 
             for (const style of this.stylesheet[className] as Array<Style>) {
-                dependencies.push(...style.dependencies)
+                if (style.dependencies) {
+                    style.dependencies.forEach(dep => dependencies.add(dep))
+                }
 
                 if (
                     style.minWidth > this.runtime.screen.width
@@ -214,7 +216,7 @@ class UniwindStoreBuilder {
 
         return {
             styles: { ...result } as RNStyle,
-            dependencies: Array.from(new Set(dependencies)),
+            dependencies: Array.from(dependencies),
         }
     }
 }

packages/uniwind/src/core/types.ts

@@ -9,7 +9,7 @@ export type Style = {
     theme: ColorScheme | null
     rtl: boolean | null
     native: boolean
-    dependencies: Array<StyleDependency>
+    dependencies: Array<StyleDependency> | null
     index: number
     className: string
     importantProperties: Array<string>

packages/uniwind/src/hooks/useCSSVariable/useCSSVariable.ts

@@ -65,7 +65,10 @@ export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) =>
 
     useEffect(() => {
         const updateValue = () => setValue(getValue(nameRef.current))
-        const dispose = UniwindListener.subscribe(updateValue, [StyleDependency.Theme])
+        const dispose = UniwindListener.subscribe(
+            updateValue,
+            [StyleDependency.Theme, StyleDependency.Variables],
+        )
 
         return dispose
     }, [])

packages/uniwind/src/metro/addMetaToStylesTemplate.ts

@@ -71,6 +71,10 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                     })
                 })
 
+                if (usedVars.length > 0) {
+                    dependencies.push(StyleDependency.Variables)
+                }
+
                 if (theme !== null || isUsingThemedVar || stringifiedEntries.includes('rt.lightDark')) {
                     dependencies.push(StyleDependency.Theme)
                 }
@@ -108,7 +112,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                     rtl,
                     colorScheme: makeSafeForSerialization(colorScheme),
                     native: platform !== null,
-                    dependencies,
+                    dependencies: dependencies.length > 0 ? dependencies : null,
                     index,
                     className: makeSafeForSerialization(className),
                     active,

packages/uniwind/src/types.ts

@@ -7,6 +7,7 @@ export enum StyleDependency {
     FontScale = 6,
     Rtl = 7,
     AdaptiveThemes = 8,
+    Variables = 9,
 }
 
 export const enum Orientation {