Arbitrary values with square bracket syntax do not support type hints

[IgnusG]

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.

[sastan]

I agree. That is an open issue. I put it on the list.

[hastebrot]

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

[IgnusG]

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).

[sastan]

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)