Support forcing coercion type with arbitrary value syntax

[adamwathan]

Resolves #4096.

This PR makes it possible to force the type of a coerced arbitrary value in order to get around collisions between utilities when using arbitrary values with JIT.

For example, in this example, it's impossible to know if this is a font-size utility or a color utility:

<div class="text-[var(--mystery)]">

To make it possible for this to work, you can now prefix the arbitrary value with {type}: to provide a hint to the compiler about what the resulting value is going to be so it is passed to the correct plugin:

<div class="text-[color:var(--mystery)] text-[length:var(--surprise)]">

The valid values match the types supported by matchUtilities:

• length
• color
• angle
• list

...which generally correspond to the official CSS data type names. We will probably keep refining this but I think it's a good start. May also alias length to size since length is unintuitive for things like font-size, although it is the correct term.

[codecov-commenter]

Codecov Report

Merging #4263 (e7f3f9a) into master (76c670f) will increase coverage by 0.01%.
The diff coverage is 84.61%.

@@            Coverage Diff             @@
##           master    #4263      +/-   ##
==========================================
+ Coverage   71.10%   71.11%   +0.01%     
==========================================
  Files         218      218              
  Lines        4703     4712       +9     
  Branches      770      773       +3     
==========================================
+ Hits         3344     3351       +7     
- Misses       1273     1275       +2     
  Partials       86       86              

Impacted Files	Coverage Δ
src/util/pluginUtils.js	60.36% <75.00%> (+0.49%)	⬆️
src/jit/lib/generateRules.js	92.05% <100.00%> (+0.10%)	⬆️
src/jit/lib/setupContext.js	72.51% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 76c670f...e7f3f9a. Read the comment docs.

[MuttakinHasib]

@adamwathan what about object-position in jit mode ?

[adamwathan]

@MuttakinHasib Sorry I'm not sure what your question is, what about it?

[MuttakinHasib]

@adamwathan
how can i use object-position: 46%; in tailwindcss with jit mode ?

[adamwathan]

@MuttakinHasib Good catch, added support for that, will be able to use it in the next release 👍

81816df