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

The p::* variant styles placeholder text:

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

Pseudo-classes

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

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

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

<div class="fw:bc-indigo bw-2 bc-silver p-px br-0">
  <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 pc:p-6 bg-indigo c-white br-0">
  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="p-auto l-auto r-auto d-14 bg-indigo"></div>
</div>

Negative values

Negative values are supported via the -- syntax.

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

Get the latest version of Yumma CSS:

pnpm up yummacss@latest