Yumma CSS 3.6
It's almost the end of the year, but we're not quite done yet. Arbitrary chaining support for utility variants is now available in Yumma CSS 3.6.
This update might change existing features, make sure you check out the check out the release notes before upgrading.
Arbitrary chaining support
Chaining variants to pseudo-classes or using opacity variants with active, focus, or hover wasn't possible before. You can now link variants to whatever variants you like.
| Class | Generated CSS Rule |
|---|---|
bg-red | .bg-red { ... } |
bg-red/50 | .bg-red\/50 { ... } |
h:bg-red/50 | .h\:bg-red\/50:hover { ... } |
lg:h:bg-red/50 | @media (width >= 64rem) { .lg\:h\:bg-red\/50:hover { ... } } |
lg:h:f:bg-red/25 | @media (width >= 64rem) { .lg\:h\:f\:bg-red\/25:hover:focus { ... } } |
Opacity variants with hover
Try hovering the div to see how the opacity changes.
<div class="bg-indigo-6/25 h:bg-indigo-6/50 d-16"></div>Media variants with pseudo-classes
Try resizing the window to see how the opacity changes when hovered.
<div class="bg-indigo-6/25 lg:h:bg-indigo/50 h:bg-indigo/25 d-16"></div>Tokenizer improvements
This version also tweaked the regular expressions to correctly capture complex class names with colons and slashes, especially within template literals.
// Tokenizer now correctly extracts:const tokens = tokenizer('const x = "lg:h:bg-red/50"');// Result: ['lg:h:bg-red/50']Upgrade
You can get the latest version of Yumma CSS from npm:
npm install yummacss@latest