Yumma CSS 4.2

Animate an element in & out, name the variants your components need, & size things by their container, all without writing CSS by hand.

Starting Style

An element that appears has no previous style to transition from. The @st: variant gives it one, so an enter animation is just classes.

<div className="tp:a tdu:150 ttf:eo @st:o:0 @st:s:90">Saved to Documents</div>

It is an at-rule like a breakpoint, so @md:@st:o:0 works too.

Your Own States

Components mark what they are doing with attributes. A details element is [open], & a Base UI popup is [data-ending-style] while it closes. Name the attribute once in theme.states & it becomes a variant like h:.

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    states: {      closing: "[data-ending-style]",      open: "[open]",    },  },});

@st: covers the way in & a state covers the way out, which together animate a popup both ways. Nothing is built in: every state is one you name. See States.

Keyframes & Fonts

theme.keyframes takes the body of a @keyframes rule, & each name becomes an an: class. The rest of the animation is utilities too: adu: for duration, ad: for delay, atf: for timing & aic: for how many times it runs.

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    keyframes: {      spin: "to { rotate: 360deg; }",    },  },});

theme.fonts does the same for ff:, so a display face is a class like any other. A name that matches a built-in family replaces it.

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    fonts: {      display: '"Esteban", serif',    },  },});

Container Queries

Mark the parent with ct:is, then prefix a child's class with @c: & a breakpoint name. The class applies once the container, not the window, reaches that width.

<div className="ct:is">
  <h2 className="fs:md @c:sm:fs:xl">Recent files</h2>
</div>

The same card can sit in a narrow sidebar & a wide page & lay itself out for each. See Container Queries.

CSS Functions

A value no scale holds, such as the viewport minus a header, is written as the function it is. calc(), clamp(), min() & max() work in any utility that takes a length, & var() works in every utility.

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

A class cannot hold spaces, so write the function without them. The spaces CSS needs around + & - are added in the output. See CSS Functions.

Smaller Changes

tp:t transitions translate, scale & rotate along with transform, so the individual transform properties animate with it.

Stacked at-rule variants keep both queries. @sm:@lg: used to lose one of them.

Form controls inherit the whole font from the page, not only its family.

The script tag package is @yummacss/cdn, which replaces @yummacss/runtime as of 4.1.

The full list is in the changelog.