twind
twind copied to clipboard
Arbitrary values with square bracket syntax do not support type hints
Some (tailwind) classes like text-
are shared among different properties (text-color
or font-size
). In most cases tailwind and twind is able to determine the appropriate property based on the value provided eg: text-[black]
. If however a css custom property is used such as text-[var(--color-black)]
this fails to parse correctly and instead outputs font-size: var(--color-black)
.
To help address this ambiguity tailwind offers type hints in the form of text-[color:var(--color-black)]
. This however does not work and simply outputs font-size: color:var(--color-black)
. While I was playing around with this, curiously I found that using text-[color(var(--color-brand))]
works, although now even though the output has the correct property, the color function wrapper is not removed and it's currently not valid CSS so it's ignored by the browser: color: color(var(--color-brand))
.
Probably best if twind were to support this syntax to create more customizable shared property shorthands but I'm unsure how complex this change would be.
I agree. That is an open issue. I put it on the list.
The type hint can safely be ignored and arbitrary()
will figure the type out?
https://github.com/tw-in-js/twind/blob/148b5941452fadb3932b54669d5e239ad24b7f06/packages/twind/src/rules.ts#L217-L219
The type hint can safely be ignored and
arbitrary()
will figure the type out?https://github.com/tw-in-js/twind/blob/148b5941452fadb3932b54669d5e239ad24b7f06/packages/twind/src/rules.ts#L217-L219
In most cases yes, if the value is however a CSS variable (property) the current algo will only see the string var(...)
and won't know what its value actually is.
As such, in case of a conflict for text-[var(--my-color)]
, so either text-[2rem]
or text-[rgb(0,0,0)]
, it won't know if the variable assumes the value of 2rem
or rgb(0,0,0)
and currently defaults to size (would always generate css font-size: var(...)
even if our variable is a color).
This will be fixed for the most obvious cases in the next release. Thanks @IgnusG (#300 and https://github.com/tw-in-js/twind/commit/cc814bf8c11ce5e9598fbc394fdc4da2b83c51ba)