feat: getCSSVariable function to get css variable outside of react

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

@@ -1,4 +1,5 @@
 import { Appearance, Insets, Platform } from 'react-native'
+import { GetCSSVariable, getCSSVariable } from '../../hooks/useCSSVariable/useCSSVariable'
 import { ColorScheme, StyleDependency } from '../../types'
 import { UniwindListener } from '../listener'
 import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
@@ -106,6 +107,10 @@ export class UniwindConfigBuilder {
         // noop
     }
 
+    getCSSVariable = ((variableName: string | Array<string>) => {
+        return getCSSVariable(variableName, { scopedTheme: null })
+    }) as GetCSSVariable
+
     protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>) {
         this._themes = themes
     }

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

@@ -1 +1 @@
-export * from './useCSSVariable'
+export { useCSSVariable } from './useCSSVariable'

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

@@ -7,11 +7,6 @@ import { UniwindContextType } from '../../core/types'
 import { StyleDependency } from '../../types'
 import { getVariableValue } from './getVariableValue'
 
-const getValue = (name: string | Array<string>, uniwindContext: UniwindContextType) =>
-    Array.isArray(name)
-        ? name.map(name => getVariableValue(name, uniwindContext))
-        : getVariableValue(name, uniwindContext)
-
 let warned = false
 
 const logDevError = (name: string) => {
@@ -21,10 +16,30 @@ const logDevError = (name: string) => {
     )
 }
 
+export const getCSSVariable = (name: string | Array<string>, uniwindContext: UniwindContextType) => {
+    const value = Array.isArray(name)
+        ? name.map(name => getVariableValue(name, uniwindContext))
+        : getVariableValue(name, uniwindContext)
+
+    if (Array.isArray(value)) {
+        value.forEach((val, index) => {
+            if (val === undefined && __DEV__ && !warned) {
+                logDevError(name[index] ?? '')
+            }
+        })
+    }
+
+    if (value === undefined && __DEV__ && !warned) {
+        logDevError(name as string)
+    }
+
+    return value
+}
+
 type IsGenericNumber<T> = T & 0 extends -1 ? false : true
 type CreateArray<N extends number, Value, TAcc extends Array<Value> = []> = TAcc['length'] extends N ? TAcc : CreateArray<N, Value, [...TAcc, Value]>
 
-type UseCSSVariable = {
+export type GetCSSVariable = {
     (name: string): string | number | undefined
     <const T extends Array<string>>(
         names: T,
@@ -36,9 +51,9 @@ type UseCSSVariable = {
  * @param name Name / Array of names of the CSS variable.
  * @returns Value / Values 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: UseCSSVariable = (name: string | Array<string>) => {
+export const useCSSVariable: GetCSSVariable = (name: string | Array<string>) => {
     const uniwindContext = useUniwindContext()
-    const [value, setValue] = useState(getValue(name, uniwindContext))
+    const [value, setValue] = useState(getCSSVariable(name, uniwindContext))
     const nameRef = useRef(name)
 
     useLayoutEffect(() => {
@@ -47,20 +62,20 @@ export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) =>
                 return
             }
 
-            setValue(getValue(name, uniwindContext))
+            setValue(getCSSVariable(name, uniwindContext))
             nameRef.current = name
 
             return
         }
 
         if (name !== nameRef.current) {
-            setValue(getValue(name, uniwindContext))
+            setValue(getCSSVariable(name, uniwindContext))
             nameRef.current = name
         }
     }, [name])
 
     useLayoutEffect(() => {
-        const updateValue = () => setValue(getValue(nameRef.current, uniwindContext))
+        const updateValue = () => setValue(getCSSVariable(nameRef.current, uniwindContext))
         const dispose = UniwindListener.subscribe(
             updateValue,
             [StyleDependency.Theme, StyleDependency.Variables],
@@ -69,17 +84,5 @@ export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) =>
         return dispose
     }, [uniwindContext])
 
-    if (Array.isArray(value)) {
-        value.forEach((val, index) => {
-            if (val === undefined && __DEV__ && !warned) {
-                logDevError(name[index] ?? '')
-            }
-        })
-    }
-
-    if (value === undefined && __DEV__ && !warned) {
-        logDevError(name as string)
-    }
-
     return value as never
 }

packages/uniwind/tests/type-test/getCSSVariable.ts

@@ -0,0 +1,29 @@
+import { Uniwind, useCSSVariable } from 'uniwind'
+import type { Equal, Expect } from './checks'
+
+type CSSVariable = string | number | undefined
+
+const singleCSSVariableHook = useCSSVariable('--color-red-500')
+
+type SingleCSSVariableHookTest = Expect<Equal<CSSVariable, typeof singleCSSVariableHook>>
+
+const doubleCSSVariableHook = useCSSVariable(['--color-red-500', '--color-red-500'])
+
+type DoubleCSSVariableHookTest = Expect<Equal<[CSSVariable, CSSVariable], typeof doubleCSSVariableHook>>
+
+const variablesProp = ['--color-red-500', '--color-red-500']
+const multipleCSSVariableHook = useCSSVariable(variablesProp)
+
+type MultipleCSSVariableHookTest = Expect<Equal<Array<CSSVariable>, typeof multipleCSSVariableHook>>
+
+const singleCSSVariable = Uniwind.getCSSVariable('--color-red-500')
+
+type SingleCSSVariableTest = Expect<Equal<CSSVariable, typeof singleCSSVariable>>
+
+const doubleCSSVariable = Uniwind.getCSSVariable(['--color-red-500', '--color-red-500'])
+
+type DoubleCSSVariableTest = Expect<Equal<[CSSVariable, CSSVariable], typeof doubleCSSVariable>>
+
+const multipleCSSVariable = Uniwind.getCSSVariable(variablesProp)
+
+type MultipleCSSVariableTest = Expect<Equal<Array<CSSVariable>, typeof multipleCSSVariable>>