Yumma CSS 3.9

Breaking Changes

This version introduces several significant updates & structural changes.

Package Rename

The @yummacss/api package is renamed to @yummacss/core. This foundation better represents its role in the ecosystem.

pnpm remove @yummacss/api
pnpm add @yummacss/core

To improve consistency, two utility prefixes are renamed:

Box Shadow

<div class="bs-(value)">…</div>
<div class="bsh-(value)">…</div>

Isolation

<div class="i-(value)">…</div>
<div class="is-(value)">…</div>

Pseudo Variants

This release adds support for pseudo-classes & pseudo-elements.

Pseudo Elements

Style ::before, ::after, ::selection, & ::placeholder directly.

The s::* variant customizes text selection styling:

<p class="c-black s::bg-indigo-4 s::c-white">
  Select this text to see custom selection colors!
</p>

The p::* variant styles placeholder text:

<input
  class="p-3 w-full bc-red-4 bw-1 br-0 p::c-red-4 p::fs-i"
  placeholder="I said, enter your email!"
/>

Pseudo Classes

New fv:* for :focus-visible & fw:* for :focus-within variants.

<button class="p-px bg-indigo c-white br-0 fv:ow-2 fv:oc-indigo">
  Focus with keyboard
</button>

The fw:* variant targets containers when a child has focus:

<div class="p-px bc-silver bw-2 br-0 fw:bc-indigo">
  <input class="p-2 br-0" placeholder="Focus me" />
</div>

Touch Device Support

The pc:* media query variant targets devices with coarse pointer input.

<button class="p-px bg-indigo c-white br-0 pc:p-6">
  Larger padding on touch devices
</button>

Cursor Utilities

New cursor values are added for enhanced interaction feedback.

<div class="c-(value)">…</div>

Touch Action Utilities

New ta-(value) utilities support all touch-action values.

<div class="ta-(value)">…</div>

Transform Updates

Rotation Range

The t-r-(value) utility now ranges from 0 to 360 degrees.

<div class="t-r-(value)">…</div>

Translate Utilities

New t-tx-(value) & t-ty-(value) utilities simplify horizontal & vertical centering.

<div class="t-tx-(value) t-ty-(value)">…</div>

Position Auto Support

The auto value is supported for b-(value), i-(value), ix-(value), iy-(value), l-(value), r-(value), & t-(value) utilities.

<div class="p-r">
  <div class="l-auto r-auto w-14 h-14 p-auto bg-indigo"></div>
</div>

Negative Values

Negative values are supported via the -- syntax.

<div class="d-f jc-c c-white fs-sm">
  <div class="d-f ai-c jc-c w-14 h-14 ml--2 bg-indigo bc-indigo-2/50 br-pill bw-2">
    A
  </div>
</div>

Logical Properties

Utility sets for mx-(value), my-(value), px-(value), & py-(value) now use logical properties (margin-inline, margin-block, padding-inline, padding-block).

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.mx-4 {
  margin-inline: 1rem;
}

.py-4 {
  padding-block: 1rem;
}

Upgrade

Check the Upgrading Guide for a full list of utility renames & removals.

pnpm up yummacss@latest