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 |
|
11 | Parses inline style to object:
|
12 |
|
13 | ```js
|
14 | var parse = require('style-to-object');
|
15 | parse('color: #C0FFEE; background: #BADA55;');
|
16 | ```
|
17 |
|
18 | Output:
|
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 |
|
51 | Import the module:
|
52 |
|
53 | ```js
|
54 | // CommonJS
|
55 | const parse = require('style-to-object');
|
56 |
|
57 | // ES Modules
|
58 | import parse from 'style-to-object';
|
59 | ```
|
60 |
|
61 | Parse single declaration:
|
62 |
|
63 | ```js
|
64 | parse('line-height: 42');
|
65 | ```
|
66 |
|
67 | Output:
|
68 |
|
69 | ```js
|
70 | { 'line-height': '42' }
|
71 | ```
|
72 |
|
73 | Parse multiple declarations:
|
74 |
|
75 | ```js
|
76 | parse(`
|
77 | border-color: #ACE;
|
78 | z-index: 1337;
|
79 | `);
|
80 | ```
|
81 |
|
82 | Output:
|
83 |
|
84 | ```js
|
85 | { 'border-color': '#ACE', 'z-index': '1337' }
|
86 | ```
|
87 |
|
88 | Parse unknown declarations:
|
89 |
|
90 | ```js
|
91 | parse('answer: 42;');
|
92 | ```
|
93 |
|
94 | Output:
|
95 |
|
96 | ```js
|
97 | { 'answer': '42' }
|
98 | ```
|
99 |
|
100 | Invalid declarations/arguments:
|
101 |
|
102 | ```js
|
103 | parse(`
|
104 | top: ;
|
105 | right: 1em;
|
106 | `); // { right: '1em' }
|
107 |
|
108 | parse(); // null
|
109 | parse(null); // null
|
110 | parse(1); // null
|
111 | parse(true); // null
|
112 | parse('top:'); // null
|
113 | parse(':12px'); // null
|
114 | parse(':'); // null
|
115 | parse(';'); // null
|
116 |
|
117 | parse('top'); // throws Error
|
118 | parse('/*'); // throws Error
|
119 | ```
|
120 |
|
121 | ### Iterator
|
122 |
|
123 | If the 2nd argument is a function, then the parser will return `null`:
|
124 |
|
125 | ```js
|
126 | parse('color: #f00', function() {}); // null
|
127 | ```
|
128 |
|
129 | But the function will iterate through each declaration:
|
130 |
|
131 | ```js
|
132 | parse('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 |
|
139 | This makes it easy to customize the output:
|
140 |
|
141 | ```js
|
142 | const style = `
|
143 | color: red;
|
144 | background: blue;
|
145 | `;
|
146 | const output = [];
|
147 |
|
148 | function iterator(name, value) {
|
149 | output.push([name, value]);
|
150 | }
|
151 |
|
152 | parse(style, iterator);
|
153 | console.log(output); // [['color', 'red'], ['background', 'blue']]
|
154 | ```
|
155 |
|
156 | ## Testing
|
157 |
|
158 | Run tests:
|
159 |
|
160 | ```sh
|
161 | $ npm test
|
162 | ```
|
163 |
|
164 | Run tests in watch mode:
|
165 |
|
166 | ```sh
|
167 | $ npm run test:watch
|
168 | ```
|
169 |
|
170 | Run tests with coverage:
|
171 |
|
172 | ```sh
|
173 | $ npm run test:coverage
|
174 |
|
175 | # generate html report
|
176 | $ npm run test:coverage:report
|
177 | ```
|
178 |
|
179 | Lint files:
|
180 |
|
181 | ```sh
|
182 | $ npm run lint
|
183 | ```
|
184 |
|
185 | Fix lint errors:
|
186 |
|
187 | ```sh
|
188 | $ npm run lint:fix
|
189 | ```
|
190 |
|
191 | Test TypeScript declaration file for style and correctness:
|
192 |
|
193 | ```sh
|
194 | $ npm run lint:dts
|
195 | ```
|
196 |
|
197 | ## Release
|
198 |
|
199 | Only 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)
|