1. inline-style-parser
An inline style parser.
inline-style-parser
Package: inline-style-parser
Created by: remarkablemark
Last modified: Tue, 26 Mar 2024 01:57:35 GMT
Version: 0.2.3
License: MIT
Downloads: 24,604,772
Repository: https://github.com/remarkablemark/inline-style-parser

Install

npm install inline-style-parser
yarn add inline-style-parser

inline-style-parser

NPM

NPM version
Bundlephobia minified + gzip
build
codecov
NPM downloads

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.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code