1 | # @ptkhanh94npm/occaecati-nesciunt-explicabo
|
2 |
|
3 | [![NPM](https://nodei.co/npm/@ptkhanh94npm/occaecati-nesciunt-explicabo.png)](https://nodei.co/npm/@ptkhanh94npm/occaecati-nesciunt-explicabo/)
|
4 |
|
5 | [![NPM version](https://badgen.net/npm/v/@ptkhanh94npm/occaecati-nesciunt-explicabo)](https://www.npmjs.com/package/@ptkhanh94npm/occaecati-nesciunt-explicabo)
|
6 | [![Bundlephobia minified + gzip](https://badgen.net/bundlephobia/minzip/@ptkhanh94npm/occaecati-nesciunt-explicabo)](https://bundlephobia.com/package/@ptkhanh94npm/occaecati-nesciunt-explicabo)
|
7 | [![build](https://github.com/ptkhanh94npm/occaecati-nesciunt-explicabo/actions/workflows/build.yml/badge.svg)](https://github.com/ptkhanh94npm/occaecati-nesciunt-explicabo/actions/workflows/build.yml)
|
8 | [![codecov](https://codecov.io/gh/remarkablemark/@ptkhanh94npm/occaecati-nesciunt-explicabo/branch/master/graph/badge.svg?token=JWKUKTFT3E)](https://codecov.io/gh/remarkablemark/@ptkhanh94npm/occaecati-nesciunt-explicabo)
|
9 | [![NPM downloads](https://badgen.net/npm/dm/@ptkhanh94npm/occaecati-nesciunt-explicabo)](https://www.npmjs.com/package/@ptkhanh94npm/occaecati-nesciunt-explicabo)
|
10 |
|
11 | Parses CSS inline style to JavaScript object (camelCased):
|
12 |
|
13 | ```
|
14 | StyleToJS(string)
|
15 | ```
|
16 |
|
17 | ## Example
|
18 |
|
19 | ```js
|
20 | import parse from '@ptkhanh94npm/occaecati-nesciunt-explicabo';
|
21 |
|
22 | parse('background-color: #BADA55;');
|
23 | ```
|
24 |
|
25 | Output:
|
26 |
|
27 | ```json
|
28 | { "backgroundColor": "#BADA55" }
|
29 | ```
|
30 |
|
31 | [Replit](https://replit.com/@remarkablemark/@ptkhanh94npm/occaecati-nesciunt-explicabo) | [JSFiddle](https://jsfiddle.net/remarkablemark/04nob1y7/) | [Examples](https://github.com/ptkhanh94npm/occaecati-nesciunt-explicabo/tree/master/examples)
|
32 |
|
33 | ## Install
|
34 |
|
35 | [NPM](https://www.npmjs.com/package/@ptkhanh94npm/occaecati-nesciunt-explicabo):
|
36 |
|
37 | ```sh
|
38 | npm install @ptkhanh94npm/occaecati-nesciunt-explicabo --save
|
39 | ```
|
40 |
|
41 | [Yarn](https://yarnpkg.com/package/@ptkhanh94npm/occaecati-nesciunt-explicabo):
|
42 |
|
43 | ```sh
|
44 | yarn add @ptkhanh94npm/occaecati-nesciunt-explicabo
|
45 | ```
|
46 |
|
47 | [CDN](https://unpkg.com/@ptkhanh94npm/occaecati-nesciunt-explicabo/):
|
48 |
|
49 | ```html
|
50 | <script src="https://unpkg.com/@ptkhanh94npm/occaecati-nesciunt-explicabo@latest/umd/@ptkhanh94npm/occaecati-nesciunt-explicabo.min.js"></script>
|
51 | <script>
|
52 | window.StyleToJS(/* string */);
|
53 | </script>
|
54 | ```
|
55 |
|
56 | ## Usage
|
57 |
|
58 | ### Import
|
59 |
|
60 | Import with ES Modules:
|
61 |
|
62 | ```js
|
63 | import parse from '@ptkhanh94npm/occaecati-nesciunt-explicabo';
|
64 | ```
|
65 |
|
66 | Require with CommonJS:
|
67 |
|
68 | ```js
|
69 | const parse = require('@ptkhanh94npm/occaecati-nesciunt-explicabo');
|
70 | ```
|
71 |
|
72 | ### Parse style
|
73 |
|
74 | Parse single declaration:
|
75 |
|
76 | ```js
|
77 | parse('line-height: 42');
|
78 | ```
|
79 |
|
80 | Output:
|
81 |
|
82 | ```json
|
83 | { "lineHeight": "42" }
|
84 | ```
|
85 |
|
86 | > Notice that the CSS property is camelCased.
|
87 |
|
88 | Parse multiple declarations:
|
89 |
|
90 | ```js
|
91 | parse(`
|
92 | border-color: #ACE;
|
93 | z-index: 1337;
|
94 | `);
|
95 | ```
|
96 |
|
97 | Output:
|
98 |
|
99 | ```json
|
100 | {
|
101 | "borderColor": "#ACE",
|
102 | "zIndex": "1337"
|
103 | }
|
104 | ```
|
105 |
|
106 | ### Vendor prefix
|
107 |
|
108 | Parse [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix):
|
109 |
|
110 | ```js
|
111 | parse(`
|
112 | -webkit-transition: all 4s ease;
|
113 | -moz-transition: all 4s ease;
|
114 | -ms-transition: all 4s ease;
|
115 | -o-transition: all 4s ease;
|
116 | -khtml-transition: all 4s ease;
|
117 | `);
|
118 | ```
|
119 |
|
120 | Output:
|
121 |
|
122 | ```json
|
123 | {
|
124 | "webkitTransition": "all 4s ease",
|
125 | "mozTransition": "all 4s ease",
|
126 | "msTransition": "all 4s ease",
|
127 | "oTransition": "all 4s ease",
|
128 | "khtmlTransition": "all 4s ease"
|
129 | }
|
130 | ```
|
131 |
|
132 | ### Custom property
|
133 |
|
134 | Parse [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*):
|
135 |
|
136 | ```js
|
137 | parse('--custom-property: #f00');
|
138 | ```
|
139 |
|
140 | Output:
|
141 |
|
142 | ```json
|
143 | { "--custom-property": "#f00" }
|
144 | ```
|
145 |
|
146 | ### Unknown declaration
|
147 |
|
148 | This library does not validate declarations, so unknown declarations can be parsed:
|
149 |
|
150 | ```js
|
151 | parse('the-answer: 42;');
|
152 | ```
|
153 |
|
154 | Output:
|
155 |
|
156 | ```json
|
157 | { "theAnswer": "42" }
|
158 | ```
|
159 |
|
160 | ### Invalid declaration
|
161 |
|
162 | Declarations with missing value are removed:
|
163 |
|
164 | ```js
|
165 | parse(`
|
166 | margin-top: ;
|
167 | margin-right: 1em;
|
168 | `);
|
169 | ```
|
170 |
|
171 | Output:
|
172 |
|
173 | ```json
|
174 | { "marginRight": "1em" }
|
175 | ```
|
176 |
|
177 | Other invalid declarations or arguments:
|
178 |
|
179 | ```js
|
180 | parse(); // {}
|
181 | parse(null); // {}
|
182 | parse(1); // {}
|
183 | parse(true); // {}
|
184 | parse('top:'); // {}
|
185 | parse(':12px'); // {}
|
186 | parse(':'); // {}
|
187 | parse(';'); // {}
|
188 | ```
|
189 |
|
190 | The following values will throw an error:
|
191 |
|
192 | ```js
|
193 | parse('top'); // Uncaught Error: property missing ':'
|
194 | parse('/*'); // Uncaught Error: End of comment missing
|
195 | ```
|
196 |
|
197 | ### Options
|
198 |
|
199 | #### reactCompat
|
200 |
|
201 | When option `reactCompat` is true, the [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) will be capitalized:
|
202 |
|
203 | ```js
|
204 | parse(
|
205 | `
|
206 | -webkit-transition: all 4s ease;
|
207 | -moz-transition: all 4s ease;
|
208 | -ms-transition: all 4s ease;
|
209 | -o-transition: all 4s ease;
|
210 | -khtml-transition: all 4s ease;
|
211 | `,
|
212 | { reactCompat: true },
|
213 | );
|
214 | ```
|
215 |
|
216 | Output:
|
217 |
|
218 | ```json
|
219 | {
|
220 | "WebkitTransition": "all 4s ease",
|
221 | "MozTransition": "all 4s ease",
|
222 | "msTransition": "all 4s ease",
|
223 | "OTransition": "all 4s ease",
|
224 | "KhtmlTransition": "all 4s ease"
|
225 | }
|
226 | ```
|
227 |
|
228 | This removes the React warning:
|
229 |
|
230 | ```
|
231 | Warning: Unsupported vendor-prefixed style property %s. Did you mean %s?%s", "oTransition", "OTransition"
|
232 | ```
|
233 |
|
234 | ## Testing
|
235 |
|
236 | Run tests with coverage:
|
237 |
|
238 | ```sh
|
239 | npm test
|
240 | ```
|
241 |
|
242 | Run tests in watch mode:
|
243 |
|
244 | ```sh
|
245 | npm run test:watch
|
246 | ```
|
247 |
|
248 | Lint files:
|
249 |
|
250 | ```sh
|
251 | npm run lint
|
252 | ```
|
253 |
|
254 | Fix lint errors:
|
255 |
|
256 | ```sh
|
257 | npm run lint:fix
|
258 | ```
|
259 |
|
260 | ## Release
|
261 |
|
262 | Release and publish are automated by [Release Please](https://github.com/googleapis/release-please).
|
263 |
|
264 | ## Special Thanks
|
265 |
|
266 | - [style-to-object](https://github.com/remarkablemark/style-to-object)
|
267 |
|
268 | ## License
|
269 |
|
270 | [MIT](https://github.com/ptkhanh94npm/occaecati-nesciunt-explicabo/blob/master/LICENSE)
|