Yumma CSS 3.4

SCSS removal

In 2024, the launch of Yumma CSS API provided a way to retrieve base class definitions through JavaScript & TypeScript functions. These were used in the documentation & playground for code completions.

The v3 CLI rewrite made SCSS compilation a primary focus, using sass-embedded & purgecss to generate & clean styles. These tasks were slow on larger projects.

Yumma CSS v3.4 migrates from sass-embedded to @yummacss/api for CSS generation, significantly improving build times, overall performance, & bundle size.

CLI updates

This release includes logic & performance updates to the CLI:

Token extraction

The new token extraction process allows the CLI to scan for class tokens in source files defined in yumma.config.mjs & generate CSS accordingly.

This avoids unnecessary CSS generation & further improves build performance.

<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;
}

Build performance

Since data is already structured in @yummacss/api, the CLI only extracts tokens from source files to generate the final CSS.

pnpx yummacss watch
√ 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)

Run pnpx yummacss watch in your terminal to test the performance.

API updates

The Library API is updated to support utility & variant generation. Existing projects will continue to function.

• Added pseudo-class support for all utility definitions.
• Added media query support for all utility definitions.

Responsive color support

You can now use breakpoints with color utilities.

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

Base style updates

Without purgecss, tree shaking is disabled when using buildOptions.reset. This includes all base styles in the final CSS file.

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

NPM fix

A fix is available for a bug that prevented the Yumma CSS CLI from running when using npm as a package manager.

npm install yummacss -D
pnpx yummacss init
pnpx yummacss build

Upgrade

Get the latest version of Yumma CSS:

pnpm up yummacss@latest