diff --git a/packages/uniwind/src/core/config/config.common.ts b/packages/uniwind/src/core/config/config.common.ts index fe72dac4..3cc1fc5d 100644 --- a/packages/uniwind/src/core/config/config.common.ts +++ b/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) => { + return getCSSVariable(variableName, { scopedTheme: null }) + }) as GetCSSVariable + protected __reinit(_: GenerateStyleSheetsCallback, themes: Array) { this._themes = themes } diff --git a/packages/uniwind/src/hooks/useCSSVariable/index.ts b/packages/uniwind/src/hooks/useCSSVariable/index.ts index 984b7a3d..00a6675e 100644 --- a/packages/uniwind/src/hooks/useCSSVariable/index.ts +++ b/packages/uniwind/src/hooks/useCSSVariable/index.ts @@ -1 +1 @@ -export * from './useCSSVariable' +export { useCSSVariable } from './useCSSVariable' diff --git a/packages/uniwind/src/hooks/useCSSVariable/useCSSVariable.ts b/packages/uniwind/src/hooks/useCSSVariable/useCSSVariable.ts index 1c21db27..1abe5019 100644 --- a/packages/uniwind/src/hooks/useCSSVariable/useCSSVariable.ts +++ b/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, 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, 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 & 0 extends -1 ? false : true type CreateArray = []> = TAcc['length'] extends N ? TAcc : CreateArray -type UseCSSVariable = { +export type GetCSSVariable = { (name: string): string | number | undefined >( 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) => { +export const useCSSVariable: GetCSSVariable = (name: string | Array) => { 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) => 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) => 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 } diff --git a/packages/uniwind/tests/type-test/getCSSVariable.ts b/packages/uniwind/tests/type-test/getCSSVariable.ts new file mode 100644 index 00000000..fd50d423 --- /dev/null +++ b/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> + +const doubleCSSVariableHook = useCSSVariable(['--color-red-500', '--color-red-500']) + +type DoubleCSSVariableHookTest = Expect> + +const variablesProp = ['--color-red-500', '--color-red-500'] +const multipleCSSVariableHook = useCSSVariable(variablesProp) + +type MultipleCSSVariableHookTest = Expect, typeof multipleCSSVariableHook>> + +const singleCSSVariable = Uniwind.getCSSVariable('--color-red-500') + +type SingleCSSVariableTest = Expect> + +const doubleCSSVariable = Uniwind.getCSSVariable(['--color-red-500', '--color-red-500']) + +type DoubleCSSVariableTest = Expect> + +const multipleCSSVariable = Uniwind.getCSSVariable(variablesProp) + +type MultipleCSSVariableTest = Expect, typeof multipleCSSVariable>>