or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

autocomplete-support.mdhtml-extraction.mdindex.mdpreset-configuration.mdtypescript-definitions.mdvariant-processing.md
tile.json

tessl/npm-unocss--preset-attributify

Attributify preset for UnoCSS that enables using utility classes as HTML attributes rather than class names.

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

To install, run

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

index.mddocs/

UnoCSS Preset Attributify

UnoCSS Preset Attributify enables attributify mode for UnoCSS, allowing developers to use utility classes as HTML attributes rather than class names. This provides an alternative, more semantic syntax for applying UnoCSS utilities with improved readability and maintainability in component-based frameworks.

Package Information

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

Core Imports

import { presetAttributify } from "@unocss/preset-attributify";

Default import:

import presetAttributify from "@unocss/preset-attributify";

For CommonJS:

const presetAttributify = require("@unocss/preset-attributify");

For TypeScript types:

import type { AttributifyOptions, AttributifyAttributes } from "@unocss/preset-attributify";

Basic Usage

import { defineConfig } from 'unocss'
import { presetAttributify } from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({
      // Options
      prefix: 'un-',
      prefixedOnly: false,
      strict: false,
      nonValuedAttribute: true
    })
  ]
})

HTML usage example:

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

Architecture

UnoCSS Preset Attributify is built around several key components:

  • Preset Function: Main presetAttributify function that configures the entire attributify system
  • Extraction Engine: Parses HTML attributes and converts them to UnoCSS utilities
  • Variant Processing: Handles pseudo-classes, responsive breakpoints, and other variants in attribute format
  • Autocomplete Support: Provides IDE/editor integration for attribute-based utilities
  • Type System: Full TypeScript support for attribute names and values

Capabilities

Preset Configuration

Core preset function that sets up attributify mode with comprehensive configuration options.

function presetAttributify(options: AttributifyOptions = {}): Preset;

interface AttributifyOptions {
  strict?: boolean;
  prefix?: string;
  prefixedOnly?: boolean;
  nonValuedAttribute?: boolean;
  ignoreAttributes?: string[];
  trueToNonValued?: boolean;
}

Preset Configuration

HTML Extraction

Parses HTML attributes to extract UnoCSS utility classes from attributify syntax.

function extractorAttributify(options?: AttributifyOptions): Extractor;

const defaultIgnoreAttributes: string[];

HTML Extraction

Variant Processing

Processes attributify selectors with variants like pseudo-classes and responsive breakpoints.

function variantAttributify(options?: AttributifyOptions): VariantObject;

const variantsRE: RegExp;

Variant Processing

Autocomplete Support

Provides intelligent autocomplete for attributify syntax in IDEs and editors.

function autocompleteExtractorAttributify(options?: AttributifyOptions): AutoCompleteExtractor;

Autocomplete Support

TypeScript Definitions

Type-safe attribute names and values for TypeScript and JSX usage.

type AttributifyNames<Prefix extends string = ''> = 
  | `${Prefix}${BasicAttributes}`
  | `${Prefix}${PseudoPrefix}:${BasicAttributes}`;

interface AttributifyAttributes extends Partial<Record<AttributifyNames, string | boolean>> {}

type BasicAttributes = SpecialSingleWord | TwoStringsComposition | SeparateEnabled;

TypeScript Definitions

Core Types

interface AttributifyOptions extends PresetOptions {
  /** Only generate CSS for attributify or class */
  strict?: boolean;
  /** Attribute prefix */
  prefix?: string;
  /** Only match for prefixed attributes */
  prefixedOnly?: boolean;
  /** Support matching non-valued attributes */
  nonValuedAttribute?: boolean;
  /** A list of attributes to be ignored from extracting */
  ignoreAttributes?: string[];
  /** Non-valued attributes will also match if the actual value represented in DOM is true */
  trueToNonValued?: boolean;
}