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

Autocomplete Support

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

Provides intelligent autocomplete for attributify syntax in IDEs and editors, enabling developers to get suggestions for attribute names and values while writing HTML.

Capabilities

Autocomplete Extractor Function

Creates an autocomplete extractor that provides intelligent suggestions for attributify syntax.

/**
 * Creates an autocomplete extractor for IDE/editor support
 * @param options - Configuration options for autocomplete behavior
 * @returns UnoCSS AutoCompleteExtractor object
 */
function autocompleteExtractorAttributify(options?: AttributifyOptions): AutoCompleteExtractor;

interface AutoCompleteExtractor {
  name: 'attributify';
  extract(context: AutoCompleteContext): AutoCompleteResult | null;
}

interface AutoCompleteContext {
  content: string;
  cursor: number;
}

interface AutoCompleteResult {
  extracted: string;
  transformSuggestions?(suggestions: string[]): string[];
  resolveReplacement(suggestion: string): ReplacementResult;
}

interface ReplacementResult {
  start: number;
  end: number;  
  replacement: string;
}

Usage Examples:

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

// Create autocomplete extractor
const autoComplete = autocompleteExtractorAttributify({
  prefix: 'ui-',
  prefixedOnly: true
})

// Extract autocomplete information
const result = autoComplete.extract({
  content: '<div bg="blue-|">',  // | represents cursor position
  cursor: 15
})

Autocomplete Context Detection

The extractor analyzes cursor position to determine the autocomplete context:

Attribute Name Completion:

<!-- Cursor after "b" -->
<div b|></div>
<!-- Suggests: bg, border, etc. -->

Attribute Value Completion:

<!-- Cursor after "blue-" -->
<div bg="blue-|"></div>
<!-- Suggests: blue-100, blue-200, blue-500, etc. -->

Multi-Value Completion:

<!-- Cursor after space -->
<div bg="blue-500 |"></div>
<!-- Suggests additional background utilities -->

Completion Types

The autocomplete system handles different completion scenarios:

1. Attribute Name Suggestions:

// When cursor is on attribute name
interface AttributeNameCompletion extends AutoCompleteResult {
  extracted: string; // The partial attribute name (without prefix)
  resolveReplacement(suggestion: string): {
    start: number; // Start of attribute name (after prefix if any)
    end: number;   // End of attribute name
    replacement: string; // The suggested attribute name
  };
}

2. Attribute Value Suggestions:

// When cursor is within attribute value
interface AttributeValueCompletion extends AutoCompleteResult {
  extracted: string; // Full utility with variants (e.g., "hover:bg-blue")
  transformSuggestions(suggestions: string[]): string[]; // Filters relevant suggestions
  resolveReplacement(suggestion: string): {
    start: number; // Start of current value
    end: number;   // End of current value  
    replacement: string; // The suggested value (without attribute name)
  };
}

Prefix Handling

The autocomplete respects prefix configuration:

With Prefix:

<!-- options.prefix = "ui-", prefixedOnly = true -->
<div ui-bg="|"></div>  <!-- Completes ui-bg attribute values -->
<div bg="|"></div>     <!-- No completion (not prefixed) -->

Without Prefix Requirement:

<!-- options.prefixedOnly = false -->
<div bg="|"></div>     <!-- Completes bg attribute values -->
<div ui-bg="|"></div>  <!-- Also completes, strips ui- prefix -->

Value Parsing and Completion

The autocomplete parses attribute values to provide contextual suggestions:

Simple Values:

<div bg="blu|"></div>
<!-- Extracted: "bg-blu" -->
<!-- Suggestions: filtered to bg-blue-* utilities -->

With Variants:

<div bg="hover:blu|"></div>
<!-- Extracted: "hover:bg-blu" -->
<!-- Suggestions: filtered to hover:bg-blue-* utilities -->

Multiple Values:

<div text="sm white hover:|"></div>
<!-- Extracted: "hover:text-" -->
<!-- Suggestions: filtered to hover:text-* utilities -->

Special Cases

The autocomplete handles these special cases:

Class Attributes (Ignored):

<div class="|"></div>     <!-- No attributify completion -->
<div className="|"></div> <!-- No attributify completion -->  
<div :class="|"></div>    <!-- No attributify completion -->

Nested HTML in Attributes:

<div bg="<span>|</span>"></div>
<!-- Recursively processes nested content -->

Variant Completion:

<div bg="hov|"></div>
<!-- Extracted: "bg-hov" -->
<!-- May suggest: hover:bg-* utilities -->

Internal Regex Patterns

The autocomplete uses these internal regex patterns for parsing:

/**
 * Matches HTML elements for autocomplete context detection
 * Slightly different pattern from extractor for autocomplete needs
 */
const elementRE: RegExp;

/**
 * Matches attribute name-value pairs for completion suggestions
 * Optimized for interactive cursor-based matching
 */
const valuedAttributeRE: RegExp;

/**
 * Splits attribute values for multi-value completion
 * Handles different quote styles and separators
 */
const splitterRE: RegExp;

IDE Integration

The autocomplete integrates with popular development environments:

VS Code:

UnoCSS extension uses this autocomplete
Provides real-time suggestions
Shows utility previews

WebStorm/IntelliJ:

Through UnoCSS plugin
Type-aware completions
Context-sensitive suggestions

Other Editors:

Language Server Protocol (LSP) support
Generic completion through UnoCSS CLI

Performance Optimization

The autocomplete is optimized for performance:

Lazy Evaluation: Only processes content around cursor
Caching: Reuses parsed results when possible
Efficient Regex: Optimized patterns for fast matching
Context Awareness: Only suggests relevant utilities

Error Handling

The autocomplete gracefully handles:

Malformed HTML
Invalid cursor positions
Missing attribute values
Corrupted content
Network timeouts (for remote completions)

Configuration Examples

Basic Configuration:

autocompleteExtractorAttributify({
  prefix: 'tw-',
  prefixedOnly: true
})

Framework-Specific:

// Vue.js setup
autocompleteExtractorAttributify({
  prefix: 'v-',
  trueToNonValued: true
})

// React setup  
autocompleteExtractorAttributify({
  nonValuedAttribute: false  // JSX doesn't support non-valued attributes
})

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

tessl/npm-unocss--preset-attributify