Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remarkablemark/style-to-object
📝 Parse CSS inline style to JavaScript object.
https://github.com/remarkablemark/style-to-object
css inline-style inline-styles javascript npm object parser pojo style-to-object
Last synced: 7 days ago
JSON representation
📝 Parse CSS inline style to JavaScript object.
- Host: GitHub
- URL: https://github.com/remarkablemark/style-to-object
- Owner: remarkablemark
- License: mit
- Created: 2017-11-19T03:58:08.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T16:21:44.000Z (9 days ago)
- Last Synced: 2024-10-29T14:38:44.553Z (8 days ago)
- Topics: css, inline-style, inline-styles, javascript, npm, object, parser, pojo, style-to-object
- Language: TypeScript
- Homepage: https://b.remarkabl.org/style-to-object
- Size: 1.53 MB
- Stars: 53
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# style-to-object
[](https://nodei.co/npm/style-to-object/)
[](https://www.npmjs.com/package/style-to-object)
[](https://bundlephobia.com/package/style-to-object)
[](https://github.com/remarkablemark/style-to-object/actions/workflows/build.yml)
[](https://codecov.io/gh/remarkablemark/style-to-object)
[](https://www.npmjs.com/package/style-to-object)
Parse CSS inline style to JavaScript object:
```js
import parse from 'style-to-object';
parse('color: #C0FFEE; background: #BADA55;');
```
Output:
```js
{ color: '#C0FFEE', background: '#BADA55' }
```
[JSFiddle](https://jsfiddle.net/remarkablemark/ykz2meot/) | [Replit](https://replit.com/@remarkablemark/style-to-object) | [Examples](https://github.com/remarkablemark/style-to-object/tree/master/examples)
## Installation
[NPM](https://www.npmjs.com/package/style-to-object):
```sh
npm install style-to-object --save
```
[Yarn](https://yarn.fyi/style-to-object):
```sh
yarn add style-to-object
```
[CDN](https://unpkg.com/style-to-object/):
```html
window.StyleToObject(/* string */);
```
## Usage
Import with ES Modules:
```js
import parse from 'style-to-object';
```
Require with CommonJS:
```js
const parse = require('style-to-object').default;
```
Parse single declaration:
```js
parse('line-height: 42');
```
Output:
```js
{ 'line-height': '42' }
```
Parse multiple declarations:
```js
parse(`
border-color: #ACE;
z-index: 1337;
`);
```
Output:
```js
{ 'border-color': '#ACE', 'z-index': '1337' }
```
Parse unknown declarations:
```js
parse('answer: 42;');
```
Output:
```js
{ 'answer': '42' }
```
Invalid declarations/arguments:
```js
parse(`
top: ;
right: 1em;
`); // { right: '1em' }
parse(); // null
parse(null); // null
parse(1); // null
parse(true); // null
parse('top:'); // null
parse(':12px'); // null
parse(':'); // null
parse(';'); // null
parse('top'); // throws Error
parse('/*'); // throws Error
```
### Iterator
If the 2nd argument is a function, then the parser will return `null`:
```js
parse('color: #f00', () => {}); // null
```
But the function will iterate through each declaration:
```js
parse('color: #f00', (name, value, declaration) => {
console.log(name); // 'color'
console.log(value); // '#f00'
console.log(declaration); // { type: 'declaration', property: 'color', value: '#f00' }
});
```
This makes it easy to customize the output:
```js
const style = `
color: red;
background: blue;
`;
const output = [];
function iterator(name, value) {
output.push([name, value]);
}
parse(style, iterator);
console.log(output); // [['color', 'red'], ['background', 'blue']]
```
## Migration
### v1
Migrated to TypeScript. Iterator excludes `Comment`. CommonJS requires the `.default` key:
```js
const parse = require('style-to-object').default;
```
## Release
Release and publish are automated by [Release Please](https://github.com/googleapis/release-please).
## Special Thanks
- [inline-style-parser](https://github.com/remarkablemark/inline-style-parser)
- [Contributors](https://github.com/remarkablemark/style-to-object/graphs/contributors)
## License
[MIT](https://github.com/remarkablemark/style-to-object/blob/master/LICENSE)