# @emmetio/css-abbreviation

> Parses Emmet CSS abbreviation into AST tree

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

## Install

```sh
npm install @emmetio/css-abbreviation
pnpm add @emmetio/css-abbreviation
yarn add @emmetio/css-abbreviation
bun add @emmetio/css-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.1.8 |
| Published | 2023-05-10 |
| First published | 2017-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 87.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4540 |
| Author | Sergey Chikuyonok |
| Maintainers | emmetio-user, serge.che |

## Links

- npm: https://www.npmjs.com/package/@emmetio/css-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/css-abbreviation

## Dependencies (1)

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

## Recent versions

- 2.1.8 (latest) — 2023-05-10
- 2.1.7 — 2023-05-02
- 2.1.6 — 2023-03-31
- 2.1.5 — 2023-03-31
- 2.1.4 — 2021-03-21
- 2.1.3 — 2021-03-21
- 2.1.2 — 2020-08-02
- 2.1.1 — 2020-06-06
- 2.1.0 — 2020-05-27
- 2.0.1 — 2020-05-09
- 2.0.0 — 2020-04-14
- 2.0.0-rc.8 — 2020-04-11
- 2.0.0-rc.7 — 2020-04-11
- 2.0.0-rc.6 — 2020-03-05
- 2.0.0-rc.5 — 2019-11-28
- … 13 more at https://npm.io/package/@emmetio/css-abbreviation/versions

## README

# Emmet stylesheet abbreviation parser

Parses given Emmet *stylesheet* 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.

Unlike in [markup abbreviations](/packages/abbreviation), elements in stylesheet abbreviations cannot be nested and contain attributes, but allow embedded values in element names.

## Usage

You can install it via npm:

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

Then add it into your project:

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

const props = parse('p10+poa');
/* [{
    name: 'p',
    value: [{ type: 'CSSValue', value: [...] }],
    important: false
}, {
    name: 'poa',
    value: [],
    important: false
}] */
```
The returned result is an array of `CSSProperty` items: a node with name and values.

## Abbreviation syntax

Emmet stylesheet abbreviation element may start with name and followed by values, optionally chained with `-` delimiter. In most cases, actual CSS properties doesn’t have numbers in their names (or at least they are not used in abbreviation shortcuts) so a number right after alpha characters is considered as *embedded value*, as well as colors starting with `#` character: `p10`, `bg#fc0` etc. If implicit name/value boundary can’t be identified, you should use `-` as value separator: `m-a`, `p10-20` etc.

### Operators

Since CSS properties can’t be nested, the only available operator is `+`.

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