# @emmetio/abbreviation

> Emmet standalone abbreviation parser

Latest version **2.3.3** (published 2023-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @emmetio/abbreviation
pnpm add @emmetio/abbreviation
yarn add @emmetio/abbreviation
bun add @emmetio/abbreviation
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.3.3 |
| Published | 2023-05-10 |
| First published | 2016-11-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 160 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4541 |
| Author | Sergey Chikuyonok |
| Maintainers | emmetio-user, serge.che |
| Keywords | emmet, abbreviation |

## Links

- npm: https://www.npmjs.com/package/@emmetio/abbreviation
- Repository: https://github.com/emmetio/emmet
- Homepage: https://github.com/emmetio/emmet#readme
- Issues: https://github.com/emmetio/emmet/issues
- npm.io page: https://npm.io/package/@emmetio/abbreviation

## Dependencies (1)

- [@emmetio/scanner](https://npm.io/package/@emmetio/scanner.md) ^1.0.4

## Recent versions

- 2.3.3 (latest) — 2023-05-10
- 2.3.2 — 2023-05-02
- 2.3.1 — 2023-03-31
- 2.3.0 — 2023-03-31
- 2.2.3 — 2022-02-11
- 2.2.2 — 2021-03-21
- 2.2.1 — 2021-02-12
- 2.2.0 — 2020-12-27
- 2.1.1 — 2020-11-13
- 2.1.0 — 2020-11-13
- 2.0.2 — 2020-05-17
- 2.0.1 — 2020-05-09
- 2.0.0 — 2020-04-14
- 2.0.0-rc.9 — 2020-04-11
- 2.0.0-rc.8 — 2020-04-01
- … 30 more at https://npm.io/package/@emmetio/abbreviation/versions

## README

# Emmet markup abbreviation parser

Parses given Emmet *markup* abbreviation into AST. Parsing is performed in two steps: first it tokenizes given abbreviation (useful for syntax highlighting in editors) and then tokens are analyzed and converted into AST nodes as plain, JSON-serializable objects.

Note that AST tree in most cases cannot be used directly for output: for example, AST node produced from `.foo.bar` element misses element name and contains two `class` attributes with `foo` and `bar` values (not a single `class` with `foo bar` value).

## Usage

You can install it via npm:

```bash
npm install @emmetio/abbreviation
```

Then add it into your project:

```js
import parse from '@emmetio/abbreviation';

const tree = parse('div#foo>span.bar*3');
/* {
    type: 'Abbreviation',
    children: [{
        type: 'AbbreviationNode',
        name: 'div',
        attributes: [...],
        children: [...]
    }]
} */

```
The returned tree contains `AbbreviationNode` items: a node with name, attributes and/or text content. E.g. an element that can be represented somehow. Repeated and grouped nodes like `a>(b+c)*3` are automatically converted and duplicated as distinct `AbbreviationNode` with distinct `.repeat` property which identifies node in repeating sequence.

## Abbreviation syntax

Emmet abbreviation element has the following basic parts:

```
name.class#id[attributes?, ...]{text value}*repeater/
```

* `name` — element name, like `div`, `span` etc. Stored as `node.name` property.
* `[attributes]` — list of attributes. Each attribute is stored as [`AbbreviationAttribute`](/src/types.ts) instance and can be accessed by `node.getAttribute(name)`. Each attribute can be written in different formats:
	* `attr` — attribute with empty value.
	* `attr=value` — attribute with value. The `value` may contain any character except space or `]`.
	* `attr="value"` or `attr='value'` — attribute with value in quotes. Quotes are automatically removed. Expression values like `attr={value}` are supported and can be identified by `valueType: "expression"` property.
	* `attr.` — boolean attribute, e.g. attribute without value, like `required` in `<input>`.
    * `!attr` – implicit attribute, will be outputted if its value is not empty. Used as a placeholder to preserve attribute order in output.
	* `./non/attr/value` — value for default attribute. In other words, anything that doesn’t match a attribute name characters. Can be a single- or double-quotted as well. Default attribute is stored with `null` as name and should be used later, for example, to resolve predefined attributes.
* `.class` — shorthand for `class` attribute. Note that an element can have multiple classes, like `.class1.class2.class3`.
* `#id` — shorthand for `id` attribute.
* `{text}` — node’s text content
* `*N` — element repeater, tells parser to create `N` copies of given node.
* `/` — optional self-closing operator. Marks element with `node.selfClosing = true`.

### Operators

Each element of abbreviation must be separated with any of these operators:

```
elem1+elem2>elem3
```

* `+` — sibling operator, adds next element as a next sibling of current element in tree.
* `>` — child operator, adds next element as a child of current element.
* `^` — climb-up operator, adds next element as a child of current element’s parent node. Multiple climb-up operators are allowed, each operator moves one level up by tree.

### Groups

A set of elements could be grouped using `()`, mostly for repeating and for easier elements nesting:

```
a>(b>c+d)*4+(e+f)
```

Groups can be optionally concatenated with `+` operator.

---
_Source: https://npm.io/package/@emmetio/abbreviation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._