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:

pnpm add @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 {
  readonly prefix: string;          // The class name prefix (e.g., "ba")
  readonly properties: readonly string[];    // The CSS properties controlled (e.g., ["background-attachment"])
  readonly slug: string;            // The unique identifier for the utility
  readonly values: {                // A map of keys to their CSS values
    readonly [key: string]: string;
  };
  readonly 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:

Variants

The Core package exports all of the available Yumma CSS utility variants raw data:

Accessing variants

You can import the variant arrays directly from the package.

import { mediaQueries, opacity, pseudoClasses, pseudoElements } from "@yummacss/core";

console.log(mediaQueries);

Variant structure

Each variant follows a consistent prefix and value structure.

[
  { "prefix": "sm", "value": "@media (width >= 40rem)" },
  { "prefix": "50", "value": "80" },
  { "prefix": "h", "value": ":hover" },
  { "prefix": "b", "value": "::before" }
]

Typescript support

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

Utility types

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

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

Variant literal types

For even better type safety, we export literal types for every variant prefix. This is particularly useful for IDE extensions and plugins.

import type {
    MediaQueryPrefix,
    OpacityPrefix,
    PseudoClassPrefix,
    PseudoElementPrefix,
    VariantPrefix
} from "@yummacss/core";

// VariantPrefix is a union of all available prefixes
const prefix: VariantPrefix = "sm"; // Typed as a literal