Nagging Penguin Matriarchs

    style-to-object
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    style-to-object

    NPM

    NPM version Build Status Coverage Status Dependency status NPM downloads

    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

    License

    MIT

    Install

    npm i style-to-object

    DownloadsWeekly Downloads

    4,325,040

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    30.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • remarkablemark