or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

abbreviation-extraction.mdconfiguration.mdcore-expansion.mdindex.mdmarkup-processing.mdstylesheet-processing.md
tile.json

core-expansion.mddocs/

Core Expansion

Main abbreviation expansion functionality that automatically handles both markup and stylesheet abbreviations based on context and configuration.

Capabilities

Main Expand Function

The primary entry point for expanding any Emmet abbreviation. Automatically detects whether to use markup or stylesheet expansion based on configuration.

/**
 * Expands given abbreviation into final output
 * @param abbr - Abbreviation string to expand
 * @param config - Optional configuration for expansion behavior
 * @returns Expanded string output
 */
function expand(abbr: string, config?: UserConfig): string;

Usage Examples:

import expand from "emmet";

// Basic HTML expansion
expand("div>p*3"); 
// Result: <div><p></p><p></p><p></p></div>

// HTML with attributes and text
expand("ul.nav>li.item$*3>a{Link $}");
// Result: <ul class="nav"><li class="item1"><a href="">Link 1</a></li><li class="item2"><a href="">Link 2</a></li><li class="item3"><a href="">Link 3</a></li></ul>

// CSS expansion
expand("m10p5", { type: "stylesheet" });
// Result: margin: 10px; padding: 5px;

// CSS with specific syntax
expand("p10", { syntax: "css" });
// Result: padding: 10px;

expand("p10", { syntax: "stylus" });
// Result: padding 10px

// JSX expansion
expand("div.container>h1{Hello}", { 
  syntax: "jsx",
  options: { "jsx.enabled": true }
});
// Result: <div className="container"><h1>Hello</h1></div>

Markup Expansion

Specialized function for expanding markup abbreviations with full control over the parsing and output process.

/**
 * Expands markup abbreviation with specified configuration
 * @param abbr - String abbreviation or pre-parsed Abbreviation object
 * @param config - Complete configuration object
 * @returns Expanded markup string
 */
function markup(abbr: string | Abbreviation, config: Config): string;

Usage Examples:

import { markup, resolveConfig } from "emmet";

const config = resolveConfig({
  syntax: "html",
  options: {
    "output.indent": "  ",
    "output.selfClosingStyle": "xhtml"
  }
});

markup("input[type=email required]", config);
// Result: <input type="email" required="" />

// With custom formatting
const pureConfig = resolveConfig({
  syntax: "pug",
  options: {
    "output.indent": "  "
  }
});

markup("div.container>h1{Title}+p{Content}", pureConfig);
// Result: div.container\n  h1 Title\n  p Content

Stylesheet Expansion

Specialized function for expanding CSS abbreviations with property resolution and value completion.

/**
 * Expands stylesheet abbreviation with specified configuration
 * @param abbr - String abbreviation or pre-parsed CSSAbbreviation object
 * @param config - Complete configuration object
 * @returns Expanded stylesheet string
 */
function stylesheet(abbr: string | CSSAbbreviation, config: Config): string;

Usage Examples:

import { stylesheet, resolveConfig } from "emmet";

const config = resolveConfig({
  type: "stylesheet",
  syntax: "css",
  options: {
    "stylesheet.between": ": ",
    "stylesheet.after": ";"
  }
});

stylesheet("bd1-s#f.5", config);
// Result: border: 1px solid rgba(255, 255, 255, 0.5);

// SASS output
const sassConfig = resolveConfig({
  type: "stylesheet", 
  syntax: "sass",
  options: {
    "stylesheet.between": ": ",
    "stylesheet.after": ""
  }
});

stylesheet("m10+p20", sassConfig);
// Result: margin: 10px\npadding: 20px

Advanced Configuration

interface UserConfig {
  /** Type of abbreviation: 'markup' or 'stylesheet' */
  type?: SyntaxType;
  /** Target syntax (html, css, jsx, pug, etc.) */
  syntax?: string;
  /** Detailed output and behavior options */
  options?: Partial<Options>;
  /** Variable substitutions */
  variables?: SnippetsMap;
  /** Custom snippet definitions */
  snippets?: SnippetsMap;
  /** Context information for abbreviation resolution */
  context?: AbbreviationContext;
  /** Text content to wrap with abbreviation */
  text?: string | string[];
  /** Maximum repetition count for safety */
  maxRepeat?: number;
  /** Cache object for performance optimization */
  cache?: Cache;
}

type SyntaxType = "markup" | "stylesheet";

Advanced Usage Examples:

import expand from "emmet";

// Custom snippets
expand("mybutton", {
  snippets: {
    mybutton: "button.btn.btn-primary[type=button]{${1:Click me}}"
  }
});
// Result: <button class="btn btn-primary" type="button">Click me</button>

// Custom variables
expand("div.${prefix}-container", {
  variables: {
    prefix: "app"
  }
});
// Result: <div class="app-container"></div>

// Text wrapping
expand("ul>li*", {
  text: ["Apple", "Banana", "Cherry"]
});
// Result: <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>

// Context-aware CSS
expand("c", {
  type: "stylesheet",
  context: { name: "color" }
});
// Result: color: #000;