prefer-typed-variables

This rule reports a custom property without a type in a utility that accepts several types. For example, text-* sets a color or a font size, so text-(--brand) does not show which one you mean. The stylistic preset enables this rule.

Reported

style("text-(--brand)");prefer-typed-variables: `text-(--brand)` has no type hint, so it uses the `color` definition; write `text-(color:--brand)` to state the type

Fixed

style("text-(color:--brand)");

How to fix

Add the type that the custom property holds, such as color: in the example, or length: for a font size. The type only chooses the meaning of the utility. It does not check the value that the property receives at runtime.

Rule settings