Tokens in css shorthand

[rafgraph]

Continuing issue #496 as a discussion...

Currently (v0.1.4) only a single token type can be mapped to shorthand properties like border, and use of other token types in shorthand requires a prefix. For example, border shorthand maps color tokens which results in writing shorthand with multiple tokes like this border: "$borderWidths$someWidth $borderStyles$someStyle $green". To me this feels a bit arbitrary and inconsistent.

One way to make using tokens in shorthand consistent would be to always require scale-prefixes in shorthand and add an invariant error explaining to the user/dev why prefixes are always required in shorthand.

It might also be possible to take this a step further and infer what the user/dev means by allowing globally unique tokens to be un-prefixed in shorthand, and then throwing an invariant error if a non-unique token is used without a prefix. This would add a bit of complexity overall but could ramp well where apps with few tokens (and tokens with $longAndSpecificNames) generally wouldn't need to worry about prefixes, and an invariant error can explain why a prefix needs to be added once it's required.