Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support forcing coercion type with arbitrary value syntax #4263

merged 2 commits into from May 7, 2021


Copy link

@adamwathan adamwathan commented May 6, 2021

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.

Copy link

codecov-commenter commented May 6, 2021

Codecov Report

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

Impacted file tree graph

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

@adamwathan adamwathan merged commit e764df5 into master May 7, 2021
2 checks passed
@adamwathan adamwathan deleted the force-coercion-type branch May 7, 2021
adamwathan added a commit that referenced this pull request May 7, 2021
* Support forcing coercion type with arbitrary value syntax

* Refactor + more tests
Copy link

MuttakinHasib commented Jun 14, 2021

@adamwathan what about object-position in jit mode ?

Copy link
Member Author

adamwathan commented Jun 14, 2021

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

Copy link

MuttakinHasib commented Jun 14, 2021

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

Copy link
Member Author

adamwathan commented Jun 14, 2021

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


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

[JIT] font/text size does not support css variables
3 participants