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 shouldn't be difficult to upgrade, but you may want to 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 b-1 bc-indigo-7/25 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 b-1 bc-indigo-6/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.
Oh, and by the way...
We hoped you had a merry Christmas and we wish you a happy new year! 🎇
// 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