Registry / serialization / inline-style-parser

inline-style-parser

library0.2.7jsnpmunverified

inline-style-parser is a utility library designed to parse a CSS inline style string into an Abstract Syntax Tree (AST) representing its declarations. It functions as a direct copy of the parsing logic originally found in `css/lib/parse/index.js` from the `reworkcss/css` project, providing a lightweight, dedicated parser for single-line style attributes. The current stable version is `0.2.7`, with recent minor updates (e.g., v0.2.6, v0.2.7) focusing on documentation, build improvements, and type declaration fixes, indicating an active, though not rapid, release cadence. Key differentiators include its minimalistic approach, direct lineage from a well-established CSS parsing project, and provision of TypeScript type definitions, making it suitable for environments requiring structured access to inline style properties without the overhead of a full CSS parser.

serialization

npm install inline-style-parser

github ↗package ↗

INSTALL

IMPORT

SIG · INLINE-STYLE-PARSE

inline-style-parser

serializationjavascriptv0.2.7

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.

parse

✓ import parse from 'inline-style-parser';

✗ const parse = require('inline-style-parser');

The library primarily exports a default `parse` function. Both ES Modules and CommonJS are supported, but prefer ESM where possible.

Declaration

✓ import type { Declaration } from 'inline-style-parser';

✗ import { Declaration } from 'inline-style-parser';

Declaration is a TypeScript type representing a parsed CSS declaration object. It should be imported using `import type` for type-only imports.

Comment

✓ import type { Comment } from 'inline-style-parser';

Comment is a TypeScript type for representing parsed CSS comments. Like Declaration, it's a type-only import.

Parses a complex inline style string and logs the resulting AST, demonstrating access to properties and values.

import parse from 'inline-style-parser'; const styleString = 'color: #BADA55; font-size: 16px; margin: 0 auto; /* important comment */'; try { const ast = parse(styleString); console.log('Parsed AST:'); console.log(JSON.stringify(ast, null, 2)); // Example of accessing parsed data ast.forEach(node => { if (node.type === 'declaration') { console.log(`Property: ${node.property}, Value: ${node.value}`); } }); // Demonstrate an invalid input that throws an error // parse('width'); } catch (error) { console.error('Error parsing style:', error.message); }

Debug

Known issues

gotchaCalling the `parse` function with no arguments (`parse()`) or a non-string argument (e.g., `parse(1)`) will result in a `TypeError` as it expects a string input.

fix

Always ensure the input to `parse()` is a string, even if it's an empty string. Handle potential `null` or `undefined` inputs upstream.

affects: >=0.1.0

gotchaProviding malformed CSS syntax, such as an unclosed comment (`parse('/*')`) or a declaration missing a colon (`parse('width')`), will throw a generic `Error`.

fix

Validate or sanitize input strings before parsing if they might contain incomplete or invalid CSS syntax. Wrap parse calls in a `try-catch` block to gracefully handle parsing errors.

affects: >=0.1.0

gotchaWhile the library ships with TypeScript types, incorrect import paths or commonJS-style imports for types (e.g., `import { Declaration } from 'inline-style-parser';` instead of `import type { Declaration } ...`) might lead to build errors or unexpected behavior in strict TypeScript environments, particularly before v0.2.6 which fixed ESM/CJS type issues.

fix

Always use `import type` for importing type declarations (`Declaration`, `Comment`). Ensure your `tsconfig.json` is configured correctly for module resolution and ES module interop.

affects: <0.2.6

breakingVersion `0.2.0` introduced TypeScript type declaration files (`index.d.ts`), which is a significant feature addition. While not strictly a runtime breaking change for JavaScript users, it can impact TypeScript projects if they had custom declarations or relied on older tooling behavior for type inference.

fix

Ensure your TypeScript environment correctly picks up the shipped types. Remove any custom `.d.ts` files for this package if they conflict with the official ones. Review `tsconfig.json` for `skipLibCheck` and `moduleResolution` settings.

affects: >=0.2.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'length')

The `parse` function was called without any arguments or with an `undefined` value.

fix

Ensure `parse` is always called with a string argument: `parse('');` or `parse('color: red;');`

TypeError: Cannot create property 'start' on string '1'

The `parse` function was called with a non-string value (e.g., a number `1`).

fix

The input to `parse` must be a string. Convert non-string values to strings or handle them before passing them to the parser: `parse(String(value));`

Error: property missing ':'

The input string contains a CSS property without a colon separating it from a value (e.g., `parse('width')`).

fix

Ensure all CSS declarations in the input string are well-formed with a property, a colon, and a value: `parse('width: 100px;');`

Error: Unclosed comment

The input string contains an unclosed CSS comment (e.g., `parse('/*')`).

fix

Verify that all multi-line CSS comments are correctly terminated: `parse('/* This is a comment */');`

Upgrade

Version history

0.2.7latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/remarkablemark/inline-style-parser ↗

packagehttps://www.npmjs.com/package/inline-style-parser ↗