CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-unocss--preset-attributify

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

—

Pending
Overview
Eval results
Files

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;
}

Install with Tessl CLI

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

docs

autocomplete-support.md

html-extraction.md

index.md

preset-configuration.md

typescript-definitions.md

variant-processing.md

tile.json