# inline-style-parser

> An inline style parser.

Latest version **0.2.9** (published 2026-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install inline-style-parser
pnpm add inline-style-parser
yarn add inline-style-parser
bun add inline-style-parser
```

## Health

**Score 75/100 (B)** — status: active.

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

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.9 |
| Published | 2026-07-06 |
| First published | 2019-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 61.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 26 |
| Maintainers | remarkablemark |
| Keywords | inline-style-parser, inline-style, style, parser, css |

## Links

- npm: https://www.npmjs.com/package/inline-style-parser
- Repository: https://github.com/remarkablemark/inline-style-parser
- Homepage: https://github.com/remarkablemark/inline-style-parser#readme
- Issues: https://github.com/remarkablemark/inline-style-parser/issues
- npm.io page: https://npm.io/package/inline-style-parser

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.2.9 (latest) — 2026-07-06
- 0.2.8 — 2026-07-03
- 0.2.7 — 2025-11-16
- 0.2.6 — 2025-10-03
- 0.2.5 — 2025-10-02
- 0.2.4 — 2024-08-29
- 0.2.3 — 2024-03-26
- 0.2.2 — 2023-10-15
- 0.2.1 — 2023-10-15
- 0.2.0 — 2023-10-15
- 0.1.2 — 2023-10-14
- 0.1.1 — 2019-06-20
- 0.1.0 — 2019-06-19

## README

# inline-style-parser

[![NPM](https://nodei.co/npm/inline-style-parser.png)](https://nodei.co/npm/inline-style-parser/)

[![NPM version](https://img.shields.io/npm/v/inline-style-parser)](https://www.npmjs.com/package/inline-style-parser)
[![NPM bundle size](https://img.shields.io/bundlephobia/minzip/inline-style-parser)](https://bundlephobia.com/package/inline-style-parser)
[![build](https://github.com/remarkablemark/inline-style-parser/actions/workflows/build.yml/badge.svg)](https://github.com/remarkablemark/inline-style-parser/actions/workflows/build.yml)
[![codecov](https://codecov.io/gh/remarkablemark/inline-style-parser/branch/master/graph/badge.svg?token=B8EEK5709W)](https://codecov.io/gh/remarkablemark/inline-style-parser)
[![NPM downloads](https://img.shields.io/npm/dm/inline-style-parser)](https://www.npmjs.com/package/inline-style-parser)

Inline style parser copied from [css/lib/parse/index.js](https://github.com/reworkcss/css/blob/v3.0.0/lib/parse/index.js):

```
InlineStyleParser(string)
```

Example:

```js
const parse = require('inline-style-parser');

parse('color: #BADA55;');
```

Output:

```js
[ { type: 'declaration',
    property: 'color',
    value: '#BADA55',
    position: Position { start: [Object], end: [Object], source: undefined } } ]
```

[JSFiddle](https://jsfiddle.net/remarkablemark/hcxbpwq8/) | [Examples](https://github.com/remarkablemark/inline-style-parser/tree/master/examples)

## Installation

[NPM](https://www.npmjs.com/package/inline-style-parser):

```sh
npm install inline-style-parser --save
```

[Yarn](https://yarnpkg.com/package/inline-style-parser):

```sh
yarn add inline-style-parser
```

[CDN](https://unpkg.com/inline-style-parser/):

```html
<script src="https://unpkg.com/inline-style-parser@latest/dist/inline-style-parser.min.js"></script>
<script>
  window.InlineStyleParser(/* string */);
</script>
```

## Usage

Import with ES Modules:

```js
import parse from 'inline-style-parser';
```

Or require with CommonJS:

```js
const parse = require('inline-style-parser');
```

Parse single declaration:

```js
parse('left: 0');
```

Output:

```js
[
  {
    type: 'declaration',
    property: 'left',
    value: '0',
    position: {
      start: { line: 1, column: 1 },
      end: { line: 1, column: 8 },
      source: undefined
    }
  }
]
```

Parse multiple declarations:

```js
parse('left: 0; right: 100px;');
```

Output:

```js
[
  {
    type: 'declaration',
    property: 'left',
    value: '0',
    position: {
      start: { line: 1, column: 1 },
      end: { line: 1, column: 8 },
      source: undefined
    }
  },
  {
    type: 'declaration',
    property: 'right',
    value: '100px',
    position: {
      start: { line: 1, column: 10 },
      end: { line: 1, column: 22 },
      source: undefined
    }
  }
]
```

Parse declaration with missing value:

```js
parse('top:');
```

Output:

```js
[
  {
    type: 'declaration',
    property: 'top',
    value: '',
    position: {
      start: { line: 1, column: 1 },
      end: { line: 1, column: 5 },
      source: undefined
    }
  }
]
```

Parse unknown declaration:

```js
parse('answer: 42;');
```

Output:

```js
[
  {
    type: 'declaration',
    property: 'answer',
    value: '42',
    position: {
      start: { line: 1, column: 1 },
      end: { line: 1, column: 11 },
      source: undefined
    }
  }
]
```

Invalid declarations:

```js
parse('');      // []
parse();        // throws TypeError
parse(1);       // throws TypeError
parse('width'); // throws Error
parse('/*');    // throws Error
```

## Testing

Run tests:

```sh
npm test
```

Run tests in watch mode:

```sh
npm run test:watch
```

Run tests with coverage:

```sh
npm run test:coverage
```

Run tests in CI mode:

```sh
npm run test:ci
```

Lint files:

```sh
npm run lint
```

Fix lint errors:

```sh
npm run lint:fix
```

## Release

Release and publish are automated by [Release Please](https://github.com/googleapis/release-please).

## License

[MIT](https://github.com/remarkablemark/inline-style-parser/blob/master/LICENSE). See the [license](https://github.com/reworkcss/css/blob/v3.0.0/LICENSE) from the original project.

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