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

HTML Extraction

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

Parses HTML attributes to extract UnoCSS utility classes from attributify syntax, converting attribute-based utilities into standard UnoCSS selectors.

Capabilities

Extractor Function

Creates an extractor that parses HTML attributes for UnoCSS utilities.

/**
 * Creates an extractor that parses HTML attributes for UnoCSS utilities
 * @param options - Configuration options for extraction behavior
 * @returns UnoCSS Extractor object
 */
function extractorAttributify(options?: AttributifyOptions): Extractor;

interface Extractor {
  name: '@unocss/preset-attributify/extractor';
  extract(context: ExtractorContext): string[];
}

interface ExtractorContext {
  code: string;
}

Usage Examples:

import { extractorAttributify } from '@unocss/preset-attributify'

// Create extractor with default options
const extractor = extractorAttributify()

// Create extractor with custom options
const customExtractor = extractorAttributify({
  ignoreAttributes: ['placeholder', 'data-testid'],
  prefixedOnly: true,
  prefix: 'ui-'
})

// Extract utilities from HTML
const utilities = extractor.extract({ code: htmlString })

Default Ignored Attributes

List of attributes that are ignored by default during extraction.

/**
 * Default list of attributes to ignore during extraction
 * These attributes typically contain non-utility values
 */
const defaultIgnoreAttributes: string[] = [
  'placeholder',
  'fill', 
  'opacity',
  'stroke-opacity'
];

Extraction Patterns

The extractor processes different types of attribute patterns:

Non-valued Attributes:

<!-- Generates: [mt-2=""] -->
<div mt-2></div>

<!-- With trueToNonValued: true, also generates: [mt-2="true"] -->
<div mt-2="true"></div>

Valued Attributes:

<!-- Generates: [bg~="blue-500"], [bg~="hover:red-500"] -->
<div bg="blue-500 hover:red-500"></div>

<!-- Generates: [text~="sm"], [text~="white"] -->
<div text="sm white"></div>

Class Attributes (Special Case):

<!-- Processes as regular classes, not attributify -->
<div class="text-red-500 bg-blue-500"></div>
<div className="text-red-500 bg-blue-500"></div>

Prefixed Attributes:

<!-- With prefix="un-" and prefixedOnly=true -->
<div un-bg="blue-500" un-text="white"></div>

Extraction Logic

The extractor follows this processing logic:

Parse HTML Elements: Uses regex to find HTML elements and their attributes
Extract Attributes: Parses attribute name-value pairs from elements
Filter Ignored: Skips attributes in the ignoreAttributes list
Handle Prefixes: Strips framework prefixes (v-bind:, :) from attribute names
Process Values:
- Non-valued attributes: Generate [name=""] selectors
- Class attributes: Process as regular utility classes
- Other attributes: Split values and generate [name~="value"] selectors
Apply Options: Respect prefixedOnly, prefix, and other configuration

Extraction Examples

Input HTML:

<button
  bg="blue-500 hover:blue-600"
  text="white sm"
  p="x-4 y-2"
  border="rounded"
  disabled
>
  Click me
</button>

Extracted Selectors:

[
  '[bg~="blue-500"]',
  '[bg~="hover:blue-600"]', 
  '[text~="white"]',
  '[text~="sm"]',
  '[p~="x-4"]',
  '[p~="y-2"]',
  '[border~="rounded"]',
  '[disabled=""]'
]

Internal Regex Patterns

The extractor uses these internal regex patterns for parsing HTML:

/**
 * Matches HTML elements with their attributes
 * Used to identify elements that may contain attributify utilities
 */
const elementRE: RegExp;

/**
 * Matches attribute name-value pairs within HTML elements
 * Captures both the attribute name and its value
 */
const valuedAttributeRE: RegExp;

/**
 * Splits attribute values on whitespace and quote boundaries
 * Used to separate multiple utilities within a single attribute
 */
const splitterRE: RegExp;

Framework Integration

The extractor handles framework-specific attribute prefixes:

const strippedPrefixes: string[] = [
  'v-bind:', // Vue.js v-bind prefix
  ':'        // Vue.js shorthand prefix
];

Vue.js Examples:

<!-- These are equivalent -->
<div v-bind:bg="color"></div>
<div :bg="color"></div>
<div bg="blue-500"></div>

Error Handling

The extractor gracefully handles:

Malformed HTML attributes
Empty attribute values
Nested HTML in attribute values
Special characters in attribute names
Invalid utility names (filtered by isValidSelector)

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