tessl/npm-unocss

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

—

Pending

Overview

Eval results

Files

CSS Presets

Name: tessl/npm-unocss
Author: tessl

Pre-built CSS utility collections providing different atomic CSS methodologies and frameworks. Presets define rules, shortcuts, and variants that generate CSS utilities based on class names.

Capabilities

Core Presets

Essential presets providing different approaches to atomic CSS generation.

/**
 * Uno preset - The default UnoCSS preset (deprecated, use presetWind3)
 * @param options - Configuration options
 * @returns Preset configuration
 */
function presetUno(options?: PresetUnoOptions): Preset<PresetUnoTheme>;

/**
 * Mini preset - Essential utilities with minimal configuration
 * @param options - Configuration options
 * @returns Preset configuration
 */
function presetMini(options?: PresetMiniOptions): Preset<PresetMiniTheme>;

/**
 * Wind preset - Tailwind-compatible utilities
 * @param options - Configuration options
 * @returns Preset configuration
 */
function presetWind(options?: PresetWindOptions): Preset<PresetWindTheme>;

/**
 * Wind3 preset - Tailwind v3 compatible utilities
 * @param options - Configuration options
 * @returns Preset configuration
 */
function presetWind3(options?: PresetWind3Options): Preset<PresetWind3Theme>;

/**
 * Wind4 preset - Tailwind v4 compatible utilities
 * @param options - Configuration options
 * @returns Preset configuration
 */
function presetWind4(options?: PresetWind4Options): Preset<PresetWind4Theme>;

interface PresetUnoOptions {
  /** Enable dark mode utilities */
  dark?: 'media' | 'class' | 'both';
  /** Attributify mode options */
  attributify?: boolean | AttributifyOptions;
  /** Color options */
  colors?: Record<string, any>;
  /** Prefix for utilities */
  prefix?: string;
  /** Enable preflight styles */
  preflight?: boolean;
}

interface PresetMiniOptions {
  /** Enable dark mode utilities */
  dark?: 'media' | 'class' | 'both';
  /** Enable preflight styles */
  preflight?: boolean;
  /** Custom color palette */
  colors?: Record<string, any>;
  /** Enable CSS variables */
  variablesCss?: boolean;
}

interface PresetWindOptions {
  /** Enable dark mode utilities */
  dark?: 'media' | 'class' | 'both';
  /** Custom color palette */
  colors?: Record<string, any>;
  /** Enable preflight styles */
  preflight?: boolean;
  /** CSS variables prefix */
  variablePrefix?: string;
}

Usage Examples:

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

export default defineConfig({
  presets: [
    presetUno({
      dark: 'class',
      colors: {
        primary: '#3b82f6',
        secondary: '#64748b'
      }
    }),
    presetMini({
      preflight: false
    })
  ]
});

Specialized Presets

Presets that provide specific functionality and features.

/**
 * Attributify preset - Enables attributify mode for grouping utilities in attributes
 * @param options - Configuration options
 * @returns Preset configuration
 */
function presetAttributify(options?: AttributifyOptions): Preset;

/**
 * Icons preset - Enables CSS icon utilities from icon collections
 * @param options - Configuration options
 * @returns Preset configuration
 */
function presetIcons(options?: IconsOptions): Preset;

/**
 * Tagify preset - Enables tagify mode for tag-based utilities
 * @param options - Configuration options
 * @returns Preset configuration
 */
function presetTagify(options?: object): Preset;

/**
 * Typography preset - Provides typography utilities and prose styles
 * @param options - Configuration options
 * @returns Preset configuration
 */
function presetTypography(options?: TypographyOptions): Preset;

/**
 * Web fonts preset - Enables web font utilities
 * @param options - Configuration options
 * @returns Preset configuration
 */
function presetWebFonts(options?: WebFontsOptions): Preset;

interface AttributifyOptions {
  /** CSS selector prefix */
  prefix?: string;
  /** CSS selector suffix */
  prefixedOnly?: boolean;
  /** Non-valued attributes */
  nonValuedAttribute?: boolean;
  /** Ignored attributes */
  ignoreAttributes?: string[];
}

interface IconsOptions {
  /** Icon collections to load */
  collections?: Record<string, any>;
  /** Icon scale factor */
  scale?: number;
  /** Enable CDN mode */
  cdn?: string;
  /** Custom icon loader */
  customizations?: {
    iconCustomizer?: (collection: string, icon: string, props: any) => any;
    transform?: (svg: string, collection: string, icon: string) => string;
  };
  /** Warning for missing icons */
  warn?: boolean;
  /** Icon unit */
  unit?: string;
}

interface TypographyOptions {
  /** CSS selector for typography */
  className?: string;
  /** Custom CSS styles */
  cssExtend?: Record<string, any>;
  /** Compatibility mode */
  compatibility?: {
    vendor?: {
      'webkit'?: boolean;
      'moz'?: boolean;
    };
    modern?: boolean;
  };
}

interface WebFontsOptions {
  /** Web font provider */
  provider?: 'google' | 'bunny' | 'fontshare' | 'none';
  /** Font families to load */
  fonts?: Record<string, string | string[] | WebFontMeta>;
  /** Extended font families */
  extendTheme?: boolean;
  /** Inline CSS */
  inlineImports?: boolean;
  /** Custom fetcher */
  customFetch?: (url: string) => Promise<string>;
}

interface WebFontMeta {
  name: string;
  weights?: (string | number)[];
  italic?: boolean;
  provider?: string;
}

Usage Examples:

import { defineConfig, presetAttributify, presetIcons, presetTypography } from "unocss";

export default defineConfig({
  presets: [
    presetAttributify({
      prefix: 'un-',
      prefixedOnly: true
    }),
    presetIcons({
      collections: {
        heroicons: () => import('@iconify-json/heroicons/icons.json').then(i => i.default),
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default)
      },
      scale: 1.2,
      warn: true
    }),
    presetTypography({
      cssExtend: {
        'code': {
          color: '#8b5cf6'
        }
      }
    })
  ]
});

// Attributify mode usage in HTML
// <div bg="blue-400 hover:blue-500" text="white sm"></div>

// Icons usage
// <div class="i-heroicons-heart-solid text-red-500"></div>

// Typography usage
// <article class="prose prose-lg mx-auto"></article>

Theme Types

Preset Theme Interfaces

/** Default theme interface from preset-uno */
interface Theme {
  colors?: Record<string, any>;
  fontFamily?: Record<string, string | string[]>;
  fontSize?: Record<string, [string, { lineHeight?: string; letterSpacing?: string }] | string>;
  fontWeight?: Record<string, string>;
  spacing?: Record<string, string>;
  screens?: Record<string, string>;
  breakpoints?: Record<string, string>;
  borderRadius?: Record<string, string>;
  boxShadow?: Record<string, string>;
  opacity?: Record<string, string>;
  zIndex?: Record<string, string>;
  duration?: Record<string, string>;
  easing?: Record<string, string>;
}

/** Mini preset theme */
interface PresetMiniTheme extends Theme {
  container?: {
    center?: boolean;
    padding?: string | Record<string, string>;
    screens?: Record<string, string>;
  };
}

/** Uno preset theme */
interface PresetUnoTheme extends PresetMiniTheme {
  aria?: Record<string, string>;
  data?: Record<string, string>;
  animation?: Record<string, string>;
  keyframes?: Record<string, Record<string, any>>;
}

/** Wind preset theme variations */
interface PresetWindTheme extends PresetUnoTheme {}
interface PresetWind3Theme extends PresetUnoTheme {}
interface PresetWind4Theme extends PresetUnoTheme {}

/** Typography theme extension */
interface TypographyTheme {
  typography?: Record<string, any>;
}

Preset Import Patterns

Individual Preset Imports

// Import individual presets from main package
import { presetUno } from "unocss";
import { presetAttributify } from "unocss";
import { presetIcons } from "unocss";

// Or import from specific preset subpaths
import presetUno from "unocss/preset-uno";
import presetAttributify from "unocss/preset-attributify";
import presetIcons from "unocss/preset-icons";
import presetMini from "unocss/preset-mini";
import presetTypography from "unocss/preset-typography";
import presetWind from "unocss/preset-wind";
import presetWind3 from "unocss/preset-wind3";
import presetWind4 from "unocss/preset-wind4";
import presetWebFonts from "unocss/preset-web-fonts";
import presetTagify from "unocss/preset-tagify";

Common Preset Combinations

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

// Full-featured setup
export default defineConfig({
  presets: [
    presetUno(), // Base utilities
    presetAttributify(), // Attributify mode
    presetIcons({ // Icon utilities
      collections: {
        heroicons: () => import('@iconify-json/heroicons/icons.json').then(i => i.default)
      }
    })
  ]
});

// Minimal setup
export default defineConfig({
  presets: [
    presetMini() // Essential utilities only
  ]
});

// Tailwind-compatible setup
export default defineConfig({
  presets: [
    presetWind3() // Tailwind v3 compatibility
  ]
});

Install with Tessl CLI