Upgrading

Migrate from legacy Yumma CSS to the latest version.

Legacy Versions

In this guide, legacy refers to Yumma CSS v2.1 & earlier versions. These older systems are no longer actively developed.

  1. 1

    Update Yumma CSS

    Remove the legacy yummacss package & install the latest version. Install it as a dev dependency (-D) to keep your production bundle lean.

    pnpm up yummacss@latest
  2. 2

    Initialize configuration

    Create a configuration file in your project.

    pnpx yummacss init
  3. 3

    Delete old imports

    Remove the legacy @import statements from your CSS files.

    @import "yummacss/dist/yumma.min.css";
@import "yummacss/dist/yumma.css";
  4. 4

    Set up configuration

    Specify the locations of all your project files in the new yumma.config.js file.

    export default {
  source: ["./src/**/*.html"],
  output: "./src/styles.css",
};
  5. 5

    Build styles

    Start generating your CSS with the build or watch command.

    pnpx yummacss build

Dependency Changes

Yumma CSS now functions as a CLI tool. The @yummacss/api package is now @yummacss/core. Update your imports accordingly.

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

Utility Changes

Utilities renamed in the current version:

| Property | Legacy (v2) | Latest (v3) | | -------------------- | ------------------------- | ------------------------------- | | Border Radius | rad-(value) | br-(value) | | Border Radius (Pill) | rad-9 | br-pill | | Border Style | b-(value) | bs-(value) | | Border Width | b-(value) | bw-(value) | | Box Shadow | bs-(value) | bs-o-(value) & bs-i-(value) | | Color (Lead) | lead | slate | | Color (Text) | tc-(value) | c-(value) | | Color Variations | l-(value) & d-(value) | Removed | | Direction (Bottom) | dir-b-(value) | b-(value) | | Direction (Inset) | dir-i-(value) | i-(value) | | Direction (Left) | dir-l-(value) | l-(value) | | Direction (Right) | dir-r-(value) | r-(value) | | Direction (Top) | dir-t-(value) | t-(value) | | Float | flo-(value) | fl-(value) | | Font Family (Serif) | ff-c | ff-s | | Font Size (1rem) | fs-b | fs-md | | Grayscale | f-g-(value) | fgr-(value) | | Object Position | op-left | op-l | | Overflow | ovf-(value) | o-(value) | | Overflow X | o-x-(value) | ox-(value) | | Overflow Y | o-y-(value) | oy-(value) | | Skew | t-sk-(value) | ts-(value) | | Skew X | t-skx-(value) | tsx-(value) | | Skew Y | t-sky-(value) | tsy-(value) | | Transform Origin | t-o-(value) | tor-(value) | | Translate | t-t-(value) | tr-(value) | | Translate X | t-tx-(value) | ttx-(value) | | Translate Y | t-ty-(value) | tty-(value) | | Viewport Units | (value)-1/1 | (value)-dvh |

Removed Utilities

The following utilities were completely removed to reduce bloat & improve consistency.

| Category | Legacy (v2) | Replacement | | ---------------- | ----------------------------------------------------- | ------------------------------------------------- | | Caption Side | cs-(value) | Removed | | Color Variations | l-(value) & d-(value) (e.g., l-red-5) | Use standard numbers (e.g., red-3) | | Columns | c-(value) | Removed | | Container | cnt | Removed | | Dimension | dim-(value) / max-dim-(value) / min-dim-(value) | Use w-(value) & h-(value) together | | Empty Cells | ec-(value) | Removed | | Inset | ins | Use d-f ai-c jc-c | | Spacing X/Y | sx-(value) & sy-(value) | Use gap (g-(value), cg-(value), rg-(value)) | | Stroke Width | sw-(value) | Removed | | Tab Size | tab-(value) | Removed |

Color Utility Changes

Remove light (l-) & dark (d-) character prefixes across all color utilities. The lead color is now slate. Map the legacy 1-6 scale to the new 1-12 scale.

<button class="bg-l-lead-6 h:bg-d-lead-1">Button</button>
<button class="bg-slate-1 h:bg-slate-7">Button</button>

| Legacy | Latest | | -------------- | ------------- | | (value)-l-indigo-6 | (value)-indigo-1 | | (value)-l-indigo-5 | (value)-indigo-2 | | (value)-l-indigo-4 | (value)-indigo-3 | | (value)-l-indigo-3 | (value)-indigo-4 | | (value)-l-indigo-2 | (value)-indigo-5 | | (value)-l-indigo-1 | (value)-indigo-6 | | (value)-d-indigo-1 | (value)-indigo-7 | | (value)-d-indigo-2 | (value)-indigo-8 | | (value)-d-indigo-3 | (value)-indigo-9 | | (value)-d-indigo-4 | (value)-indigo-10 | | (value)-d-indigo-5 | (value)-indigo-11 | | (value)-d-indigo-6 | (value)-indigo-12 |

Layout Direction

Remove the dir- prefix for layout utilities.

<div class="dir-b-4">…</div>
<div class="dir-i-2">…</div>
<div class="dir-l-4">…</div>
<div class="dir-r-2">…</div>
<div class="dir-t-4">…</div>
<div class="b-4">…</div>
<div class="i-2">…</div>
<div class="l-4">…</div>
<div class="r-2">…</div>
<div class="t-4">…</div>

Dynamic Viewport

Replace 1/1 dynamic viewport utilities with dvh & dvw.

<div class="h-1/1">…</div>
<div class="h-dvh">…</div>
<div class="w-1/1 h-1/1">…</div>
<div class="w-dvw h-dvh">…</div>

Typography

Use shorter prefixes for font utilities. Replace the fs-b class with fs-md.

<div class="fs-b">…</div>
<div class="ff-c">…</div>
<div class="fs-md">…</div>
<div class="ff-s">…</div>

Borders

Prevent conflicts with unique prefixes for border width (bw-(value)) & border style (bs-(value)). Replace border radius (rad-(value)) with br-(value).

<div class="b-solid b-2 rad-9">…</div>
<div class="br-pill bs-s bw-2">…</div>

Box Shadows

Apply outset (bs-o-) & inset (bs-i-) prefixes for box shadow utilities.

<div class="bs-md">…</div>
<div class="bs-o-md">…</div>

Minify Option

The minify build option is removed. Choose modern tools like Vite to automate CSS minification instead.

Base Styles

Modern versions include standardized base styles for consistency. Disable base styles in yumma.config.js if you prefer your own reset.

export default {
  normalize: false,
};