Yumma CSS 3.6
Arbitrary chaining support for utility variants & tokenizer improvements.
Arbitrary Chaining
Chain utility variants to pseudo-classes or apply opacity modifiers to active, focus, & hover states. Variants can now be linked arbitrarily.
| Class | Generated CSS |
|---|---|
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 Modifiers With Hover
Hover the div to see the opacity change.
<div class="d-16 bg-indigo-6/25 h:bg-indigo-6/50"></div>Media Variants With Pseudo Classes
Resize the window to see the hover opacity change.
<div class="d-16 bg-indigo-6/25 lg:h:bg-indigo/50 h:bg-indigo/25"></div>Tokenizer Changes
Regular expressions are updated to capture complex class names with colons & slashes, specifically within template literals.
// Tokenizer now correctly extracts:const tokens = tokenizer('const x = "lg:h:bg-red/50"');// Result: ['lg:h:bg-red/50']Upgrade
Check the Upgrading Guide for a full list of utility renames & removals.
pnpm up yummacss@latest