or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-rules.mdindex.mdpreset-configuration.mdtheme-system.mdutility-functions.mdvariants.md
tile.json

tessl/npm-unocss--preset-mini

The minimal preset for UnoCSS, providing essential utilities for atomic CSS generation with modular theme, rules, and variants.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@unocss/preset-mini@66.5.x

To install, run

npx @tessl/cli install tessl/npm-unocss--preset-mini@66.5.0

index.mddocs/

UnoCSS Preset Mini

The minimal preset for UnoCSS, an instant on-demand Atomic CSS engine. This preset provides the essential utilities for CSS generation, serving as the foundational building block for UnoCSS configurations. It features comprehensive CSS coverage from layout to typography to effects, with support for dark mode variants, arbitrary CSS selectors, customizable prefixes, and optional preflight styles.

Package Information

  • Package Name: @unocss/preset-mini
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @unocss/preset-mini

Core Imports

import { presetMini } from "@unocss/preset-mini";

For specific exports:

import { presetMini, colors, theme, parseColor } from "@unocss/preset-mini";
import { colors } from "@unocss/preset-mini/colors";
import { theme } from "@unocss/preset-mini/theme";
import { variants } from "@unocss/preset-mini/variants";
import { rules } from "@unocss/preset-mini/rules";
import { handler, h, parseColor } from "@unocss/preset-mini/utils";

Basic Usage

import { defineConfig } from "unocss";
import { presetMini } from "@unocss/preset-mini";

export default defineConfig({
  presets: [
    presetMini({
      dark: 'class', // Enable class-based dark mode
      preflight: true, // Include CSS reset
      variablePrefix: 'un-', // CSS variable prefix
    })
  ]
});

Architecture

UnoCSS Preset Mini is built around several key components:

  • Preset Factory: The main presetMini function that generates a complete UnoCSS preset configuration
  • Theme System: Comprehensive theming with colors, spacing, typography, and breakpoints based on Tailwind CSS
  • Rule Engine: Modular CSS rule generators for layout, typography, colors, effects, and more
  • Variant System: Support for responsive, pseudo-classes, dark mode, and arbitrary variants
  • Utility Functions: Color parsing, value handling, and CSS generation utilities
  • Modular Exports: Individual access to theme, rules, variants, colors, and utilities

Capabilities

Preset Configuration

Main preset factory function that creates a complete UnoCSS preset with essential utilities and configurable options.

function presetMini(options?: PresetMiniOptions): Preset;

interface PresetMiniOptions extends PresetOptions {
  /** Dark mode configuration - class-based, media query, or custom selectors */
  dark?: 'class' | 'media' | DarkModeSelectors;
  /** Generate tagged pseudo selector as [group=""] instead of .group */
  attributifyPseudo?: boolean;
  /** Prefix for CSS variables */
  variablePrefix?: string;
  /** Utils prefix for class names */
  prefix?: string | string[];
  /** Generate preflight CSS reset styles */
  preflight?: boolean | 'on-demand';
  /** Enable arbitrary variants like [&>*]:m-1 */
  arbitraryVariants?: boolean;
}

interface DarkModeSelectors {
  /** Selectors for light variant */
  light?: string | string[];
  /** Selectors for dark variant */
  dark?: string | string[];
}

Preset Configuration

Theme System

Comprehensive theme configuration with colors, spacing, typography, breakpoints, and more, providing the foundation for all utility generation.

const theme: Theme;
const colors: Colors;

interface Theme {
  colors?: Colors;
  spacing?: Record<string, string>;
  fontSize?: Record<string, string | [string, string | CSSObject] | [string, string, string]>;
  fontFamily?: Record<string, string>;
  breakpoints?: Record<string, string>;
  borderRadius?: Record<string, string>;
  boxShadow?: Record<string, string | string[]>;
  // ... comprehensive theme properties
}

interface Colors {
  [key: string]: Colors & { DEFAULT?: string } | string;
}

// Additional utility types
interface ParsedColorValue {
  opacity?: string;
  name: string;
  no: string;
  color?: string;
  cssColor?: CSSColorValue;
  alpha?: string;
}

interface ValueHandler {
  bracket: (str: string) => string | undefined;
  bracketOfColor: (str: string) => string | undefined;
  bracketOfLength: (str: string) => string | undefined;
  bracketOfPosition: (str: string) => string | undefined;
  cssvar: (str: string) => string | undefined;
  number: (str: string) => string | undefined;
  numberWithUnit: (str: string) => string | undefined;
  auto: (str: string) => string | undefined;
  rem: (str: string) => string | undefined;
  px: (str: string) => string | undefined;
  percent: (str: string) => string | undefined;
  fraction: (str: string) => string | undefined;
  global: (str: string) => string | undefined;
  time: (str: string) => string | undefined;
  degree: (str: string) => string | undefined;
  properties: (str: string) => string | undefined;
  position: (str: string) => string | undefined;
}

type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor' | 'shadowColor' | 'accentColor';

// Re-exported from @unocss/core
interface Preset {
  name: string;
  theme?: Theme;
  rules?: Rule[];
  variants?: Variant[];
  options?: any;
  prefix?: string | string[];
  postprocess?: Postprocessor[];
  preflights?: Preflight[];
  extractorDefault?: Extractor;
  autocomplete?: any;
}

interface PresetOptions {
  // Base preset options from UnoCSS core
}

type Postprocessor = (obj: { entries: [string, string | number][] }) => void;

// Core UnoCSS types referenced in the API
interface Rule {
  0?: string | RegExp;
  1?: string | DynamicMatcher | CSSObject;
  meta?: any;
}

interface Variant {
  name?: string;
  match?: VariantMatcher;
  multiPass?: boolean;
  autocomplete?: string[];
}

interface Extractor {
  name: string;
  extract: ExtractorFunction;
  order?: number;
}

interface CSSObject {
  [key: string]: string | number | CSSObject | undefined;
}

interface CSSColorValue {
  type: string;
  components: number[];
  alpha?: number;
}

interface StaticRule {
  0: string;
  1: CSSObject;
  meta?: any;
}

type DynamicMatcher = (match: string[], context: RuleContext<Theme>) => CSSObject | string | undefined;
type VariantMatcher = (matcher: string, context: VariantContext<Theme>) => VariantMatchedResult | undefined;
type ExtractorFunction = (code: string, id?: string) => Set<string> | string[] | Promise<Set<string> | string[]>;

interface RuleContext<T = any> {
  theme: T;
  rawSelector: string;
  currentSelector: string;
  variantHandlers: VariantHandler[];
  constructCSS: ConstructCSSFunction;
  generator: UnoGenerator;
}

interface VariantContext<T = any> {
  theme: T;
  generator: UnoGenerator;
}

interface VariantMatchedResult {
  matcher: string;
  selector?: string | ((input: string) => string);
  parent?: string | [string, number];
  layer?: string;
  sort?: number;
}

interface VariantHandler {
  matcher: string;
  selector?: string | ((input: string) => string);
  parent?: string | [string, number];
  layer?: string;
  sort?: number;
}

type ConstructCSSFunction = (selector: string, css: CSSObject | string) => string;

interface UnoGenerator {
  config: any;
  userConfig: any;
}

Theme System

CSS Rules

Modular CSS rule generators covering layout, typography, colors, effects, and responsive design utilities.

const rules: Rule[];

CSS Rules

Variants

Comprehensive variant system supporting responsive breakpoints, pseudo-classes, dark mode, arbitrary selectors, and more.

function variants(options: PresetMiniOptions): Variant[];

Variants

Utility Functions

Color parsing, value handling, and CSS generation utilities for advanced use cases and custom rule creation.

function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): ParsedColorValue | undefined;

function VarPrefixPostprocessor(prefix: string): Postprocessor | undefined;

const handler: ValueHandler;
const h: ValueHandler; // Alias for handler

Utility Functions

Types

interface PresetMiniOptions extends PresetOptions {
  dark?: 'class' | 'media' | DarkModeSelectors;
  attributifyPseudo?: boolean;
  variablePrefix?: string;
  prefix?: string | string[];
  preflight?: boolean | 'on-demand';
  arbitraryVariants?: boolean;
}

interface DarkModeSelectors {
  light?: string | string[];
  dark?: string | string[];
}

interface Theme {
  width?: Record<string, string>;
  height?: Record<string, string>;
  maxWidth?: Record<string, string>;
  maxHeight?: Record<string, string>;
  minWidth?: Record<string, string>;
  minHeight?: Record<string, string>;
  borderRadius?: Record<string, string>;
  breakpoints?: Record<string, string>;
  colors?: Colors;
  fontFamily?: Record<string, string>;
  fontSize?: Record<string, string | [string, string | CSSObject] | [string, string, string]>;
  fontWeight?: Record<string, string>;
  spacing?: Record<string, string>;
  boxShadow?: Record<string, string | string[]>;
  // ... additional theme properties
}

interface ThemeAnimation {
  keyframes?: Record<string, string>;
  durations?: Record<string, string>;
  timingFns?: Record<string, string>;
  properties?: Record<string, object>;
  counts?: Record<string, string | number>;
  category?: Record<string, string>;
}

interface Colors {
  [key: string]: Colors & { DEFAULT?: string } | string;
}

// Additional utility types
interface ParsedColorValue {
  opacity?: string;
  name: string;
  no: string;
  color?: string;
  cssColor?: CSSColorValue;
  alpha?: string;
}

interface ValueHandler {
  bracket: (str: string) => string | undefined;
  bracketOfColor: (str: string) => string | undefined;
  bracketOfLength: (str: string) => string | undefined;
  bracketOfPosition: (str: string) => string | undefined;
  cssvar: (str: string) => string | undefined;
  number: (str: string) => string | undefined;
  numberWithUnit: (str: string) => string | undefined;
  auto: (str: string) => string | undefined;
  rem: (str: string) => string | undefined;
  px: (str: string) => string | undefined;
  percent: (str: string) => string | undefined;
  fraction: (str: string) => string | undefined;
  global: (str: string) => string | undefined;
  time: (str: string) => string | undefined;
  degree: (str: string) => string | undefined;
  properties: (str: string) => string | undefined;
  position: (str: string) => string | undefined;
}

type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor' | 'shadowColor' | 'accentColor';

// Re-exported from @unocss/core
interface Preset {
  name: string;
  theme?: Theme;
  rules?: Rule[];
  variants?: Variant[];
  options?: any;
  prefix?: string | string[];
  postprocess?: Postprocessor[];
  preflights?: Preflight[];
  extractorDefault?: Extractor;
  autocomplete?: any;
}

interface PresetOptions {
  // Base preset options from UnoCSS core
}

type Postprocessor = (obj: { entries: [string, string | number][] }) => void;

// Core UnoCSS types referenced in the API
interface Rule {
  0?: string | RegExp;
  1?: string | DynamicMatcher | CSSObject;
  meta?: any;
}

interface Variant {
  name?: string;
  match?: VariantMatcher;
  multiPass?: boolean;
  autocomplete?: string[];
}

interface Extractor {
  name: string;
  extract: ExtractorFunction;
  order?: number;
}

interface CSSObject {
  [key: string]: string | number | CSSObject | undefined;
}

interface CSSColorValue {
  type: string;
  components: number[];
  alpha?: number;
}

interface StaticRule {
  0: string;
  1: CSSObject;
  meta?: any;
}

type DynamicMatcher = (match: string[], context: RuleContext<Theme>) => CSSObject | string | undefined;
type VariantMatcher = (matcher: string, context: VariantContext<Theme>) => VariantMatchedResult | undefined;
type ExtractorFunction = (code: string, id?: string) => Set<string> | string[] | Promise<Set<string> | string[]>;

interface RuleContext<T = any> {
  theme: T;
  rawSelector: string;
  currentSelector: string;
  variantHandlers: VariantHandler[];
  constructCSS: ConstructCSSFunction;
  generator: UnoGenerator;
}

interface VariantContext<T = any> {
  theme: T;
  generator: UnoGenerator;
}

interface VariantMatchedResult {
  matcher: string;
  selector?: string | ((input: string) => string);
  parent?: string | [string, number];
  layer?: string;
  sort?: number;
}

interface VariantHandler {
  matcher: string;
  selector?: string | ((input: string) => string);
  parent?: string | [string, number];
  layer?: string;
  sort?: number;
}

type ConstructCSSFunction = (selector: string, css: CSSObject | string) => string;

interface UnoGenerator {
  config: any;
  userConfig: any;
}