inline-style-parser

What is inline-style-parser?

The inline-style-parser npm package is designed to parse inline CSS styles into a JavaScript object. This can be particularly useful for applications that need to manipulate or analyze styles dynamically, such as in web development tools, CSS-in-JS libraries, or any application that needs to convert CSS style strings into a more manageable format.

What are inline-style-parser's main functionalities?

Parsing inline styles

This feature allows you to convert a string of inline CSS styles into a JavaScript object. Each style property becomes a key in the object, and the corresponding style value is the value for that key. This is useful for manipulating styles in JavaScript.

const parse = require('inline-style-parser');
const styleString = 'color: red; font-size: 14px;';
const styleObject = parse(styleString);
console.log(styleObject);

Other packages similar to inline-style-parser

css-to-object

Similar to inline-style-parser, css-to-object also converts CSS style strings into JavaScript objects. However, it might offer different parsing options or handle edge cases differently, providing users with alternative approaches depending on their specific needs.

style-to-object

This package serves a similar purpose by converting CSS style strings into objects. The difference may lie in the API, performance, or the way it handles certain CSS properties, giving users a choice based on their preference or project requirements.

README

inline-style-parser

Inline style parser copied from css/lib/parse/index.js:

InlineStyleParser(string)

Example:

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

parse('color: #BADA55;');

Output:

[ { type: 'declaration',
    property: 'color',
    value: '#BADA55',
    position: Position { start: [Object], end: [Object], source: undefined } } ]

JSFiddle | Replit | Examples

Installation

NPM:

npm install inline-style-parser --save

Yarn:

yarn add inline-style-parser

CDN:

<script src="https://unpkg.com/inline-style-parser@latest/dist/inline-style-parser.min.js"></script>
<script>
  window.InlineStyleParser(/* string */);
</script>

Usage

Import with ES Modules:

import parse from 'inline-style-parser';

Or require with CommonJS:

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

Parse single declaration:

parse('left: 0');

Output:

[
  {
    type: 'declaration',
    property: 'left',
    value: '0',
    position: {
      start: { line: 1, column: 1 },
      end: { line: 1, column: 8 },
      source: undefined
    }
  }
]

Parse multiple declarations:

parse('left: 0; right: 100px;');

Output:

[
  {
    type: 'declaration',
    property: 'left',
    value: '0',
    position: {
      start: { line: 1, column: 1 },
      end: { line: 1, column: 8 },
      source: undefined
    }
  },
  {
    type: 'declaration',
    property: 'right',
    value: '100px',
    position: {
      start: { line: 1, column: 10 },
      end: { line: 1, column: 22 },
      source: undefined
    }
  }
]

Parse declaration with missing value:

parse('top:');

Output:

[
  {
    type: 'declaration',
    property: 'top',
    value: '',
    position: {
      start: { line: 1, column: 1 },
      end: { line: 1, column: 5 },
      source: undefined
    }
  }
]

Parse unknown declaration:

parse('answer: 42;');

Output:

[
  {
    type: 'declaration',
    property: 'answer',
    value: '42',
    position: {
      start: { line: 1, column: 1 },
      end: { line: 1, column: 11 },
      source: undefined
    }
  }
]

Invalid declarations:

parse('');      // []
parse();        // throws TypeError
parse(1);       // throws TypeError
parse('width'); // throws Error
parse('/*');    // throws Error

Testing

Run tests:

npm test

Run tests in watch mode:

npm run test:watch

Run tests with coverage:

npm run test:coverage

Run tests in CI mode:

npm run test:ci

Lint files:

npm run lint

Fix lint errors:

npm run lint:fix

Release

Release and publish are automated by Release Please.

License

MIT. See the license from the original project.

Changelog

0.2.4 (2024-08-29)

Continuous Integration

• github: publish package to npm registry with provenance (0b0e756)