CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-unocss

The instant on-demand Atomic CSS engine for generating styles dynamically without parsing, AST, or scanning.

Pending
Overview
Eval results
Files

core-engine.mddocs/

Core Engine

Core UnoCSS engine functionality providing generator creation, configuration management, utility functions, and the fundamental CSS generation system.

Capabilities

Configuration Functions

Helper functions for defining and managing UnoCSS configuration.

/**
 * Define UnoCSS configuration with type safety
 * @param config - User configuration object
 * @returns Validated configuration object
 */
function defineConfig<Theme>(config: UserConfig<Theme>): UserConfig<Theme>;

/**
 * Resolve user configuration with defaults
 * @param userConfig - User-provided configuration
 * @param defaults - Default configuration to merge with
 * @returns Resolved configuration
 */
function resolveConfig<Theme>(
  userConfig: UserConfig<Theme>, 
  defaults?: UserConfig<Theme>
): Promise<ResolvedConfig<Theme>>;

/**
 * Merge multiple configurations into one
 * @param configs - Array of configurations to merge
 * @returns Merged configuration
 */
function mergeConfigs<Theme>(configs: UserConfig<Theme>[]): UserConfig<Theme>;

/**
 * Helper to define presets with proper typing
 * @param preset - Preset configuration
 * @returns Typed preset object
 */
function definePreset<Theme>(preset: Preset<Theme>): Preset<Theme>;

Generator Functions

Core generator creation and management functions.

/**
 * Creates a UnoCSS generator instance asynchronously
 * @param config - Optional user configuration
 * @param defaults - Optional default configuration
 * @returns Promise that resolves to UnoGenerator instance
 */
function createGenerator<Theme>(
  config?: UserConfig<Theme>, 
  defaults?: UserConfig<Theme>
): Promise<UnoGenerator<Theme>>;

interface UnoGenerator<Theme = object> {
  /** Current resolved configuration */
  config: ResolvedConfig<Theme>;
  
  /** Generate CSS from tokens */
  generate(
    tokens: string | string[], 
    options?: GenerateOptions<Theme>
  ): Promise<GenerateResult<Theme>>;
  
  /** Parse and match tokens */
  parseToken(token: string): Promise<ExtendedTokenInfo<Theme>[]>;
  
  /** Get all CSS for given tokens */
  getCSS(options?: GenerateOptions<Theme>): Promise<string>;
  
  /** Apply safelist patterns */
  applyExtractors(
    code: string, 
    filename?: string, 
    extractors?: Extractor[]
  ): Promise<Set<string>>;
}

interface GenerateOptions<Theme = object> {
  /** File ID for context */
  id?: string;
  /** Tokens to generate CSS for */
  tokens?: Set<string>;
  /** Whether to include preflights */
  preflights?: boolean;
  /** Whether to include safelist */
  safelist?: boolean;
  /** Minimum layers to include */
  minify?: boolean;
}

interface GenerateResult<Theme = object> {
  /** Generated CSS string */
  css: string;
  /** Layer information */
  layers: string[];
  /** Matched tokens information */
  matched: Set<string>;
  /** Processing time */
  time: number;
}

Core Symbols and Constants

Special control symbols and constants for CSS manipulation.

/** Special control symbols for CSS manipulation */
declare const symbols: {
  /** Prevent merging in shortcuts */
  readonly shortcutsNoMerge: unique symbol;
  /** Prevent merging in rules */
  readonly noMerge: unique symbol;
  /** Additional variants for rules */
  readonly variants: unique symbol;
  /** Parent selector (@media, @supports, etc.) */
  readonly parent: unique symbol;
  /** Selector modifier */
  readonly selector: unique symbol;
  /** Layer modifier */
  readonly layer: unique symbol;
  /** Sort modifier */
  readonly sort: unique symbol;
  /** Custom CSS body modifier */
  readonly body: unique symbol;
};

/** Default layer name ('default') */
declare const LAYER_DEFAULT: string;
/** Preflights layer name ('preflights') */
declare const LAYER_PREFLIGHTS: string;
/** Shortcuts layer name ('shortcuts') */
declare const LAYER_SHORTCUTS: string;
/** Imports layer name ('imports') */
declare const LAYER_IMPORTS: string;
/** Default layer configuration object */
declare const DEFAULT_LAYERS: Record<string, number>;

Utility Functions

General utility functions for common operations.

/**
 * Converts value to array
 * @param value - Value to convert
 * @returns Array containing the value(s)
 */
function toArray<T>(value: T | T[]): T[];

/**
 * Returns array with unique values
 * @param array - Input array
 * @returns Array with duplicates removed
 */
function uniq<T>(array: T[]): T[];

/**
 * Returns unique array using equality function
 * @param array - Input array
 * @param equalFn - Function to determine equality
 * @returns Array with duplicates removed based on equalFn
 */
function uniqueBy<T>(array: T[], equalFn: (a: T, b: T) => boolean): T[];

/**
 * Type guard for strings
 * @param value - Value to check
 * @returns True if value is string
 */
function isString(value: any): value is string;

/**
 * Type guard for objects
 * @param item - Item to check
 * @returns True if item is object
 */
function isObject(item: any): item is object;

/**
 * Deep merge objects
 * @param original - Original object
 * @param patch - Patch to apply
 * @param mergeArray - Whether to merge arrays
 * @returns Merged object
 */
function mergeDeep<T>(original: T, patch: DeepPartial<T>, mergeArray?: boolean): T;

/**
 * Deep clone values
 * @param val - Value to clone
 * @returns Cloned value
 */
function clone<T>(val: T): T;

/**
 * Type guard to filter null/undefined
 * @param value - Value to check
 * @returns True if value is not null/undefined
 */
function notNull<T>(value: T | null | undefined): value is T;

/**
 * No-operation function
 */
function noop(): void;

/**
 * Warn once per message
 * @param msg - Warning message
 */
function warnOnce(msg: string): void;

CSS Utilities

Functions for working with CSS objects and strings.

/**
 * Normalize CSS entries
 * @param obj - CSS object to normalize
 * @returns Normalized CSS entries
 */
function normalizeCSSEntries(obj: CSSObject): CSSEntries;

/**
 * Normalize CSS values
 * @param obj - Object with CSS values
 * @returns Object with normalized values
 */
function normalizeCSSValues(obj: Record<string, any>): Record<string, string>;

/**
 * Convert entries to CSS string
 * @param entries - CSS entries to convert
 * @returns CSS string
 */
function entriesToCss(entries: CSSEntries): string;

/**
 * Remove duplicate entries
 * @param entries - CSS entries
 * @returns Entries with duplicates removed
 */
function clearIdenticalEntries(entries: CSSEntries): CSSEntries;

/**
 * Escape CSS selector
 * @param str - Selector string to escape
 * @returns Escaped selector
 */
function escapeSelector(str: string): string;

/**
 * Short alias for escapeSelector
 */
declare const e: typeof escapeSelector;

/**
 * Escape CSS selector for safe use
 * @param raw - Raw selector
 * @returns Escaped selector
 */
function toEscapedSelector(raw: string): string;

/**
 * Check if CSS has scope placeholder
 * @param css - CSS string to check
 * @returns True if has scope placeholder
 */
function hasScopePlaceholder(css: string): boolean;

Advanced Data Structures

Enhanced data structures for internal UnoCSS operations.

/**
 * Set that tracks element counts
 */
class CountableSet<K> extends Set<K> {
  getCount(key: K): number;
  setCount(key: K, count: number): this;
  increaseCount(key: K, delta?: number): number;
  decreaseCount(key: K, delta?: number): number;
}

/**
 * Type guard for CountableSet
 * @param value - Value to check
 * @returns True if value is CountableSet
 */
function isCountableSet<T>(value: any): value is CountableSet<T>;

/**
 * Map with two keys
 */
class TwoKeyMap<K1, K2, V> {
  set(key1: K1, key2: K2, value: V): this;
  get(key1: K1, key2: K2): V | undefined;
  has(key1: K1, key2: K2): boolean;
  delete(key1: K1, key2: K2): boolean;
  clear(): void;
}

/**
 * Enhanced Map class with additional utilities
 */
class BetterMap<K, V> extends Map<K, V> {
  ensure(key: K, defaultValue: V): V;
  approach(key: K, defaultValue: V): V;
}

/**
 * Create nano event emitter
 * @returns Event emitter instance
 */
function createNanoEvents<Events>(): {
  emit<E extends keyof Events>(event: E, ...args: Events[E] extends (...args: infer A) => any ? A : []): void;
  on<E extends keyof Events>(event: E, callback: Events[E]): () => void;
};

Extractors and Parsing

Functions for extracting and parsing CSS tokens from source code.

/**
 * Default split extractor
 */
declare const extractorSplit: Extractor;

/**
 * Default split regex
 */
declare const defaultSplitRE: RegExp;

/**
 * Split regex with variant groups
 */
declare const splitWithVariantGroupRE: RegExp;

/**
 * Split code into tokens
 * @param code - Source code to split
 * @returns Array of tokens
 */
function splitCode(code: string): string[];

/**
 * Parse variant group syntax
 * @param str - String to parse
 * @param separators - Optional separators
 * @param depth - Optional parsing depth
 * @returns Parsed variant group
 */
function parseVariantGroup(str: string, separators?: string[], depth?: number): any;

/**
 * Expand variant group syntax
 * @param str - String to expand
 * @param separators - Optional separators
 * @param depth - Optional expansion depth
 * @returns Expanded variant group
 */
function expandVariantGroup(str: string, separators?: string[], depth?: number): string[];

/**
 * Collapse variant group syntax
 * @param str - String to collapse
 * @param prefixes - Prefixes to use
 * @returns Collapsed variant group
 */
function collapseVariantGroup(str: string, prefixes: string[]): string;

Types

Context Types

interface RuleContext<Theme = object> {
  /** Current theme */
  theme: Theme;
  /** Raw CSS selector */
  rawSelector: string;
  /** Current CSS selector */
  currentSelector: string;
  /** Available variants */
  variants: Set<Variant<Theme>>;
  /** Generator instance */
  generator: UnoGenerator<Theme>;
}

interface VariantContext<Theme = object> {
  /** Current theme */
  theme: Theme;
  /** Generator instance */
  generator: UnoGenerator<Theme>;
}

interface ExtractorContext {
  /** Original code */
  original: string;
  /** Code to extract from */
  code: string;
  /** File ID */
  id?: string;
}

Extended Token Information

interface ExtendedTokenInfo<Theme = object> {
  /** Parsed token */
  token: string;
  /** Raw token */
  raw: string;
  /** CSS body */
  body: CSSObject;
  /** Parent selectors */
  parent: string;
  /** Selector transformations */
  selector: string;
  /** Layer name */
  layer: string;
  /** Sort value */
  sort: number;
  /** Associated rule */
  rule?: Rule<Theme>;
  /** Associated shortcut */
  shortcut?: Shortcut<Theme>;
}

Install with Tessl CLI

npx tessl i tessl/npm-unocss

docs

core-engine.md

index.md

integrations.md

presets.md

transformers.md

tile.json