Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remarkablemark/inline-style-parser
📝 Inline style parser.
https://github.com/remarkablemark/inline-style-parser
css inline-style inline-style-parser javascript nodejs npm parse parser style
Last synced: 3 days ago
JSON representation
📝 Inline style parser.
- Host: GitHub
- URL: https://github.com/remarkablemark/inline-style-parser
- Owner: remarkablemark
- License: mit
- Created: 2019-06-19T23:31:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-24T06:06:06.000Z (11 days ago)
- Last Synced: 2025-01-25T16:06:37.058Z (10 days ago)
- Topics: css, inline-style, inline-style-parser, javascript, nodejs, npm, parse, parser, style
- Language: JavaScript
- Homepage: https://npmjs.com/package/inline-style-parser
- Size: 998 KB
- Stars: 19
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# inline-style-parser
[](https://nodei.co/npm/inline-style-parser/)
[](https://www.npmjs.com/package/inline-style-parser)
[](https://bundlephobia.com/package/inline-style-parser)
[](https://github.com/remarkablemark/inline-style-parser/actions/workflows/build.yml)
[](https://codecov.io/gh/remarkablemark/inline-style-parser)
[](https://www.npmjs.com/package/inline-style-parser)
Inline style parser copied from [`css/lib/parse/index.js`](https://github.com/reworkcss/css/blob/v2.2.4/lib/parse/index.js):
```
InlineStyleParser(string)
```
Example:
```js
const parse = require('inline-style-parser');
parse('color: #BADA55;');
```
Output:
```js
[ { type: 'declaration',
property: 'color',
value: '#BADA55',
position: Position { start: [Object], end: [Object], source: undefined } } ]
```
[JSFiddle](https://jsfiddle.net/remarkablemark/hcxbpwq8/) | [Replit](https://replit.com/@remarkablemark/inline-style-parser) | [Examples](https://github.com/remarkablemark/inline-style-parser/tree/master/examples)
## Installation
[NPM](https://www.npmjs.com/package/inline-style-parser):
```sh
npm install inline-style-parser --save
```
[Yarn](https://yarnpkg.com/package/inline-style-parser):
```sh
yarn add inline-style-parser
```
[CDN](https://unpkg.com/inline-style-parser/):
```html
window.InlineStyleParser(/* string */);
```
## Usage
Import with ES Modules:
```js
import parse from 'inline-style-parser';
```
Or require with CommonJS:
```js
const parse = require('inline-style-parser');
```
Parse single declaration:
```js
parse('left: 0');
```
Output:
```js
[
{
type: 'declaration',
property: 'left',
value: '0',
position: {
start: { line: 1, column: 1 },
end: { line: 1, column: 8 },
source: undefined
}
}
]
```
Parse multiple declarations:
```js
parse('left: 0; right: 100px;');
```
Output:
```js
[
{
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:
```js
parse('top:');
```
Output:
```js
[
{
type: 'declaration',
property: 'top',
value: '',
position: {
start: { line: 1, column: 1 },
end: { line: 1, column: 5 },
source: undefined
}
}
]
```
Parse unknown declaration:
```js
parse('answer: 42;');
```
Output:
```js
[
{
type: 'declaration',
property: 'answer',
value: '42',
position: {
start: { line: 1, column: 1 },
end: { line: 1, column: 11 },
source: undefined
}
}
]
```
Invalid declarations:
```js
parse(''); // []
parse(); // throws TypeError
parse(1); // throws TypeError
parse('width'); // throws Error
parse('/*'); // throws Error
```
## Testing
Run tests:
```sh
npm test
```
Run tests in watch mode:
```sh
npm run test:watch
```
Run tests with coverage:
```sh
npm run test:coverage
```
Run tests in CI mode:
```sh
npm run test:ci
```
Lint files:
```sh
npm run lint
```
Fix lint errors:
```sh
npm run lint:fix
```
## Release
Release and publish are automated by [Release Please](https://github.com/googleapis/release-please).
## License
[MIT](https://github.com/remarkablemark/inline-style-parser/blob/master/LICENSE). See the [license](https://github.com/reworkcss/css/blob/v2.2.4/LICENSE) from the original project.