Upgrading

Migrate from legacy Yumma CSS v2 to the modern CLI-driven workflow. Modern versions introduce significant performance improvements, a dedicated CLI, & core utility naming shifts.

Previous versions relied on @import statements. The current system uses a dedicated CLI for better performance & flexibility.

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",
     buildOptions: {
       reset: true,
     },
   };

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:

Removed Utilities

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

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>

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="w-1/1 h-1/1">...</div>
<div class="h-1/1">...</div>
<div class="w-dvw h-dvh">...</div>
<div class="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-*) & border style (bs-*). Replace border radius (rad-*) with br-*.

<div class="rad-9 b-solid b-2">...</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 {
  buildOptions: {
    reset: false,
  },
};