or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

abbreviation-extraction.md configuration.md core-expansion.md index.md markup-processing.md stylesheet-processing.md

tile.json

Stylesheet Processing

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

Capabilities

Stylesheet Parsing and Expansion

Core functionality for parsing CSS abbreviations into property structures and converting to final stylesheet output.

/**
 * Parses and expands stylesheet abbreviation with specified configuration
 * @param abbr - String abbreviation or pre-parsed CSSAbbreviation object
 * @param config - Complete configuration object with stylesheet-specific settings
 * @returns Expanded stylesheet string in target format
 */
function stylesheet(abbr: string | CSSAbbreviation, config: Config): string;

/**
 * Parses stylesheet abbreviation into property structures with snippet resolution
 * @param abbr - String abbreviation or pre-parsed CSSAbbreviation object  
 * @param config - Configuration for parsing behavior
 * @returns Processed CSS abbreviation array
 */
function parseStylesheet(abbr: string | CSSAbbreviation, config: Config): CSSAbbreviation;

/**
 * Converts CSS abbreviation array to string according to provided configuration
 * @param abbr - CSS abbreviation array to stringify
 * @param config - Configuration for output formatting
 * @returns Final stylesheet string
 */
function stringifyStylesheet(abbr: CSSAbbreviation, config: Config): string;

/**
 * Converts raw snippets map to internal CSS snippet representation
 * @param snippets - Raw snippets mapping
 * @returns Array of processed CSS snippet objects
 */
function parseStylesheetSnippets(snippets: SnippetsMap): CSSSnippet[];

Core Data Structures

type CSSAbbreviation = CSSProperty[];

interface CSSProperty {
  /** CSS property name */
  name?: string;
  /** Property values */
  value: CSSValue[];
  /** Whether property is marked !important */
  important: boolean;
  /** Associated snippet information */
  snippet?: CSSSnippet;
}

interface CSSValue {
  type: 'CSSValue';
  /** Array of value components */
  value: Value[];
}

type Value = 
  | NumberValue 
  | StringValue 
  | ColorValue 
  | Literal 
  | FunctionCall 
  | Field 
  | CustomProperty;

interface NumberValue {
  type: 'NumberValue';
  /** Numeric value */
  value: number;
  /** CSS unit (px, em, %, etc.) */
  unit: string;
  /** Original text representation */
  rawValue: string;
}

interface ColorValue {
  type: 'ColorValue';
  /** RGBA color components */
  r: number;
  g: number;
  b: number;
  a: number;
  /** Original color text */
  raw: string;
}

interface StringValue {
  type: 'StringValue';
  /** String content */
  value: string;
  /** Quote style used */
  quote: 'single' | 'double';
}

interface FunctionCall {
  type: 'FunctionCall';
  /** Function name */
  name: string;
  /** Function arguments */
  arguments: CSSValue[];
}

interface CustomProperty {
  type: 'CustomProperty';
  /** Custom property name (without --) */
  name: string;
}

interface Literal {
  type: 'Literal';
  /** Literal text value */
  value: string;
}

enum CSSAbbreviationScope {
  /** Global scope - full CSS rules */
  Global = '@@global',
  /** Section scope - selectors and at-rules */
  Section = '@@section', 
  /** Property scope - property names only */
  Property = '@@property',
  /** Value scope - property values only */
  Value = '@@value'
}

Basic Usage Examples:

import { stylesheet, resolveConfig } from "emmet";

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

// Basic properties
stylesheet("m10", config);
// Result: margin: 10px;

stylesheet("p5+m10", config);
// Result: padding: 5px; margin: 10px;

// Properties with values
stylesheet("bd1-s#f", config);
// Result: border: 1px solid #fff;

stylesheet("bg#f.5", config);
// Result: background: rgba(255, 255, 255, 0.5);

Syntax-Specific Output

Emmet supports multiple stylesheet syntaxes with format-specific conventions.

CSS Output

import { stylesheet, resolveConfig } from "emmet";

const cssConfig = resolveConfig({
  type: "stylesheet",
  syntax: "css",
  options: {
    "stylesheet.between": ": ",
    "stylesheet.after": ";",
    "stylesheet.intUnit": "px",
    "stylesheet.floatUnit": "em"
  }
});

stylesheet("w100+h50", cssConfig);
// Result: width: 100px; height: 50px;

stylesheet("lh1.5", cssConfig);
// Result: line-height: 1.5em;

SCSS Output

import { stylesheet, resolveConfig } from "emmet";

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

stylesheet("$primary-color+m10", scssConfig);
// Result: $primary-color; margin: 10px;

Sass Output (Indented)

import { stylesheet, resolveConfig } from "emmet";

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

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

Stylus Output

import { stylesheet, resolveConfig } from "emmet";

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

stylesheet("m10+p5", stylusConfig);
// Result: margin 10px\npadding 5px

Property Abbreviation Patterns

Shorthand Properties

import { stylesheet, resolveConfig } from "emmet";

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

// Margin/padding shortcuts
stylesheet("m10-5-0-15", config);
// Result: margin: 10px 5px 0 15px;

stylesheet("p10-auto", config);
// Result: padding: 10px auto;

// Border shortcuts
stylesheet("bd2-s#f", config);
// Result: border: 2px solid #fff;

stylesheet("bdt1-d#000", config);
// Result: border-top: 1px dotted #000;

Unit Handling

import { stylesheet, resolveConfig } from "emmet";

const config = resolveConfig({
  type: "stylesheet",
  syntax: "css",
  options: {
    "stylesheet.unitAliases": {
      "r": "rem",
      "e": "em"
    },
    "stylesheet.unitless": ["line-height", "z-index", "opacity"]
  }
});

// Unit aliases
stylesheet("m10r+p5e", config);
// Result: margin: 10rem; padding: 5em;

// Unitless properties
stylesheet("lh1.5+z100", config);
// Result: line-height: 1.5; z-index: 100;

// Auto unit assignment
stylesheet("w50+h100", config);
// Result: width: 50px; height: 100px;

Color Handling

import { stylesheet, resolveConfig } from "emmet";

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

// Color shortcuts
stylesheet("c#f+bg#000", config);
// Result: color: #fff; background: #000;

// RGBA colors
stylesheet("bg#f.5", config);
// Result: background: rgba(255, 255, 255, 0.5);

// Named colors
stylesheet("c:red+bg:blue", config);
// Result: color: red; background: blue;

Advanced Stylesheet Features

Gradient Shortcuts

import { stylesheet, resolveConfig } from "emmet";

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

// Linear gradient shortcut
stylesheet("lg", config);
// Result: background-image: linear-gradient();

stylesheet("lg(to right, #f00, #00f)", config);
// Result: background-image: linear-gradient(to right, #f00, #00f);

Fuzzy Property Matching

import { stylesheet, resolveConfig } from "emmet";

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

// Fuzzy abbreviations
stylesheet("ov", config);
// Result: overflow: ;

stylesheet("trs", config);
// Result: transition: ;

stylesheet("bgc", config);
// Result: background-color: ;

Context-Aware Value Completion

import { stylesheet, resolveConfig } from "emmet";

// Value context - expanding within property values
const valueContext = resolveConfig({
  type: "stylesheet",
  syntax: "css",
  context: { name: CSSAbbreviationScope.Value }
});

stylesheet("c", valueContext);
// Result: color

CSS Snippet System

interface CSSSnippet {
  /** Snippet matching key */
  key: string;
  /** CSS property name */
  property?: string;
  /** Default values */
  value: CSSValue[];
  /** Snippet type */
  type: CSSSnippetType;
  /** Keyword aliases for values */
  keywords: { [key: string]: Literal | FunctionCall };
  /** Dependent snippets */
  dependencies: CSSSnippet[];
}

enum CSSSnippetType {
  /** Raw code snippet */
  Raw = 'raw',
  /** Property with values */
  Property = 'property'
}

Custom Snippets Example:

import { stylesheet, resolveConfig, parseStylesheetSnippets } from "emmet";

const customSnippets = {
  "mycolor": "#007acc",
  "shadow": "box-shadow: 0 2px 4px rgba(0,0,0,0.1);",
  "flex-center": "display: flex; justify-content: center; align-items: center;"
};

const config = resolveConfig({
  type: "stylesheet", 
  syntax: "css",
  snippets: customSnippets
});

stylesheet("mycolor", config);
// Result: #007acc

stylesheet("shadow", config);
// Result: box-shadow: 0 2px 4px rgba(0,0,0,0.1);

stylesheet("flex-center", config);
// Result: display: flex; justify-content: center; align-items: center;

Configuration Options

Key stylesheet-specific configuration options:

interface StylesheetOptions {
  /** String between property and value */
  "stylesheet.between": string;
  /** String after each property */
  "stylesheet.after": string;
  /** Default unit for integer values */
  "stylesheet.intUnit": string;
  /** Default unit for float values */
  "stylesheet.floatUnit": string;
  /** Unit aliases mapping */
  "stylesheet.unitAliases": { [alias: string]: string };
  /** Properties that shouldn't have units */
  "stylesheet.unitless": string[];
  /** Available CSS keywords */
  "stylesheet.keywords": string[];
  /** Minimum score for fuzzy matching */
  "stylesheet.fuzzySearchMinScore": number;
  /** Use short hex colors when possible */
  "stylesheet.shortHex": boolean;
  /** Strict matching mode */
  "stylesheet.strictMatch": boolean;
}

Advanced Configuration Example:

import { stylesheet, resolveConfig } from "emmet";

const config = resolveConfig({
  type: "stylesheet",
  syntax: "css",
  options: {
    "stylesheet.between": ": ",
    "stylesheet.after": ";",
    "stylesheet.intUnit": "rem",
    "stylesheet.floatUnit": "em",
    "stylesheet.unitAliases": {
      "r": "rem",
      "e": "em",
      "v": "vw"
    },
    "stylesheet.unitless": ["line-height", "z-index", "opacity", "flex"],
    "stylesheet.shortHex": true,
    "stylesheet.fuzzySearchMinScore": 0.4
  }
});

stylesheet("w100v+h50r+lh1.5+z10", config);
// Result: width: 100vw; height: 50rem; line-height: 1.5; z-index: 10;