Wrap-up: Sep—26

Every Yumma CSS release in September, newest first. 4.0 & 4.2 have posts of their own; this page links to them rather than repeating them.

4.2.1

September 30

• Classes in markup inside JavaScript strings & template literals are all found.

4.2

September 26

• @st: for @starting-style, so an enter animation is only classes.
• Container queries: @c: variants & ct: for container-type.
• Animation utilities: an:, adu:, ad:, atf: & aic:.
• theme.states, theme.keyframes & theme.fonts for your own variants, animations & font families.
• CSS functions: calc(), clamp(), min(), max() & var().

<nav className="p:st t:20 max-h:calc(100dvh-5rem)"></nav>

Yumma CSS 4.2 walks through each.

4.1.1 & 4.1.2

September 21

• "Did you mean" answers a 3.x spelling with its 4.x class: p-4 suggests p:4, m--4 suggests m:-4, tt-n suggests tt:none.
• tp:c no longer transitions outline-color.

4.0.2

September 18

• yummacss migrate rewrites classes in any string that reads as a class list, not only in class attributes.

4.0

September 18

• A utility separates its prefix from its value with a colon: bg-red-5 is bg:red-5.
• yummacss migrate rewrites a project into the new syntax.
• @xs:, a breakpoint at 32rem, & @prm: for reduced motion.

Yumma CSS 4.0 has the full story & the release video.

3.31.1

September 6

• merge is about 14 times faster.

3.31

September 6

• yummacss/merge merges class strings so the last one wins, & the package ships type declarations.

import { merge } from "yummacss/merge";

merge("c:white", "c:accent"); // "c:accent"

See Class Merge.

Upgrading

From 4.0, update the packages. From 3.x, let the codemod rewrite the classes, then build.

pnpm dlx yummacss migrate --dry-run
pnpm dlx yummacss migrate

The full list is in the changelog. October's releases are in Wrap-up: Oct—26.