Package Exports

style-to-js
style-to-js/cjs/index.js

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

Parses CSS inline style to JavaScript object (camelCased):

StyleToJS(string)

Example

import parse from 'style-to-js';

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

Output:

{ "backgroundColor": "#BADA55" }

Replit | JSFiddle | Examples

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 with ES Modules:

import parse from 'style-to-js';

Require with CommonJS:

const parse = require('style-to-js');

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

Release and publish are automated by Release Please.

Special Thanks

style-to-object

License

MIT