style-to-object

style-to-object

Parse CSS inline style to JavaScript object:

import parse from 'style-to-object';

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

Output:

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

JSFiddle | Examples

Installation

NPM:

npm install style-to-object --save

Yarn:

yarn add style-to-object

CDN:

<script src="https://unpkg.com/style-to-object@latest/dist/style-to-object.min.js"></script>
<script>
  window.StyleToObject(/* string */);
</script>

Usage

Import with ES Modules:

import parse from 'style-to-object';

Require with CommonJS:

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

Parse single declaration:

parse('line-height: 42');

Output:

{ 'line-height': '42' }

Parse multiple declarations:

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

Output:

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

Parse unknown declarations:

parse('answer: 42;');

Output:

{ 'answer': '42' }

Invalid declarations/arguments:

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

Iterator

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

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

But the function will iterate through each declaration:

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:

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

v1

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

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

Release

Release and publish are automated by Release Please.

Special Thanks

• inline-style-parser
• Contributors

License

MIT

Similar packages

Other packages similar to style-to-object

css-to-object

Similar to style-to-object, css-to-object converts CSS strings into JavaScript objects. The main difference may lie in the API, performance, or additional features provided by the package.

parse-css

This package is designed to parse CSS strings and may offer more comprehensive parsing capabilities, including selectors and media queries, which goes beyond the inline style conversion provided by style-to-object.

style-parser

style-parser is another package that can parse inline style strings into objects. It might offer different parsing options or handle edge cases differently compared to style-to-object.