# style-to-js
> Parses CSS inline style to JavaScript object (camelCased).
Latest version **2.0.2** (published 2026-07-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install style-to-js
pnpm add style-to-js
yarn add style-to-js
bun add style-to-js
```
## Health
**Score 75/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 2.0.2 |
| Published | 2026-07-07 |
| First published | 2020-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 50.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 16 |
| Author | Mark |
| Maintainers | remarkablemark |
| Keywords | css, javascript, object, pojo, style, style-to-js |
## Links
- npm: https://www.npmjs.com/package/style-to-js
- Repository: https://github.com/remarkablemark/style-to-js
- Homepage: https://github.com/remarkablemark/style-to-js#readme
- Issues: https://github.com/remarkablemark/style-to-js/issues
- npm.io page: https://npm.io/package/style-to-js
## Dependencies (1)
- [style-to-object](https://npm.io/package/style-to-object.md) 2.0.2
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 2.0.2 (latest) — 2026-07-07
- 2.0.1 — 2026-06-19
- 2.0.0 — 2026-05-20
- 1.1.21 — 2025-11-16
- 1.1.20 — 2025-11-16
- 1.1.19 — 2025-11-03
- 1.1.18 — 2025-10-10
- 1.1.17 — 2025-06-16
- 1.1.16 — 2024-10-06
- 1.1.15 — 2024-10-03
- 1.1.14 — 2024-09-09
- 1.1.13 — 2024-08-27
- 1.1.12 — 2024-03-27
- 1.1.11 — 2024-03-19
- 1.1.10 — 2023-12-01
- … 12 more at https://npm.io/package/style-to-js/versions
## README
# style-to-js
[](https://nodei.co/npm/style-to-js/)
[](https://www.npmjs.com/package/style-to-js)
[](https://bundlephobia.com/package/style-to-js)
[](https://github.com/remarkablemark/style-to-js/actions/workflows/build.yml)
[](https://codecov.io/gh/remarkablemark/style-to-js)
[](https://www.npmjs.com/package/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](https://jsfiddle.net/remarkablemark/04nob1y7/) | [Examples](https://github.com/remarkablemark/style-to-js/tree/master/examples)
## Install
[NPM](https://www.npmjs.com/package/style-to-js):
```sh
npm install style-to-js --save
```
[Yarn](https://yarnpkg.com/package/style-to-js):
```sh
yarn add style-to-js
```
[CDN](https://unpkg.com/style-to-js/):
```html
```
## Usage
### Import
Import with ES Modules:
```js
import parse from 'style-to-js';
```
Require with CommonJS:
```js
const parse = require('style-to-js');
```
### Parse style
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"
}
```
### Vendor prefix
Parse [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/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"
}
```
### Custom property
Parse [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*):
```js
parse('--custom-property: #f00');
```
Output:
```json
{ "--custom-property": "#f00" }
```
### Unknown declaration
This library does not validate declarations, so unknown declarations can be parsed:
```js
parse('the-answer: 42;');
```
Output:
```json
{ "theAnswer": "42" }
```
### Invalid declaration
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
```
### Options
#### reactCompat
When option `reactCompat` is true, the [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/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](https://github.com/googleapis/release-please).
## Special Thanks
- [style-to-object](https://github.com/remarkablemark/style-to-object)
## License
[MIT](https://github.com/remarkablemark/style-to-js/blob/master/LICENSE)
---
_Source: https://npm.io/package/style-to-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._