The instant on-demand Atomic CSS engine for generating styles dynamically without parsing, AST, or scanning.
—
Core UnoCSS engine functionality providing generator creation, configuration management, utility functions, and the fundamental CSS generation system.
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>;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;
}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>;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;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;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;
};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;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;
}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