Being able to force the type of useCSSVariables would be great

[wcastand]

Current useCSSVariables return string | number | undefined
i get that you can't know if user is asking for a string or a number and if you might find it but user should know and letting us with generic for the type would solve some typescript issues.

For example expo-router Stack don't accept those types for style:

	const gray900 = useCSSVariable("--color-gray-900")
	const gray400 = useCSSVariable("--color-gray-400")
	const white = useCSSVariable("--color-white")
	const orange500 = useCSSVariable("--color-orange-500")
[...]
<Stack
			screenOptions={{
				contentStyle: { backgroundColor: white },
				headerBackButtonDisplayMode: "minimal",
				headerShadowVisible: false,
				headerStyle: { backgroundColor: white },
				headerTintColor: gray400,
				headerTitleStyle: { color: gray900 },
				title: "",
			}}
		>

throw a warning, i can do as string but i feel like having generic is more "clean" if that makes sense and also if at some point you can determine the type based on the token asked, generic would get remove and i would know while as string might not tell me.

[Brentlok]

What do you mean by generic? To pass your desired type to the Hook?

useCSSVariable<string>('--color-primary')

[wcastand]

Yeah that's what expo router does for their local param hook for example I quite like that approach for things you can't type auto

[Brentlok]

I'm not sure about that, because you can pass multiple variables at once - https://docs.uniwind.dev/api/use-css-variable#multiple-variables-at-once
And it already uses generic type for this case to return correct array type (you pass two variables, you receive [Var, Var])

[wcastand]

If it uses generic type for array case I could use it to force the type then or you mean it uses generic internally so exposing it would be hard ?

[Brentlok]

https://github.com/uni-stack/uniwind/blob/main/packages%2Funiwind%2Fsrc%2Fhooks%2FuseCSSVariable%2FuseCSSVariable.ts#L32

It uses type overloading so it's generic function for array (to infer array length) and regular function for single variable value. We could make it generic for single value, but it would make a larger difference between those two. Additionaly it is always a string on the web, we're not parsing it to the number