Core Module

What is Yumma CSS Core?

The @yummacss/core is the foundational engine that powers the entire Yumma CSS ecosystem. It's a TypeScript library that contains every utility definition, prefix, and variant used by the Yumma CSS compiler.

Whether you're building a plugin, an IDE extension, or a custom build tool, the Core package provides the raw data you need to interact with Yumma CSS programmatically.

Installation

Install the package using your preferred package manager:

npm install @yummacss/core

Quick start

The Core package exports functions to retrieve utility definitions by category or as a whole.

Getting all utilities

Retrieve every single utility definition available in Yumma CSS.

import { coreUtils } from "@yummacss/core";

const all = coreUtils();

Scoped utilities

If you only need a specific category, you can import scoped functions.

import { backgroundUtils, fontUtils } from "@yummacss/core";

console.log(backgroundUtils()); // Returns background-related utilities
console.log(fontUtils());       // Returns font-related utilities

Understanding the data structure

Each utility in Yumma CSS is represented by a Utility object. Understanding this structure is key to building tools on top of the Core.

The utility interface

interface Utility {
  prefix: string;          // The class name prefix (e.g., "ba")
  properties: string[];    // The CSS properties controlled (e.g., ["background-attachment"])
  slug: string;            // The unique identifier for the utility
  values: {                // A map of keys to their CSS values
    [key: string]: string;
  };
  variants?: Variants;     // Supported variants like hover or media queries
}

Concrete example

Here is how the background-attachment utility looks like under the hood:

{
  "background-attachment": {
    "prefix": "ba",
    "properties": ["background-attachment"],
    "slug": "background-attachment",
    "values": {
      "f": "fixed",
      "l": "local",
      "s": "scroll"
    },
    "variants": {
      "mediaQueries": [...],
      "pseudoClasses": [...]
    }
  }
}

Available functions

The Core package provides the following functions to access utility definitions:

Typescript support

The Core package is written in TypeScript and exports all internal interfaces for a better developer experience.

import type { Utility, Utilities, Variants, Colors } from "@yummacss/core";

const customTool = (data: Utilities) => {
  // your logic here
};