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

tessl/npm-emmet

Essential toolkit for web developers providing abbreviation expansion for HTML and CSS

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/emmet@2.4.x

To install, run

npx @tessl/cli install tessl/npm-emmet@2.4.0

index.mddocs/

Emmet

Emmet is a comprehensive web developer toolkit for boosting HTML & CSS code writing through abbreviations and dynamic snippets. It allows developers to write CSS selector-like expressions that expand into complete HTML structures or CSS properties with a single keystroke.

Package Information

  • Package Name: emmet
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install emmet

Core Imports

import expand from "emmet";
import { extract, markup, stylesheet, resolveConfig } from "emmet";

// Additional available imports for advanced usage
import { 
  markupAbbreviation,      // Direct parser access
  stylesheetAbbreviation,  // Direct CSS parser access
  parseMarkup,             // Markup AST parsing
  parseStylesheet,         // CSS AST parsing
  stringifyMarkup,         // Markup AST to string
  stringifyStylesheet,     // CSS AST to string
  parseStylesheetSnippets, // CSS snippet processing
  CSSAbbreviationScope     // CSS scope enum
} from "emmet";

// Type imports
import type { 
  MarkupAbbreviation, 
  StylesheetAbbreviation,
  Config,
  UserConfig,
  SyntaxType 
} from "emmet";

For CommonJS:

const expand = require("emmet");
const { extract, markup, stylesheet, resolveConfig } = require("emmet");

Basic Usage

import expand, { extract } from "emmet";

// Expand markup abbreviation
const html = expand("ul>li.item$*3>{Item $}");
// Result: <ul><li class="item1">Item 1</li><li class="item2">Item 2</li><li class="item3">Item 3</li></ul>

// Expand CSS abbreviation
const css = expand("m10p5", { type: "stylesheet" });
// Result: margin: 10px; padding: 5px;

// Extract abbreviation from text
const source = "Hello world ul.tabs>li";
const data = extract(source, 22);
console.log(data.abbreviation); // "ul.tabs>li"
const expanded = expand(data.abbreviation);

Architecture

Emmet is built around several key components:

  • Core Expansion: Main expand function that automatically detects markup vs stylesheet abbreviations
  • Parser System: Separate parsers for markup (@emmetio/abbreviation) and CSS (@emmetio/css-abbreviation) abbreviations
  • Configuration Engine: Comprehensive configuration system with 200+ options for customizing output
  • Extraction Engine: Intelligent abbreviation extraction from source code with prefix support
  • Output Formatters: Multiple output formats (HTML, HAML, Pug, JSX, CSS, SASS, etc.)
  • Snippet System: Configurable snippets for markup and stylesheet abbreviations

Capabilities

Core Expansion

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

function expand(abbr: string, config?: UserConfig): string;

Core Expansion

Abbreviation Extraction

Intelligent extraction of Emmet abbreviations from source code at specified positions, with support for prefix matching and auto-completion scenarios.

function extract(
  line: string, 
  pos?: number, 
  options?: Partial<ExtractOptions>
): ExtractedAbbreviation | undefined;

interface ExtractOptions {
  lookAhead: boolean;
  type: SyntaxType;
  prefix: string;
}

interface ExtractedAbbreviation {
  abbreviation: string;
  location: number;
  start: number;
  end: number;
}

Abbreviation Extraction

Markup Processing

Specialized processing for markup abbreviations (HTML, XML, HAML, Pug, JSX) with comprehensive attribute handling and nested element support.

function markup(abbr: string | Abbreviation, config: Config): string;

interface Abbreviation {
  type: 'Abbreviation';
  children: AbbreviationNode[];
}

interface AbbreviationNode {
  type: 'AbbreviationNode';
  name?: string;
  value?: Value[];
  repeat?: Repeater;
  attributes?: AbbreviationAttribute[];
  children: AbbreviationNode[];
  selfClosing?: boolean;
}

Markup Processing

Stylesheet Processing

Specialized processing for stylesheet abbreviations (CSS, SASS, SCSS, Stylus) with property expansion, value completion, and vendor prefix support.

function stylesheet(abbr: string | CSSAbbreviation, config: Config): string;

type CSSAbbreviation = CSSProperty[];

interface CSSProperty {
  name?: string;
  value: CSSValue[];
  important: boolean;
  snippet?: any;
}

interface CSSValue {
  type: 'CSSValue';
  value: Value[];
}

Stylesheet Processing

Low-Level Parser Access

Direct access to the underlying abbreviation parsers for advanced use cases requiring custom AST manipulation or processing.

function markupAbbreviation(abbr: string, options?: any): Abbreviation;
function stylesheetAbbreviation(abbr: string, options?: any): CSSAbbreviation;

These functions provide direct access to the parser functionality without the configuration resolution and output formatting layers. Use these when you need raw AST structures for custom processing.

Configuration Management

Comprehensive configuration system with syntax-specific options, output formatting, and behavior customization.

function resolveConfig(config?: UserConfig): Config;

interface Config {
  type: SyntaxType;
  syntax: string;
  options: Options;
  variables: SnippetsMap;
  snippets: SnippetsMap;
  context?: AbbreviationContext;
  text?: string | string[];
  maxRepeat?: number;
  cache?: Cache;
}

interface UserConfig {
  type?: SyntaxType;
  syntax?: string;
  options?: Partial<Options>;
  variables?: SnippetsMap;
  snippets?: SnippetsMap;
  context?: AbbreviationContext;
  text?: string | string[];
  maxRepeat?: number;
  cache?: Cache;
}

Configuration Management

Core Types

type SyntaxType = 'markup' | 'stylesheet';

// Type aliases for abbreviated imports
type MarkupAbbreviation = Abbreviation;
type StylesheetAbbreviation = CSSAbbreviation;

type StringCase = '' | 'lower' | 'upper';

type Value = string | Field;

type FieldOutput = (
  index: number, 
  placeholder: string, 
  offset: number, 
  line: number, 
  column: number
) => string;

type TextOutput = (
  text: string, 
  offset: number, 
  line: number, 
  column: number
) => string;

interface Field {
  type: 'Field';
  index: number;
  name: string;
}

interface AbbreviationAttribute {
  name?: string;
  value?: Value[];
  valueType: AttributeType;
  boolean?: boolean;
  implied?: boolean;
  multiple?: boolean;
}

type AttributeType = 'raw' | 'singleQuote' | 'doubleQuote' | 'expression';

interface AbbreviationContext {
  name: string;
  attributes?: { [name: string]: string | null };
}

interface SnippetsMap {
  [name: string]: string;
}

interface Cache {
  stylesheetSnippets?: CSSSnippet[];
  markupSnippets?: { [name: string]: Abbreviation | null };
}