{"id":16252413,"url":"https://github.com/remarkablemark/style-to-js","last_synced_at":"2025-03-16T13:30:39.358Z","repository":{"id":38333592,"uuid":"314951432","full_name":"remarkablemark/style-to-js","owner":"remarkablemark","description":":memo: Parses CSS inline style to JavaScript object (camelCased).","archived":false,"fork":false,"pushed_at":"2024-05-01T04:16:46.000Z","size":2311,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-01T21:25:51.837Z","etag":null,"topics":["css","inline-style","javascript","object","pojo","style-to-js","style-to-object"],"latest_commit_sha":null,"homepage":"https://b.remarkabl.org/style-to-js","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/remarkablemark.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["remarkablemark"],"patreon":"remarkablemark","open_collective":null,"ko_fi":"remarkablemark","tidelift":null,"community_bridge":null,"liberapay":"remarkablemark","issuehunt":null,"otechie":null,"custom":["https://b.remarkabl.org/teespring"]}},"created_at":"2020-11-22T03:29:18.000Z","updated_at":"2024-05-14T05:39:28.199Z","dependencies_parsed_at":"2023-12-25T05:22:49.504Z","dependency_job_id":"77c65467-774e-4eba-8a37-5f0013b38293","html_url":"https://github.com/remarkablemark/style-to-js","commit_stats":{"total_commits":417,"total_committers":4,"mean_commits":104.25,"dds":"0.21342925659472423","last_synced_commit":"41b35fcfa01cb7ea27647149ac6128c0553e0e53"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2Fstyle-to-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2Fstyle-to-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2Fstyle-to-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2Fstyle-to-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remarkablemark","download_url":"https://codeload.github.com/remarkablemark/style-to-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243815561,"owners_count":20352189,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","inline-style","javascript","object","pojo","style-to-js","style-to-object"],"created_at":"2024-10-10T15:13:36.933Z","updated_at":"2025-03-16T13:30:39.014Z","avatar_url":"https://github.com/remarkablemark.png","language":"TypeScript","funding_links":["https://github.com/sponsors/remarkablemark","https://patreon.com/remarkablemark","https://ko-fi.com/remarkablemark","https://liberapay.com/remarkablemark","https://b.remarkabl.org/teespring"],"categories":[],"sub_categories":[],"readme":"# style-to-js\n\n[![NPM](https://nodei.co/npm/style-to-js.png)](https://nodei.co/npm/style-to-js/)\n\n[![NPM version](https://badgen.net/npm/v/style-to-js)](https://www.npmjs.com/package/style-to-js)\n[![Bundlephobia minified + gzip](https://badgen.net/bundlephobia/minzip/style-to-js)](https://bundlephobia.com/package/style-to-js)\n[![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)\n[![codecov](https://codecov.io/gh/remarkablemark/style-to-js/branch/master/graph/badge.svg?token=JWKUKTFT3E)](https://codecov.io/gh/remarkablemark/style-to-js)\n[![NPM downloads](https://badgen.net/npm/dm/style-to-js)](https://www.npmjs.com/package/style-to-js)\n\nParses CSS inline style to JavaScript object (camelCased):\n\n```\nStyleToJS(string)\n```\n\n## Example\n\n```js\nimport parse from 'style-to-js';\n\nparse('background-color: #BADA55;');\n```\n\nOutput:\n\n```json\n{ \"backgroundColor\": \"#BADA55\" }\n```\n\n[Replit](https://replit.com/@remarkablemark/style-to-js) | [JSFiddle](https://jsfiddle.net/remarkablemark/04nob1y7/) | [Examples](https://github.com/remarkablemark/style-to-js/tree/master/examples)\n\n## Install\n\n[NPM](https://www.npmjs.com/package/style-to-js):\n\n```sh\nnpm install style-to-js --save\n```\n\n[Yarn](https://yarnpkg.com/package/style-to-js):\n\n```sh\nyarn add style-to-js\n```\n\n[CDN](https://unpkg.com/style-to-js/):\n\n```html\n\u003cscript src=\"https://unpkg.com/style-to-js@latest/umd/style-to-js.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  window.StyleToJS(/* string */);\n\u003c/script\u003e\n```\n\n## Usage\n\n### Import\n\nImport with ES Modules:\n\n```js\nimport parse from 'style-to-js';\n```\n\nRequire with CommonJS:\n\n```js\nconst parse = require('style-to-js');\n```\n\n### Parse style\n\nParse single declaration:\n\n```js\nparse('line-height: 42');\n```\n\nOutput:\n\n```json\n{ \"lineHeight\": \"42\" }\n```\n\n\u003e Notice that the CSS property is camelCased.\n\nParse multiple declarations:\n\n```js\nparse(`\n  border-color: #ACE;\n  z-index: 1337;\n`);\n```\n\nOutput:\n\n```json\n{\n  \"borderColor\": \"#ACE\",\n  \"zIndex\": \"1337\"\n}\n```\n\n### Vendor prefix\n\nParse [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix):\n\n```js\nparse(`\n  -webkit-transition: all 4s ease;\n  -moz-transition: all 4s ease;\n  -ms-transition: all 4s ease;\n  -o-transition: all 4s ease;\n  -khtml-transition: all 4s ease;\n`);\n```\n\nOutput:\n\n```json\n{\n  \"webkitTransition\": \"all 4s ease\",\n  \"mozTransition\": \"all 4s ease\",\n  \"msTransition\": \"all 4s ease\",\n  \"oTransition\": \"all 4s ease\",\n  \"khtmlTransition\": \"all 4s ease\"\n}\n```\n\n### Custom property\n\nParse [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*):\n\n```js\nparse('--custom-property: #f00');\n```\n\nOutput:\n\n```json\n{ \"--custom-property\": \"#f00\" }\n```\n\n### Unknown declaration\n\nThis library does not validate declarations, so unknown declarations can be parsed:\n\n```js\nparse('the-answer: 42;');\n```\n\nOutput:\n\n```json\n{ \"theAnswer\": \"42\" }\n```\n\n### Invalid declaration\n\nDeclarations with missing value are removed:\n\n```js\nparse(`\n  margin-top: ;\n  margin-right: 1em;\n`);\n```\n\nOutput:\n\n```json\n{ \"marginRight\": \"1em\" }\n```\n\nOther invalid declarations or arguments:\n\n```js\nparse(); // {}\nparse(null); // {}\nparse(1); // {}\nparse(true); // {}\nparse('top:'); // {}\nparse(':12px'); // {}\nparse(':'); // {}\nparse(';'); // {}\n```\n\nThe following values will throw an error:\n\n```js\nparse('top'); // Uncaught Error: property missing ':'\nparse('/*'); // Uncaught Error: End of comment missing\n```\n\n### Options\n\n#### reactCompat\n\nWhen option `reactCompat` is true, the [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) will be capitalized:\n\n```js\nparse(\n  `\n    -webkit-transition: all 4s ease;\n    -moz-transition: all 4s ease;\n    -ms-transition: all 4s ease;\n    -o-transition: all 4s ease;\n    -khtml-transition: all 4s ease;\n  `,\n  { reactCompat: true },\n);\n```\n\nOutput:\n\n```json\n{\n  \"WebkitTransition\": \"all 4s ease\",\n  \"MozTransition\": \"all 4s ease\",\n  \"msTransition\": \"all 4s ease\",\n  \"OTransition\": \"all 4s ease\",\n  \"KhtmlTransition\": \"all 4s ease\"\n}\n```\n\nThis removes the React warning:\n\n```\nWarning: Unsupported vendor-prefixed style property %s. Did you mean %s?%s\", \"oTransition\", \"OTransition\"\n```\n\n## Testing\n\nRun tests with coverage:\n\n```sh\nnpm test\n```\n\nRun tests in watch mode:\n\n```sh\nnpm run test:watch\n```\n\nLint files:\n\n```sh\nnpm run lint\n```\n\nFix lint errors:\n\n```sh\nnpm run lint:fix\n```\n\n## Release\n\nRelease and publish are automated by [Release Please](https://github.com/googleapis/release-please).\n\n## Special Thanks\n\n- [style-to-object](https://github.com/remarkablemark/style-to-object)\n\n## License\n\n[MIT](https://github.com/remarkablemark/style-to-js/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremarkablemark%2Fstyle-to-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremarkablemark%2Fstyle-to-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremarkablemark%2Fstyle-to-js/lists"}