style-to-js



Parses CSS inline style to JavaScript object (camelCased):

``
StyleToJS(string)
`

Example

`js
import parse from 'style-to-js';

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

Output:

`json
{ "backgroundColor": "#BADA55" }
`

JSFiddle | Examples

Install

NPM:

`sh
npm install style-to-js --save
`

Yarn:

`sh
yarn add style-to-js
`

CDN:

`html


`

Usage

$3

Import with ES Modules:

`js
import parse from 'style-to-js';
`

Require with CommonJS:

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

$3

Parse single declaration:

`js
parse('line-height: 42');
`

Output:

`json
{ "lineHeight": "42" }
`

> [!NOTE]
> Notice that the CSS property is camelCased.

Parse multiple declarations:

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

Output:

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

$3

Parse vendor prefix:

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

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

$3

Parse custom property:

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

Output:

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

$3

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

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

Output:

`json
{ "theAnswer": "42" }
`

$3

Declarations with missing value are removed:

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

Output:

`json
{ "marginRight": "1em" }
`

Other invalid declarations or arguments:

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

The following values will throw an error:

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

$3

#### reactCompat

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

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

`json
{
"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:

`sh
npm test
`

Run tests in watch mode:

`sh
npm run test:watch
`

Lint files:

`sh
npm run lint
`

Fix lint errors:

`sh
npm run lint:fix
``

Release

Release and publish are automated by Release Please.

Special Thanks

- style-to-object

License

MIT