tessl/npm-unocss--preset-mini

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

—

Pending

Overview

Eval results

Files

Preset Configuration

Name: tessl/npm-unocss--preset-mini
Author: tessl

Core preset factory function that creates a complete UnoCSS preset with essential utilities and configurable options for atomic CSS generation.

Capabilities

Preset Mini Function

Creates the basic preset for UnoCSS with the most essential utilities, serving as the foundational building block for UnoCSS configurations.

/**
 * The basic preset for UnoCSS, with only the most essential utilities.
 * @param options - Configuration options for the preset
 * @returns Complete UnoCSS preset configuration
 */
function presetMini(options?: PresetMiniOptions): Preset;

interface PresetMiniOptions extends PresetOptions {
  /** 
   * Dark mode options
   * @default 'class'
   */
  dark?: 'class' | 'media' | DarkModeSelectors;
  
  /** 
   * Generate tagged pseudo selector as [group=""] instead of .group
   * @default false
   */
  attributifyPseudo?: boolean;
  
  /** 
   * Prefix for CSS variables
   * @default 'un-'
   */
  variablePrefix?: string;
  
  /** 
   * Utils prefix. When using tagged pseudo selector, only the first truthy prefix will be used
   * @default undefined
   */
  prefix?: string | string[];
  
  /** 
   * Generate preflight CSS reset styles
   * @default true
   */
  preflight?: boolean | 'on-demand';
  
  /** 
   * Enable arbitrary variants, for example <div class="[&>*]:m-1 [&[open]]:p-2"></div>
   * Disable this might slightly improve the performance
   * @default true
   */
  arbitraryVariants?: boolean;
}

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

Usage Examples:

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

// Basic usage with defaults
export default defineConfig({
  presets: [presetMini()]
});

// Custom configuration
export default defineConfig({
  presets: [
    presetMini({
      dark: 'media', // Use media queries for dark mode
      variablePrefix: 'app-', // Custom CSS variable prefix
      prefix: 'u-', // Custom utility prefix
      preflight: false, // Disable CSS reset
      arbitraryVariants: false, // Disable arbitrary variants for performance
    })
  ]
});

// Custom dark mode selectors
export default defineConfig({
  presets: [
    presetMini({
      dark: {
        light: ['.light-theme', '[data-theme="light"]'],
        dark: ['.dark-theme', '[data-theme="dark"]'],
      }
    })
  ]
});

Default Export

The preset function is also available as the default export for convenience.

const presetMini: (options?: PresetMiniOptions) => Preset;
export default presetMini;

CSS Variable Prefix Postprocessor

Creates a postprocessor to transform CSS variable prefixes from the default --un- to a custom prefix.

/**
 * Creates a postprocessor to transform CSS variable prefixes
 * @param prefix - The custom prefix to use instead of 'un-'
 * @returns Postprocessor function or undefined if prefix is 'un-'
 */
function VarPrefixPostprocessor(prefix: string): Postprocessor | undefined;

Usage Example:

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

// This is used internally by presetMini when variablePrefix option is set
const postprocessor = VarPrefixPostprocessor('app-');
// Transforms --un-bg-opacity to --app-bg-opacity

Configuration Options Details

Dark Mode Configuration

The dark option controls how dark mode variants are generated:

'class' (default): Uses .dark class selector for dark mode utilities
'media': Uses @media (prefers-color-scheme: dark) media query
DarkModeSelectors: Custom selectors for light and dark variants

Preflight Configuration

The preflight option controls CSS reset generation:

true (default): Includes complete CSS reset styles
false: No preflight styles are generated
'on-demand': Only generates preflight styles for actively used properties

Arbitrary Variants

When arbitraryVariants is enabled (default), you can use complex selectors:

<!-- Target direct children -->
<div class="[&>*]:margin-1">
  <p>Child with margin</p>
</div>

<!-- Target specific states -->
<details class="[&[open]]:padding-2">
  Content with conditional padding
</details>

Variable and Utility Prefixes

variablePrefix: Changes CSS custom property prefix (e.g., --un- to --app-)
prefix: Adds prefix to utility classes (e.g., m-4 becomes u-m-4)

Install with Tessl CLI

npx tessl i tessl/npm-unocss--preset-mini

docs

css-rules.md

index.md

preset-configuration.md

tessl/npm-unocss--preset-mini