feat: useCSSVariable hook

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

@@ -13,8 +13,8 @@ type StylesResult = {
 
 class UniwindStoreBuilder {
     runtime = UniwindRuntime
+    vars = {} as Record<string, unknown>
     private stylesheet = {} as StyleSheets
-    private vars = {} as Record<string, unknown>
     private listeners = {
         [StyleDependency.ColorScheme]: new Set<() => void>(),
         [StyleDependency.Theme]: new Set<() => void>(),

packages/uniwind/src/core/web/getWebStyles.ts

@@ -1,6 +1,5 @@
-import { parse } from 'culori'
 import { RNStyle } from '../types'
-import { formatColor } from './formatColor'
+import { parseCSSValue } from './parseCSSValue'
 
 const dummy = typeof document !== 'undefined'
     ? Object.assign(document.createElement('div'), {
@@ -63,13 +62,9 @@ export const getWebStyles = (className?: string): RNStyle => {
 
     return Object.fromEntries(
         Object.entries(computedStyles).map(([key, value]) => {
-            const parsedValue = isNaN(Number(value)) && parse(value) !== undefined
-                ? formatColor(value)
-                : value
-
             return [
                 key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()),
-                parsedValue,
+                parseCSSValue(value),
             ]
         }),
     )

packages/uniwind/src/core/web/index.ts

@@ -1,3 +1,4 @@
 export * from './cssListener'
 export * from './formatColor'
 export * from './getWebStyles'
+export * from './parseCSSValue'

packages/uniwind/src/core/web/parseCSSValue.ts

@@ -0,0 +1,10 @@
+import { parse } from 'culori'
+import { formatColor } from './formatColor'
+
+export const parseCSSValue = (value: string) => {
+    if (isNaN(Number(value)) && parse(value) !== undefined) {
+        return formatColor(value)
+    }
+
+    return value
+}

packages/uniwind/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './useCSSVariable'
 export * from './useResolveClassNames'
 export * from './useUniwind'
 export * from './useUniwindAccent'

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

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import { UniwindStore } from '../core/native'
+import { StyleDependency } from '../types'
+
+const getVariableValue = (name: string) => {
+    return UniwindStore.vars[name]
+}
+
+let warned = false
+
+export const useCSSVariable = (name: string) => {
+    const [value, setValue] = useState(getVariableValue(name))
+
+    useEffect(() => {
+        const updateValue = () => {
+            const newValue = getVariableValue(name)
+
+            if (newValue !== value) {
+                setValue(newValue)
+            }
+        }
+        const dispose = UniwindStore.subscribe(
+            updateValue,
+            [StyleDependency.Theme],
+        )
+
+        updateValue()
+
+        return dispose
+    }, [name])
+
+    if (value === undefined && __DEV__ && !warned) {
+        warned = true
+        // eslint-disable-next-line no-console
+        console.warn(
+            `We couldn't find your variable ${name}. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable`,
+        )
+    }
+
+    return value
+}

packages/uniwind/src/hooks/useCSSVariable.ts

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import { CSSListener, parseCSSValue } from '../core/web'
+
+const documentStyles = typeof document !== 'undefined'
+    ? window.getComputedStyle(document.documentElement)
+    : null
+
+const getVariableValue = (name: string) => {
+    if (!documentStyles) {
+        return undefined
+    }
+
+    const value = documentStyles.getPropertyValue(name).trim()
+
+    if (value === '') {
+        return undefined
+    }
+
+    return parseCSSValue(value)
+}
+
+let warned = false
+
+/**
+ * A hook that returns the value of a CSS variable.
+ * @param name Name of the CSS variable.
+ * @returns Value of the CSS variable. On web it is always a string (1rem, #ff0000, etc.), but on native it can be a string or a number (16px, #ff0000)
+ */
+export const useCSSVariable = (name: string): string | number | undefined => {
+    const [value, setValue] = useState(getVariableValue(name))
+
+    useEffect(() => {
+        const updateValue = () => {
+            const newValue = getVariableValue(name)
+
+            if (newValue !== value) {
+                setValue(newValue)
+            }
+        }
+        const themeListenerDispose = CSSListener.addThemeListener(updateValue)
+        const classListenerDispose = CSSListener.addListener(':root', updateValue)
+
+        updateValue()
+
+        return () => {
+            themeListenerDispose()
+            classListenerDispose()
+        }
+    }, [name])
+
+    if (value === undefined && __DEV__ && !warned) {
+        warned = true
+        // eslint-disable-next-line no-console
+        console.warn(
+            `We couldn't find your variable ${name}. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable`,
+        )
+    }
+
+    return value
+}

packages/uniwind/src/index.ts

@@ -1,5 +1,5 @@
 export { Uniwind } from './core'
 export { withUniwind } from './hoc'
 export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types'
-export { useResolveClassNames, useUniwind } from './hooks'
+export { useCSSVariable, useResolveClassNames, useUniwind } from './hooks'
 export type { UniwindConfig } from './types'

packages/uniwind/src/metro/metro-transformer.ts

@@ -99,6 +99,8 @@ export const transform = async (
     )
 
     uniwindCache.cachedTransforms.set(platform, transform)
+
+    transform.output[0].data.css ??= {}
     transform.output[0].data.css.skipCache = true
 
     if (!isWeb) {