style-to-js

library1.1.21jsnpmunverified

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.

serialization

npm install style-to-js

github ↗package ↗

INSTALL

IMPORT

SIG · STYLE-TO-JS

style-to-js

serializationjavascriptv1.1.21

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

StyleToJS

✓ import StyleToJS from 'style-to-js';

✗ 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

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

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

✓ const StyleToJS = require('style-to-js');

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

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.

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" }

Debug

Known issues

gotchaDeclarations 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.

affects: >=1.0.0

gotchaMalformed 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.

affects: >=1.0.0

gotchaThe `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.

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught Error: property missing ':'

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

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 `*/`.

Upgrade

Version history

1.1.21latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/remarkablemark/style-to-js ↗

packagehttps://www.npmjs.com/package/style-to-js ↗