or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-engine.mdindex.mdintegrations.mdpresets.mdtransformers.md
tile.json

tessl/npm-unocss

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

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

To install, run

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

index.mddocs/

UnoCSS

UnoCSS is an instant on-demand atomic CSS engine that revolutionizes CSS development by generating styles dynamically based on class usage without parsing, AST, or scanning. It offers complete customization through presets rather than core utilities, supports multiple integration methods, and provides advanced features for efficient, on-demand CSS generation.

Package Information

  • Package Name: unocss
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install unocss

Core Imports

import { defineConfig, createGenerator } from "unocss";
import { presetUno, presetAttributify, presetIcons } from "unocss";

For CommonJS:

const { defineConfig, createGenerator, presetUno } = require("unocss");

Basic Usage

import { defineConfig, presetUno, presetAttributify } from "unocss";

// Define UnoCSS configuration
export default defineConfig({
  presets: [
    presetUno(), // Essential utilities
    presetAttributify(), // Attributify mode
  ],
  rules: [
    // Custom rule
    ["m-1", { margin: "0.25rem" }]
  ],
  shortcuts: {
    // Custom shortcut
    "btn": "py-2 px-4 font-semibold rounded-lg shadow-md"
  }
});

// Create generator programmatically
const generator = await createGenerator({
  presets: [presetUno()]
});

const { css } = await generator.generate("text-red-500 bg-blue-200");
console.log(css);

Architecture

UnoCSS is built around several key components:

  • Core Engine: Generator and configuration system for atomic CSS generation
  • Preset System: Modular CSS utility collections (Uno, Wind, Mini, Attributify, Icons, Typography)
  • Transformer System: Source code transformers for advanced features (directives, variant groups)
  • Integration Layer: Build tool plugins for Vite, Webpack, PostCSS, and Astro
  • Configuration API: Type-safe configuration with defineConfig helper

Capabilities

Core Engine

Core UnoCSS engine functionality for generator creation, configuration management, and CSS generation.

function defineConfig<Theme>(config: UserConfig<Theme>): UserConfig<Theme>;
function createGenerator<Theme>(config?: UserConfig<Theme>, defaults?: UserConfig<Theme>): Promise<UnoGenerator<Theme>>;

Core Engine

CSS Presets

Pre-built CSS utility collections providing different atomic CSS methodologies and frameworks.

function presetUno(options?: PresetUnoOptions): Preset<PresetUnoTheme>;
function presetMini(options?: PresetMiniOptions): Preset<PresetMiniTheme>;
function presetWind(options?: PresetWindOptions): Preset<PresetWindTheme>;
function presetAttributify(options?: AttributifyOptions): Preset;
function presetIcons(options?: IconsOptions): Preset;
function presetTypography(options?: TypographyOptions): Preset;

CSS Presets

Source Code Transformers

Transformers that process source code to enable advanced UnoCSS features and syntax.

function transformerDirectives(options?: TransformerDirectivesOptions): SourceCodeTransformer;
function transformerVariantGroup(options?: TransformerVariantGroupOptions): SourceCodeTransformer;
function transformerAttributifyJsx(options?: object): SourceCodeTransformer;
function transformerCompileClass(options?: object): SourceCodeTransformer;

Source Code Transformers

Build Tool Integrations

Integration plugins for popular build tools and frameworks.

// Vite Plugin
export default function UnocssVitePlugin<Theme>(
  configOrPath?: VitePluginConfig<Theme> | string
): Plugin[];

// Astro Integration
export default function UnocssAstroIntegration<Theme>(
  config?: AstroIntegrationConfig<Theme>
): AstroIntegration;

// Webpack Plugin
export default function UnocssWebpackPlugin<Theme>(
  configOrPath?: WebpackPluginOptions<Theme> | string
): any;

// PostCSS Plugin
export default function unocss(options?: object): any;

Build Tool Integrations

Types

Core Configuration Types

interface UserConfig<Theme = object> {
  /** List of presets to use */
  presets?: Preset<Theme>[] | Preset<Theme>;
  /** Custom CSS rules */
  rules?: Rule<Theme>[];
  /** CSS shortcuts */
  shortcuts?: UserShortcuts<Theme>;
  /** Custom variants */
  variants?: Variant<Theme>[];
  /** CSS extractors */
  extractors?: Extractor[];
  /** Source code transformers */
  transformers?: SourceCodeTransformer[];
  /** Preflight CSS */
  preflights?: Preflight<Theme>[];
  /** CSS layers configuration */
  layers?: Record<string, number>;
  /** Theme configuration */
  theme?: Theme;
  /** Files to include/exclude */
  include?: FilterPattern;
  exclude?: FilterPattern;
  /** Safelist of classes to always include */
  safelist?: string[] | string;
  /** Blocklist of classes to exclude */
  blocklist?: (string | RegExp)[];
}

interface ResolvedConfig<Theme = object> extends Required<UserConfig<Theme>> {
  /** Resolved shortcuts */
  shortcuts: Shortcut<Theme>[];
}

interface Preset<Theme = object> {
  name?: string;
  enforce?: 'pre' | 'post';
  presets?: Preset<Theme>[];
  rules?: Rule<Theme>[];
  shortcuts?: UserShortcuts<Theme>;
  variants?: Variant<Theme>[];
  extractors?: Extractor[];
  preflights?: Preflight<Theme>[];
  theme?: Theme;
  layers?: Record<string, number>;
  options?: PresetOptions;
}

Utility Types

type Awaitable<T> = T | Promise<T>;
type Arrayable<T> = T | T[];
type DeepPartial<T> = { [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P] };
type FilterPattern = string | RegExp | (string | RegExp)[];

type Rule<Theme = object> = 
  | [string, CSSObject | CSSEntries]
  | [RegExp, (match: RegExpMatchArray, context: RuleContext<Theme>) => Awaitable<CSSObject | CSSEntries | string | undefined>];

type Variant<Theme = object> = 
  | [string | RegExp, (input: VariantHandlerContext, context: VariantContext<Theme>) => Awaitable<VariantHandlerReturn>];

type CSSObject = Record<string, string | number | CSSObject>;
type CSSEntries = [string, string | number][];