style-to-object

Parses inline style to object:

var parse = require('style-to-object');
parse('color: #C0FFEE; background: #BADA55;');

Output:

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

JSFiddle | Repl.it | 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 the module:

// CommonJS
const parse = require('style-to-object');
 
// ES Modules
import parse from 'style-to-object';

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', function() {}); // null

But the function will iterate through each declaration:

parse('color: #f00', function(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']]

Testing

Run tests:

$ npm test

Run tests in watch mode:

$ npm run test:watch

Run tests with coverage:

$ npm run test:coverage
 
# generate html report 
$ npm run test:coverage:report

Lint files:

$ npm run lint

Fix lint errors:

$ npm run lint:fix

Test TypeScript declaration file for style and correctness:

$ npm run lint:dts

Release

Only collaborators with credentials can release and publish:

$ npm run release
$ git push --follow-tags && npm publish

Special Thanks

• inline-style-parser
• Contributors

License

MIT