style-to-object



Parse CSS inline style to JavaScript object:

``js
import parse from 'style-to-object';

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

Output:

`js
{ color: '#C0FFEE', background: '#BADA55' }
`

JSFiddle | Examples

Installation

NPM:

`sh
npm install style-to-object --save
`

Yarn:

`sh
yarn add style-to-object
`

CDN:

`html


`

Usage

Import with ES Modules:

`js
import parse from 'style-to-object';
`

Require with CommonJS:

`js
const parse = require('style-to-object').default;
`

Parse single declaration:

`js
parse('line-height: 42');
`

Output:

`js
{ 'line-height': '42' }
`

Parse multiple declarations:

`js
parse(
border-color: #ACE;
z-index: 1337;
);
`

Output:

`js
{ 'border-color': '#ACE', 'z-index': '1337' }
`

Parse unknown declarations:

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

Output:

`js
{ 'answer': '42' }
`

Invalid declarations/arguments:

`js
parse(
top: ;
right: 1em;
); // { right: '1em' }

parse(); // null
parse(null); // null
parse(1); // null
parse(true); // null
parse('top:'); // null
parse(':12px'); // null
parse(':'); // null
parse(';'); // null

parse('top'); // throws Error
parse('/*'); // throws Error
`

$3

If the 2nd argument is a function, then the parser will return null:

`js
parse('color: #f00', () => {}); // null
`

But the function will iterate through each declaration:

`js
parse('color: #f00', (name, value, declaration) => {
console.log(name); // 'color'
console.log(value); // '#f00'
console.log(declaration); // { type: 'declaration', property: 'color', value: '#f00' }
});
`

This makes it easy to customize the output:

`js
const style =
color: red;
background: blue;
;
const output = [];

function iterator(name, value) {
output.push([name, value]);
}

parse(style, iterator);
console.log(output); // [['color', 'red'], ['background', 'blue']]
`

Migration

$3

Migrated to TypeScript. Iterator excludes Comment. CommonJS requires the .default key:

`js
const parse = require('style-to-object').default;
``

Release

Release and publish are automated by Release Please.

Special Thanks

- inline-style-parser
- Contributors

License

MIT