{"id":12092,"library":"style-to-object","title":"Style to Object Parser","description":"style-to-object is a focused JavaScript library designed to parse CSS inline style strings into a plain JavaScript object. The current stable version is 1.0.14, and the package maintains a consistent, frequent release cadence primarily for minor dependency updates and occasional bug fixes within the 1.x series. Its core functionality offers a straightforward API for converting CSS style declarations (e.g., `color: #C0FFEE; background: #BADA55;`) into a corresponding JavaScript object where property names are converted from hyphen-case to camelCase or retained as hyphen-case depending on usage. A key differentiator is its optional iterator function, which allows for custom processing of each parsed declaration, rather than just returning a final object. The library ships with TypeScript types, enhancing developer experience for type-safe applications, and builds its parsing logic on the `inline-style-parser` package.","status":"active","version":"1.0.14","language":"javascript","source_language":"en","source_url":"https://github.com/remarkablemark/style-to-object","tags":["javascript","style-to-object","inline","style","parser","css","object","pojo","typescript"],"install":[{"cmd":"npm install style-to-object","lang":"bash","label":"npm"},{"cmd":"yarn add style-to-object","lang":"bash","label":"yarn"},{"cmd":"pnpm add style-to-object","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for parsing CSS inline style strings into an abstract syntax tree.","package":"inline-style-parser","optional":false}],"imports":[{"note":"The primary parsing function is the default export for ES Modules.","wrong":"import { parse } from 'style-to-object';","symbol":"parse","correct":"import parse from 'style-to-object';"},{"note":"For CommonJS, the default export is accessible via the `.default` property since v1.0.0.","wrong":"const parse = require('style-to-object');","symbol":"parse","correct":"const parse = require('style-to-object').default;"},{"note":"This is a TypeScript type interface for the parsed style object. Use `import type` for type-only imports.","wrong":"import { StyleObject } from 'style-to-object';","symbol":"StyleObject","correct":"import type { StyleObject } from 'style-to-object';"}],"quickstart":{"code":"import parse from 'style-to-object';\nimport type { StyleObject } from 'style-to-object';\n\n/**\n * Parses a CSS style string into a JavaScript object.\n * Handles potential parsing errors and demonstrates iterator usage.\n */\nfunction processStyleString(styleString: string): StyleObject | null {\n  try {\n    // Basic usage: parse a string to an object\n    const parsedStyle = parse(styleString);\n    console.log(`Parsed style for \"${styleString}\":`, parsedStyle);\n    return parsedStyle;\n  } catch (error: any) {\n    console.error(`Error parsing style \"${styleString}\":`, error.message);\n    return null;\n  }\n}\n\n// Example 1: Basic conversion\nprocessStyleString('color: #C0FFEE; background: #BADA55;');\n// Expected output: { color: '#C0FFEE', background: '#BADA55' }\n\n// Example 2: Using the iterator for custom processing\nconst customOutput: [string, string][] = [];\nconst iteratorResult = parse('font-size: 16px; margin: 10px;', (name, value) => {\n  customOutput.push([name, value]);\n});\nconsole.log('Custom iterated output:', customOutput);\nconsole.log('Result when using iterator (always null):', iteratorResult);\n// Expected output: [['font-size', '16px'], ['margin', '10px']], null\n\n// Example 3: Handling invalid input that returns null\nprocessStyleString('top:');\n\n// Example 4: Handling malformed input that throws an error\nprocessStyleString('top');\n","lang":"typescript","description":"This quickstart demonstrates how to parse CSS inline style strings into JavaScript objects, including basic usage, custom processing with the iterator, and error handling for invalid or malformed input. It shows both the object return and the null return when an iterator is used."},"warnings":[{"fix":"Update CommonJS imports to `const parse = require('style-to-object').default;`.","message":"For CommonJS users, the default export now requires accessing the `.default` property (e.g., `require('style-to-object').default`) since version 1.0.0. Direct `require('style-to-object')` will result in a `TypeError`.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure input strings are syntactically valid CSS declarations or wrap calls to `parse` in a `try...catch` block to handle potential errors.","message":"Providing malformed CSS strings, such as incomplete declarations like `'top'` or unclosed comments like `'/*'`, will cause the `parse` function to throw a synchronous `Error`. It does not gracefully return `null` for these specific malformations.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Collect any desired processed data from within the scope of the iterator function, as the `parse` function itself will not return a value when an iterator is provided.","message":"When `parse` is called with a second argument as an iterator function, it will always return `null`, regardless of the input string's validity or the processing done within the callback. The output must be collected directly by the iterator function.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade `style-to-object` to version `1.0.11` or higher to benefit from improved ESM type support and fixes.","message":"Early versions of the 1.x series (specifically <=1.0.4 and <=1.0.10) experienced issues with correctly exporting ESM types, which could lead to TypeScript compilation errors depending on the module resolution settings. These issues were subsequently addressed.","severity":"gotcha","affected_versions":"<=1.0.4, <=1.0.10"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Provide a complete and valid CSS style declaration, for example, change `'top'` to `'top: 0;'`, or implement `try...catch` error handling around calls to `parse`.","cause":"The input string provided to `parse` is a malformed CSS declaration, specifically an incomplete property without a corresponding value and semicolon.","error":"Error: Cannot parse input: 'top'"},{"fix":"Update the CommonJS import statement to `const parse = require('style-to-object').default;` to correctly access the default export.","cause":"In a CommonJS environment, `require('style-to-object')` is being used directly to invoke the parser, but the default export is located under the `.default` property.","error":"TypeError: (0 , style_to_object_1.default) is not a function"},{"fix":"Correct the import statement to `import parse from 'style-to-object';` for the default export.","cause":"This TypeScript error occurs when attempting to use a named import for `parse` (e.g., `import { parse } from 'style-to-object';`) when `parse` is actually the default export.","error":"Property 'parse' does not exist on type 'typeof import(\"/path/to/node_modules/style-to-object/index\")'."}],"ecosystem":"npm"}