{"id":12091,"library":"style-to-js","title":"CSS Style to JavaScript Object Parser","description":"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.","status":"active","version":"1.1.21","language":"javascript","source_language":"en","source_url":"https://github.com/remarkablemark/style-to-js","tags":["javascript","style-to-js","css","style","object","pojo","typescript"],"install":[{"cmd":"npm install style-to-js","lang":"bash","label":"npm"},{"cmd":"yarn add style-to-js","lang":"bash","label":"yarn"},{"cmd":"pnpm add style-to-js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library exports a default function named `StyleToJS`, which is commonly aliased as `parse` on import (e.g., `import parse from 'style-to-js';`).","wrong":"import { StyleToJS } from 'style-to-js';","symbol":"StyleToJS","correct":"import StyleToJS from 'style-to-js';"},{"note":"`parse` is a conventional alias for the default `StyleToJS` export when using ES Modules. Direct named import `{ parse }` will not work.","wrong":"import { parse } from 'style-to-js';","symbol":"parse","correct":"import parse from 'style-to-js';"},{"note":"For CommonJS, the default export is directly assigned to the variable. No `.default` is needed if you intend to use `StyleToJS`.","wrong":"const parse = require('style-to-js').default;","symbol":"StyleToJS (CommonJS)","correct":"const StyleToJS = require('style-to-js');"},{"note":"Import the `Options` type for TypeScript to define parameters for the `StyleToJS` function.","symbol":"Options (Type)","correct":"import type { Options } from 'style-to-js';"}],"quickstart":{"code":"import parse from 'style-to-js';\n// The library's default export is named 'StyleToJS', commonly aliased as 'parse'.\n\nconst cssStringBasic = 'background-color: #BADA55; padding: 10px; font-size: 16px;';\nconst jsObjectBasic = parse(cssStringBasic);\nconsole.log('Parsed Basic CSS (camelCased):', jsObjectBasic);\n// Expected: { \"backgroundColor\": \"#BADA55\", \"padding\": \"10px\", \"fontSize\": \"16px\" }\n\nconst cssStringVendorAndCustom = `\n  -webkit-transition: all 4s ease;\n  color: red;\n  --my-custom-prop: value;\n`;\nconst jsObjectReactCompat = parse(cssStringVendorAndCustom, { reactCompat: true });\nconsole.log('Parsed CSS with reactCompat option:', jsObjectReactCompat);\n// Expected: { \"WebkitTransition\": \"all 4s ease\", \"color\": \"red\", \"--my-custom-prop\": \"value\" }\n\n// Demonstrating handling of invalid declarations (missing values are removed)\nconst invalidCss = 'margin-top: ; display: block; top;';\nconst resultInvalid = parse(invalidCss);\nconsole.log('Parsed CSS with invalid declarations removed:', resultInvalid);\n// Expected: { \"display\": \"block\" }","lang":"typescript","description":"Demonstrates basic parsing, camelCasing, vendor prefix handling with `reactCompat`, and how invalid declarations are processed."},"warnings":[{"fix":"Ensure all CSS properties have valid values. The library does not perform strict CSS validation.","message":"Declarations with missing values (e.g., `margin-top: ;`) are silently removed from the resulting JavaScript object without an error or warning.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Validate input CSS strings for basic syntax correctness, especially ensuring colons are present for properties and comments are properly closed.","message":"Malformed CSS syntax, specifically missing colons in properties (e.g., `top`) or unclosed comments (e.g., `/*`), will throw a runtime `Error`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If integrating with React or similar frameworks that expect capitalized vendor prefixes, explicitly set `{ reactCompat: true }` in the options.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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: ;`).","cause":"The input CSS string contains a property name without a corresponding colon and value, e.g., `top` instead of `top: 0`.","error":"Uncaught Error: property missing ':'"},{"fix":"Ensure all CSS comments in the input string are properly terminated with `*/`.","cause":"An unclosed CSS comment (e.g., `/* my comment`) is present in the input string.","error":"Uncaught Error: End of comment missing"}],"ecosystem":"npm"}