Yumma CSS 3.4

Oct 2, 2025

Today we’re releasing Yumma CSS 3.4 — a complete rework of the core framework with a focus on performance, a rewritten CLI, base style changes, quality-of-life improvements, and much more.

You may also want to take a look at some of the release notes but, anyway, these are the most noticeable shifts:

No more SCSS: Why are we dropping SCSS?
CLI changes: A complete rewrite of the CLI for better performance.
API changes: Changes to the API and its usage.
Base style changes: No more tree shaking when using base styles.
Color breakpoints support: New support for breakpoints in color utilities.
NPM support: Improvements for npm compatibility and other fixes.

This is an incremental update that may contain breaking changes. Minor releases follow semantic versioning conventions. In other words, a migration is necessary to continue using the framework.

No more SCSS

On November 16, 2024, we launched Yumma CSS API, an accessible way to retrieve all base Yumma CSS class definitions trough Javascript and Typescript functions. We mostly used it in our documentation site, and then in our playground site for code completions.

With the release of the new CLI in Yumma CSS v3, SCSS compilation become the main activity of the entire framework. It used sass-embedded to compile SCSS to CSS and purgecss to remove styles that aren’t being used. These tasks took a long time to finish, especially with larger projects.

So, in Yumma CSS v3.4, we decided to migrate from sass-embedded to @yummacss/api for CSS generation. This drastically improves build times and overall performance while also reducing the bundle size of the framework.

CLI changes

This release includes a bunch of changes to the CLI’s overall logic and performance. Here are the most noticeable ones:

Token extraction

The new token extraction process in Yumma CSS v3.4 will allow the CLI to look for class tokens in your source files defined in your yumma.config.mjs file and generate a CSS file accordingly.

This change should avoid unnecessary CSS generation and improve build times even further.

<div class="d-f ai-c jc-c">bg-blue</div>

.d-f {
  display: flex;
}

.ai-c {
  align-items: center;
}

.jc-c {
  justify-content: center;
}

Instant build times

We’ve been chasing this for a long time, and it’s finally here. Thanks to the @yummacss/api integration and the token extraction process, we can now execute build and rebuild tasks instantaneously — even with large projects.

pnpm yummacss w
√ Build done in 11ms. (./src/out.css)
i Watching...
√ Build done in 4ms. (./src/out.css)
√ Build done in 4ms. (./src/out.css)
√ Build done in 2ms. (./src/out.css)
√ Build done in 3ms. (./src/out.css)
√ Build done in 3ms. (./src/out.css)

Try it out yourself by running pnpm yummacss watch or npx yummacss watch in your terminal.

API changes

With the migration to @yummacss/api we had to make some changes to the API’s codebase. You can now expect the following changes:

Add pseudo-class variants to all functions.
Add media query variants to all functions.

The new variants shouldn’t feel like a breaking change, since the variants? interface is optional. Your projects should continue to function as expected.

Base style changes

Without purgecss you should NOT expect tree shaking when using buildOptions.reset. This means that all base styles will be included in the final CSS file.

export default {
  source: ["./src/**/*.html"],
  output: "./src/out.css",
  buildOptions: {
    reset: true,
    minify: false,
  },
};

Color breakpoints support

Pretty self explanatory, but now you can use breakpoints with color utilities.

<div class="bg-white md:bg-silver-1">...</div>

NPM support

We had a bug that was preventing users from running the Yumma CSS CLI when using npm as a package manager. This issue should now be fixed.

npm install yummacss -D
npx yummacss init
npx yummacss build

Upgrade

You can upgrade your projects by getting the latest version of yummacss from npm:

pnpm add yummacss@latest

npm i yummacss@latest

yarn add yummacss@latest