Package Exports

style-to-object

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (style-to-object) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

style-to-object

Parses inline style to object:

var parser = require('style-to-object');
parser('color: #C0FFEE; background: #BADA55;');
// { color: "#C0FFEE", background: "#BADA55" }

JSFiddle | repl.it

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>
  var parser = window.StyleToObject;
</script>

Usage

Import the module:

// CommonJS
const parser = require('style-to-object');

// ES Modules
import parser from 'style-to-object';

Parse single declaration:

parse(`
  color: #f00
`);
// { color: '#f00' }

Parse multiple declarations:

parse(`
  color: #f00;
  z-index: 42;
`);
// { color: '#f00', 'z-index': '42' }

Parse unknown declarations:

parse(`
  foo: bar;
`);
// { foo: 'bar' }

Invalid declarations:

parse(1); // null
parse('top:'); // null
parse(`
  top: ;
  right: 1em;
`); // { right: '1em' }
parse('top'); // throws Error

Iterator

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

parser('color: #f00', function() {}); // null

But the function will iterate through each declaration:

parser('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: #f00;
  background: #ba4;
`;
const output = [];
const iterator = (name, value) => {
  output.push([name, value]);
};
parser(style, iterator);
console.log(output); // [['color', '#f00'], ['background', '#ba4']]

Testing

$ npm test
$ npm run lint

Release

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

Special Thanks

License

MIT