{"id":13335,"library":"inline-style-parser","title":"Inline CSS Style Parser","description":"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.","status":"active","version":"0.2.7","language":"javascript","source_language":"en","source_url":"https://github.com/remarkablemark/inline-style-parser","tags":["javascript","inline-style-parser","inline-style","style","parser","css","typescript"],"install":[{"cmd":"npm install inline-style-parser","lang":"bash","label":"npm"},{"cmd":"yarn add inline-style-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add inline-style-parser","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily exports a default `parse` function. Both ES Modules and CommonJS are supported, but prefer ESM where possible.","wrong":"const parse = require('inline-style-parser');","symbol":"parse","correct":"import parse from 'inline-style-parser';"},{"note":"Declaration is a TypeScript type representing a parsed CSS declaration object. It should be imported using `import type` for type-only imports.","wrong":"import { Declaration } from 'inline-style-parser';","symbol":"Declaration","correct":"import type { Declaration } from 'inline-style-parser';"},{"note":"Comment is a TypeScript type for representing parsed CSS comments. Like Declaration, it's a type-only import.","symbol":"Comment","correct":"import type { Comment } from 'inline-style-parser';"}],"quickstart":{"code":"import parse from 'inline-style-parser';\n\nconst styleString = 'color: #BADA55; font-size: 16px; margin: 0 auto; /* important comment */';\n\ntry {\n  const ast = parse(styleString);\n  console.log('Parsed AST:');\n  console.log(JSON.stringify(ast, null, 2));\n\n  // Example of accessing parsed data\n  ast.forEach(node => {\n    if (node.type === 'declaration') {\n      console.log(`Property: ${node.property}, Value: ${node.value}`);\n    }\n  });\n\n  // Demonstrate an invalid input that throws an error\n  // parse('width');\n\n} catch (error) {\n  console.error('Error parsing style:', error.message);\n}","lang":"typescript","description":"Parses a complex inline style string and logs the resulting AST, demonstrating access to properties and values."},"warnings":[{"fix":"Always ensure the input to `parse()` is a string, even if it's an empty string. Handle potential `null` or `undefined` inputs upstream.","message":"Calling 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"Providing malformed CSS syntax, such as an unclosed comment (`parse('/*')`) or a declaration missing a colon (`parse('width')`), will throw a generic `Error`.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"While 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.","severity":"gotcha","affected_versions":"<0.2.6"},{"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.","message":"Version `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.","severity":"breaking","affected_versions":">=0.2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `parse` is always called with a string argument: `parse('');` or `parse('color: red;');`","cause":"The `parse` function was called without any arguments or with an `undefined` value.","error":"TypeError: Cannot read properties of undefined (reading 'length')"},{"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));`","cause":"The `parse` function was called with a non-string value (e.g., a number `1`).","error":"TypeError: Cannot create property 'start' on string '1'"},{"fix":"Ensure all CSS declarations in the input string are well-formed with a property, a colon, and a value: `parse('width: 100px;');`","cause":"The input string contains a CSS property without a colon separating it from a value (e.g., `parse('width')`).","error":"Error: property missing ':'"},{"fix":"Verify that all multi-line CSS comments are correctly terminated: `parse('/* This is a comment */');`","cause":"The input string contains an unclosed CSS comment (e.g., `parse('/*')`).","error":"Error: Unclosed comment"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}