CSS Style to JavaScript Object Parser

1.1.21 · active · verified Sun Apr 19

style-to-js is a lightweight JavaScript utility library designed to parse CSS inline style strings into a plain JavaScript object. It automatically converts kebab-cased CSS properties (e.g., `background-color`) into their camelCased JavaScript equivalents (e.g., `backgroundColor`), which is particularly useful for dynamically applying styles in environments like React or other component-based UI frameworks. The current stable version is `1.1.21`. The package maintains a relatively active release cadence, primarily focusing on dependency updates and minor bug fixes, with no recent major version changes. It differentiates itself by its straightforward API, handling of standard CSS properties, vendor prefixes (with an optional `reactCompat` flag for capitalized prefixes), and CSS custom properties. It's important to note that it performs minimal validation; it will process most input strings into camelCased properties, but silently removes declarations with missing values. Malformed syntax, such as properties missing colons or unclosed comments, will result in runtime errors.

Common errors

```
Uncaught Error: property missing ':'
```
cause The input CSS string contains a property name without a corresponding colon and value, e.g., `top` instead of `top: 0`.

fix Review the input CSS string for any property declarations that are incomplete. All properties must be followed by a colon and a value (even an empty one like `top: ;`).
```
Uncaught Error: End of comment missing
```
cause An unclosed CSS comment (e.g., `/* my comment`) is present in the input string.

fix Ensure all CSS comments in the input string are properly terminated with `*/`.

Warnings

gotcha Declarations with missing values (e.g., `margin-top: ;`) are silently removed from the resulting JavaScript object without an error or warning.
Fix: Ensure all CSS properties have valid values. The library does not perform strict CSS validation.
gotcha Malformed CSS syntax, specifically missing colons in properties (e.g., `top`) or unclosed comments (e.g., `/*`), will throw a runtime `Error`.
Fix: Validate input CSS strings for basic syntax correctness, especially ensuring colons are present for properties and comments are properly closed.
gotcha The `reactCompat` option (default `false`) changes how vendor prefixes are capitalized. When `true`, it capitalizes prefixes like `-webkit-` to `Webkit` (e.g., `WebkitTransition`), aligning with React's style object conventions.
Fix: If integrating with React or similar frameworks that expect capitalized vendor prefixes, explicitly set `{ reactCompat: true }` in the options.

Install

npm install style-to-js npm
yarn add style-to-js yarn
pnpm add style-to-js pnpm

Imports

StyleToJS
wrong:
```
import { StyleToJS } from 'style-to-js';
```
correct:
```
import StyleToJS from 'style-to-js';
```
The library exports a default function named `StyleToJS`, which is commonly aliased as `parse` on import (e.g., `import parse from 'style-to-js';`).
parse
wrong:
```
import { parse } from 'style-to-js';
```
correct:
```
import parse from 'style-to-js';
```
`parse` is a conventional alias for the default `StyleToJS` export when using ES Modules. Direct named import `{ parse }` will not work.
StyleToJS (CommonJS)
wrong:
```
const parse = require('style-to-js').default;
```
correct:
```
const StyleToJS = require('style-to-js');
```
For CommonJS, the default export is directly assigned to the variable. No `.default` is needed if you intend to use `StyleToJS`.
Options (Type)
```
import type { Options } from 'style-to-js';
```
Import the `Options` type for TypeScript to define parameters for the `StyleToJS` function.

Quickstart

Demonstrates basic parsing, camelCasing, vendor prefix handling with `reactCompat`, and how invalid declarations are processed.

import parse from 'style-to-js';
// The library's default export is named 'StyleToJS', commonly aliased as 'parse'.

const cssStringBasic = 'background-color: #BADA55; padding: 10px; font-size: 16px;';
const jsObjectBasic = parse(cssStringBasic);
console.log('Parsed Basic CSS (camelCased):', jsObjectBasic);
// Expected: { "backgroundColor": "#BADA55", "padding": "10px", "fontSize": "16px" }

const cssStringVendorAndCustom = `
  -webkit-transition: all 4s ease;
  color: red;
  --my-custom-prop: value;
`;
const jsObjectReactCompat = parse(cssStringVendorAndCustom, { reactCompat: true });
console.log('Parsed CSS with reactCompat option:', jsObjectReactCompat);
// Expected: { "WebkitTransition": "all 4s ease", "color": "red", "--my-custom-prop": "value" }

// Demonstrating handling of invalid declarations (missing values are removed)
const invalidCss = 'margin-top: ; display: block; top;';
const resultInvalid = parse(invalidCss);
console.log('Parsed CSS with invalid declarations removed:', resultInvalid);
// Expected: { "display": "block" }

view raw JSON →