AK-21/Graphite-Industrial-Intelligence

1# style-to-js2 3[![NPM](https://nodei.co/npm/style-to-js.png)](https://nodei.co/npm/style-to-js/)4 5[![NPM version](https://img.shields.io/npm/v/style-to-js)](https://www.npmjs.com/package/style-to-js)6[![BNPM bundle size](https://img.shields.io/bundlephobia/minzip/style-to-js)](https://bundlephobia.com/package/style-to-js)7[![build](https://github.com/remarkablemark/style-to-js/actions/workflows/build.yml/badge.svg)](https://github.com/remarkablemark/style-to-js/actions/workflows/build.yml)8[![codecov](https://codecov.io/gh/remarkablemark/style-to-js/branch/master/graph/badge.svg?token=JWKUKTFT3E)](https://codecov.io/gh/remarkablemark/style-to-js)9[![NPM downloads](https://img.shields.io/npm/dm/style-to-js)](https://www.npmjs.com/package/style-to-js)10 11Parses CSS inline style to JavaScript object (camelCased):12 13```14StyleToJS(string)15```16 17## Example18 19```js20import parse from 'style-to-js';21 22parse('background-color: #BADA55;');23```24 25Output:26 27```json28{ "backgroundColor": "#BADA55" }29```30 31[JSFiddle](https://jsfiddle.net/remarkablemark/04nob1y7/) | [Examples](https://github.com/remarkablemark/style-to-js/tree/master/examples)32 33## Install34 35[NPM](https://www.npmjs.com/package/style-to-js):36 37```sh38npm install style-to-js --save39```40 41[Yarn](https://yarnpkg.com/package/style-to-js):42 43```sh44yarn add style-to-js45```46 47[CDN](https://unpkg.com/style-to-js/):48 49```html50<script src="https://unpkg.com/style-to-js@latest/umd/style-to-js.min.js"></script>51<script>52  window.StyleToJS(/* string */);53</script>54```55 56## Usage57 58### Import59 60Import with ES Modules:61 62```js63import parse from 'style-to-js';64```65 66Require with CommonJS:67 68```js69const parse = require('style-to-js');70```71 72### Parse style73 74Parse single declaration:75 76```js77parse('line-height: 42');78```79 80Output:81 82```json83{ "lineHeight": "42" }84```85 86> [!NOTE]87> Notice that the CSS property is camelCased.88 89Parse multiple declarations:90 91```js92parse(`93  border-color: #ACE;94  z-index: 1337;95`);96```97 98Output:99 100```json101{102  "borderColor": "#ACE",103  "zIndex": "1337"104}105```106 107### Vendor prefix108 109Parse [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix):110 111```js112parse(`113  -webkit-transition: all 4s ease;114  -moz-transition: all 4s ease;115  -ms-transition: all 4s ease;116  -o-transition: all 4s ease;117  -khtml-transition: all 4s ease;118`);119```120 121Output:122 123```json124{125  "webkitTransition": "all 4s ease",126  "mozTransition": "all 4s ease",127  "msTransition": "all 4s ease",128  "oTransition": "all 4s ease",129  "khtmlTransition": "all 4s ease"130}131```132 133### Custom property134 135Parse [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*):136 137```js138parse('--custom-property: #f00');139```140 141Output:142 143```json144{ "--custom-property": "#f00" }145```146 147### Unknown declaration148 149This library does not validate declarations, so unknown declarations can be parsed:150 151```js152parse('the-answer: 42;');153```154 155Output:156 157```json158{ "theAnswer": "42" }159```160 161### Invalid declaration162 163Declarations with missing value are removed:164 165```js166parse(`167  margin-top: ;168  margin-right: 1em;169`);170```171 172Output:173 174```json175{ "marginRight": "1em" }176```177 178Other invalid declarations or arguments:179 180```js181parse(); // {}182parse(null); // {}183parse(1); // {}184parse(true); // {}185parse('top:'); // {}186parse(':12px'); // {}187parse(':'); // {}188parse(';'); // {}189```190 191The following values will throw an error:192 193```js194parse('top'); // Uncaught Error: property missing ':'195parse('/*'); // Uncaught Error: End of comment missing196```197 198### Options199 200#### reactCompat201 202When option `reactCompat` is true, the [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) will be capitalized:203 204```js205parse(206  `207    -webkit-transition: all 4s ease;208    -moz-transition: all 4s ease;209    -ms-transition: all 4s ease;210    -o-transition: all 4s ease;211    -khtml-transition: all 4s ease;212  `,213  { reactCompat: true },214);215```216 217Output:218 219```json220{221  "WebkitTransition": "all 4s ease",222  "MozTransition": "all 4s ease",223  "msTransition": "all 4s ease",224  "OTransition": "all 4s ease",225  "KhtmlTransition": "all 4s ease"226}227```228 229This removes the React warning:230 231```232Warning: Unsupported vendor-prefixed style property %s. Did you mean %s?%s", "oTransition", "OTransition"233```234 235## Testing236 237Run tests with coverage:238 239```sh240npm test241```242 243Run tests in watch mode:244 245```sh246npm run test:watch247```248 249Lint files:250 251```sh252npm run lint253```254 255Fix lint errors:256 257```sh258npm run lint:fix259```260 261## Release262 263Release and publish are automated by [Release Please](https://github.com/googleapis/release-please).264 265## Special Thanks266 267- [style-to-object](https://github.com/remarkablemark/style-to-object)268 269## License270 271[MIT](https://github.com/remarkablemark/style-to-js/blob/master/LICENSE)272