UNPKG

4.04 kBMarkdownView Raw
1# style-to-object
2
3[![NPM](https://nodei.co/npm/style-to-object.png)](https://nodei.co/npm/style-to-object/)
4
5[![NPM version](https://img.shields.io/npm/v/style-to-object.svg)](https://www.npmjs.com/package/style-to-object)
6[![Build Status](https://travis-ci.org/remarkablemark/style-to-object.svg?branch=master)](https://travis-ci.org/remarkablemark/style-to-object)
7[![Coverage Status](https://coveralls.io/repos/github/remarkablemark/style-to-object/badge.svg?branch=master)](https://coveralls.io/github/remarkablemark/style-to-object?branch=master)
8[![Dependency status](https://david-dm.org/remarkablemark/style-to-object.svg)](https://david-dm.org/remarkablemark/style-to-object)
9[![NPM downloads](https://img.shields.io/npm/dm/style-to-object.svg?style=flat-square)](https://www.npmjs.com/package/style-to-object)
10
11Parses inline style to object:
12
13```js
14var parse = require('style-to-object');
15parse('color: #C0FFEE; background: #BADA55;');
16```
17
18Output:
19
20```js
21{ color: '#C0FFEE', background: '#BADA55' }
22```
23
24[JSFiddle](https://jsfiddle.net/remarkablemark/ykz2meot/) | [Repl.it](https://repl.it/@remarkablemark/style-to-object) | [Examples](https://github.com/remarkablemark/style-to-object/tree/master/examples)
25
26## Installation
27
28[NPM](https://www.npmjs.com/package/style-to-object):
29
30```sh
31$ npm install style-to-object --save
32```
33
34[Yarn](https://yarn.fyi/style-to-object):
35
36```sh
37$ yarn add style-to-object
38```
39
40[CDN](https://unpkg.com/style-to-object/):
41
42```html
43<script src="https://unpkg.com/style-to-object@latest/dist/style-to-object.min.js"></script>
44<script>
45 window.StyleToObject(/* string */);
46</script>
47```
48
49## Usage
50
51Import the module:
52
53```js
54// CommonJS
55const parse = require('style-to-object');
56
57// ES Modules
58import parse from 'style-to-object';
59```
60
61Parse single declaration:
62
63```js
64parse('line-height: 42');
65```
66
67Output:
68
69```js
70{ 'line-height': '42' }
71```
72
73Parse multiple declarations:
74
75```js
76parse(`
77 border-color: #ACE;
78 z-index: 1337;
79`);
80```
81
82Output:
83
84```js
85{ 'border-color': '#ACE', 'z-index': '1337' }
86```
87
88Parse unknown declarations:
89
90```js
91parse('answer: 42;');
92```
93
94Output:
95
96```js
97{ 'answer': '42' }
98```
99
100Invalid declarations/arguments:
101
102```js
103parse(`
104 top: ;
105 right: 1em;
106`); // { right: '1em' }
107
108parse(); // null
109parse(null); // null
110parse(1); // null
111parse(true); // null
112parse('top:'); // null
113parse(':12px'); // null
114parse(':'); // null
115parse(';'); // null
116
117parse('top'); // throws Error
118parse('/*'); // throws Error
119```
120
121### Iterator
122
123If the 2nd argument is a function, then the parser will return `null`:
124
125```js
126parse('color: #f00', function() {}); // null
127```
128
129But the function will iterate through each declaration:
130
131```js
132parse('color: #f00', function(name, value, declaration) {
133 console.log(name); // 'color'
134 console.log(value); // '#f00'
135 console.log(declaration); // { type: 'declaration', property: 'color', value: '#f00' }
136});
137```
138
139This makes it easy to customize the output:
140
141```js
142const style = `
143 color: red;
144 background: blue;
145`;
146const output = [];
147
148function iterator(name, value) {
149 output.push([name, value]);
150}
151
152parse(style, iterator);
153console.log(output); // [['color', 'red'], ['background', 'blue']]
154```
155
156## Testing
157
158Run tests:
159
160```sh
161$ npm test
162```
163
164Run tests in watch mode:
165
166```sh
167$ npm run test:watch
168```
169
170Run tests with coverage:
171
172```sh
173$ npm run test:coverage
174
175# generate html report
176$ npm run test:coverage:report
177```
178
179Lint files:
180
181```sh
182$ npm run lint
183```
184
185Fix lint errors:
186
187```sh
188$ npm run lint:fix
189```
190
191Test TypeScript declaration file for style and correctness:
192
193```sh
194$ npm run lint:dts
195```
196
197## Release
198
199Only collaborators with credentials can release and publish:
200
201```sh
202$ npm run release
203$ git push --follow-tags && npm publish
204```
205
206## Special Thanks
207
208- [inline-style-parser](https://github.com/remarkablemark/inline-style-parser)
209- [Contributors](https://github.com/remarkablemark/style-to-object/graphs/contributors)
210
211## License
212
213[MIT](https://github.com/remarkablemark/style-to-object/blob/master/LICENSE)