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

    1.1.0 • Public • Published

    style-to-js

    NPM

    NPM version Build Status Coverage Status

    Parses CSS inline style to JavaScript object (camelCased):

    StyleToJS(string)
    

    Example

    import parse from 'style-to-js';
     
    parse('background-color: #BADA55;');

    Output:

    { "backgroundColor": "#BADA55" }

    Repl.it | JSFiddle

    Install

    NPM:

    $ npm install style-to-js --save

    Yarn:

    $ yarn add style-to-js

    CDN:

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

    Usage

    Import

    Import or require module:

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

    Parse style

    Parse single declaration:

    parse('line-height: 42');

    Output:

    { "lineHeight": "42" }

    Notice that the CSS property is camelCased.

    Parse multiple declarations:

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

    Output:

    {
      "borderColor": "#ACE",
      "zIndex": "1337"
    }

    Vendor prefix

    Parse vendor prefix:

    parse(`
      -webkit-transition: all 4s ease;
      -moz-transition: all 4s ease;
      -ms-transition: all 4s ease;
      -o-transition: all 4s ease;
      -khtml-transition: all 4s ease;
    `);

    Output:

    {
      "webkitTransition": "all 4s ease",
      "mozTransition": "all 4s ease",
      "msTransition": "all 4s ease",
      "oTransition": "all 4s ease",
      "khtmlTransition": "all 4s ease"
    }

    Custom property

    Parse custom property:

    parse('--custom-property: #f00');

    Output:

    { "--custom-property": "#f00" }

    Unknown declaration

    This library does not validate declarations, so unknown declarations can be parsed:

    parse('the-answer: 42;');

    Output:

    { "theAnswer": "42" }

    Invalid declaration

    Declarations with missing value are removed:

    parse(`
      margin-top: ;
      margin-right: 1em;
    `);

    Output:

    { "marginRight": "1em" }

    Other invalid declarations or arguments:

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

    The following values will throw an error:

    parse('top'); // Uncaught Error: property missing ':'
    parse('/*'); // Uncaught Error: End of comment missing

    Options

    reactCompat

    When option reactCompat is true, the vendor prefix will be capitalized:

    parse(
      `
        -webkit-transition: all 4s ease;
        -moz-transition: all 4s ease;
        -ms-transition: all 4s ease;
        -o-transition: all 4s ease;
        -khtml-transition: all 4s ease;
      `,
      { reactCompat: true }
    );

    Output:

    {
      "WebkitTransition": "all 4s ease",
      "MozTransition": "all 4s ease",
      "MsTransition": "all 4s ease",
      "OTransition": "all 4s ease",
      "KhtmlTransition": "all 4s ease"
    }

    This helps resolve the React warning:

    Warning: Unsupported vendor-prefixed style property %s. Did you mean %s?%s", "oTransition", "OTransition"
    

    Testing

    Run tests with coverage:

    $ npm test

    Run tests in watch mode:

    $ npm run test:watch

    Lint files:

    $ npm run lint

    Fix lint errors:

    $ npm run lint:fix

    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-js

    DownloadsWeekly Downloads

    478,810

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    50 kB

    Total Files

    12

    Last publish

    Collaborators

    • remarkablemark