Functions & Types

Access Yumma CSS utilities, variants, and types programmatically.

The Foundation Of Yumma CSS

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

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:

Function	Description
`coreUtils()`	Returns all available Yumma CSS utilities.
`backgroundUtils()`	Utilities for background properties.
`borderUtils()`	Utilities for borders and radius.
`boxModelUtils()`	Spacing, dimensions, and box model properties.
`colorUtils()`	The entire Yumma CSS color palette.
`effectUtils()`	Shadows, opacity, and filters.
`flexboxUtils()`	Flexbox layout definitions.
`fontUtils()`	Typography and font-related properties.
`gridUtils()`	CSS Grid layout definitions.
`interactivityUtils()`	Cursors, accents, and user interaction.
`outlineUtils()`	Outline styling and offsets.
`positioningUtils()`	Positioning, z-index, and layout flow.
`svgUtils()`	SVG-specific properties like fill and stroke.
`tableUtils()`	Table layouts and border collapse.
`textUtils()`	Text alignment, decoration, and overflow.
`transformUtils()`	Transforms, rotations, and scales.
`transitionsUtils()`	Transitions and timing functions.

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" }
]

Type	Description
`mediaQueries`	Responsive breakpoints and media conditions.
`opacity`	Modifiers for color transparency from 0 to 100.
`pseudoClasses`	Interactive states like `:hover` or `:focus`.
`pseudoElements`	Structural elements like `::before` or `::after`.

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