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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
parse
✓ import parse from 'style-to-object';
✗ import { parse } from 'style-to-object';
The primary parsing function is the default export for ES Modules.
parse
✓ const parse = require('style-to-object').default;
✗ const parse = require('style-to-object');
For CommonJS, the default export is accessible via the `.default` property since v1.0.0.
StyleObject
✓ import type { StyleObject } from 'style-to-object';
✗ import { StyleObject } from 'style-to-object';
This is a TypeScript type interface for the parsed style object. Use `import type` for type-only imports.
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.
import parse from 'style-to-object';
import type { StyleObject } from 'style-to-object';
/**
* Parses a CSS style string into a JavaScript object.
* Handles potential parsing errors and demonstrates iterator usage.
*/
function processStyleString(styleString: string): StyleObject | null {
try {
// Basic usage: parse a string to an object
const parsedStyle = parse(styleString);
console.log(`Parsed style for "${styleString}":`, parsedStyle);
return parsedStyle;
} catch (error: any) {
console.error(`Error parsing style "${styleString}":`, error.message);
return null;
}
}
// Example 1: Basic conversion
processStyleString('color: #C0FFEE; background: #BADA55;');
// Expected output: { color: '#C0FFEE', background: '#BADA55' }
// Example 2: Using the iterator for custom processing
const customOutput: [string, string][] = [];
const iteratorResult = parse('font-size: 16px; margin: 10px;', (name, value) => {
customOutput.push([name, value]);
});
console.log('Custom iterated output:', customOutput);
console.log('Result when using iterator (always null):', iteratorResult);
// Expected output: [['font-size', '16px'], ['margin', '10px']], null
// Example 3: Handling invalid input that returns null
processStyleString('top:');
// Example 4: Handling malformed input that throws an error
processStyleString('top');
Debug
Known issues
breakingFor 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`.fixUpdate CommonJS imports to `const parse = require('style-to-object').default;`. affects: >=1.0.0
gotchaProviding 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.fixEnsure input strings are syntactically valid CSS declarations or wrap calls to `parse` in a `try...catch` block to handle potential errors.
affects: >=1.0.0
gotchaWhen `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.fixCollect 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.
affects: >=1.0.0
gotchaEarly 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.fixUpgrade `style-to-object` to version `1.0.11` or higher to benefit from improved ESM type support and fixes.
affects: <=1.0.4, <=1.0.10
Errors
Common errors & fixes
Error: Cannot parse input: 'top'
The input string provided to `parse` is a malformed CSS declaration, specifically an incomplete property without a corresponding value and semicolon.
fixProvide a complete and valid CSS style declaration, for example, change `'top'` to `'top: 0;'`, or implement `try...catch` error handling around calls to `parse`.
TypeError: (0 , style_to_object_1.default) is not a function
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.
fixUpdate the CommonJS import statement to `const parse = require('style-to-object').default;` to correctly access the default export. Property 'parse' does not exist on type 'typeof import("/path/to/node_modules/style-to-object/index")'.
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.
fixCorrect the import statement to `import parse from 'style-to-object';` for the default export.
Audit
Dependencies
inline-style-parserrequiredCore dependency for parsing CSS inline style strings into an abstract syntax tree.