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-*">...</div>
<div class="bsh-*">...</div>

Isolation

<div class="i-*">...</div>
<div class="is-*">...</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-*">...</div>

Touch Action Utilities

New ta-* utilities support all touch-action values.

<div class="ta-*">...</div>

Transform Updates

Rotation Range

The t-r-* utility now ranges from 0 to 360 degrees.

<div class="t-r-*">...</div>

Translate Utilities

New t-tx-* & t-ty-* utilities simplify horizontal & vertical centering.

<div class="t-tx-* t-ty-*">...</div>

Position Auto Support

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

<div class="p-r">
  <div class="d-14 l-auto r-auto 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-14 d-f ai-c jc-c ml--2 bg-indigo bc-indigo-2/50 br-pill bw-2">A</div>
  <div class="d-14 d-f ai-c jc-c ml--2 bg-indigo bc-indigo-2/50 br-pill bw-2">B</div>
  <div class="d-14 d-f ai-c jc-c ml--2 bg-indigo bc-indigo-2/50 br-pill bw-2">C</div>
  <div class="d-14 d-f ai-c jc-c ml--2 bg-indigo bc-indigo-2/50 br-pill bw-2">D</div>
  <div class="d-14 d-f ai-c jc-c ml--2 bg-indigo bc-indigo-2/50 br-pill bw-2">E</div>
</div>

Logical Properties

Utility sets for mx-*, my-*, px-*, & py-* 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