{"id":16252223,"url":"https://github.com/remarkablemark/style-to-object","last_synced_at":"2025-05-15T17:08:20.912Z","repository":{"id":26899804,"uuid":"111262654","full_name":"remarkablemark/style-to-object","owner":"remarkablemark","description":"📝 Parse CSS inline style to JavaScript object.","archived":false,"fork":false,"pushed_at":"2025-05-12T16:35:35.000Z","size":3782,"stargazers_count":64,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-12T17:53:13.746Z","etag":null,"topics":["css","inline-style","inline-styles","javascript","npm","object","parser","pojo","style-to-object"],"latest_commit_sha":null,"homepage":"https://b.remarkabl.org/style-to-object","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":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["remarkablemark"],"patreon":"remarkablemark","open_collective":null,"ko_fi":"remarkablemark","tidelift":null,"community_bridge":null,"liberapay":"remarkablemark","issuehunt":null,"otechie":null,"buy_me_a_coffee":"remarkablemark","thanks_dev":"u/gh/remarkablemark","custom":["https://b.remarkabl.org/teespring"]}},"created_at":"2017-11-19T03:58:08.000Z","updated_at":"2025-05-12T16:35:37.000Z","dependencies_parsed_at":"2023-10-24T17:42:01.016Z","dependency_job_id":"198db1cd-aa7a-4d0d-9a61-7aff94de0425","html_url":"https://github.com/remarkablemark/style-to-object","commit_stats":{"total_commits":606,"total_committers":6,"mean_commits":101.0,"dds":"0.30363036303630364","last_synced_commit":"b18f9b18c700cbfdc53fe3e5a4f59f78329ea47b"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2Fstyle-to-object","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2Fstyle-to-object/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2Fstyle-to-object/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2Fstyle-to-object/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remarkablemark","download_url":"https://codeload.github.com/remarkablemark/style-to-object/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253800535,"owners_count":21966495,"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","inline-styles","javascript","npm","object","parser","pojo","style-to-object"],"created_at":"2024-10-10T15:12:50.559Z","updated_at":"2025-05-15T17:08:15.900Z","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://buymeacoffee.com/remarkablemark","https://thanks.dev/u/gh/remarkablemark","https://b.remarkabl.org/teespring"],"categories":["TypeScript"],"sub_categories":[],"readme":"# style-to-object\n\n[![NPM](https://nodei.co/npm/style-to-object.png)](https://nodei.co/npm/style-to-object/)\n\n[![NPM version](https://badgen.net/npm/v/style-to-object)](https://www.npmjs.com/package/style-to-object)\n[![Bundlephobia minified + gzip](https://badgen.net/bundlephobia/minzip/style-to-object)](https://bundlephobia.com/package/style-to-object)\n[![build](https://github.com/remarkablemark/style-to-object/actions/workflows/build.yml/badge.svg)](https://github.com/remarkablemark/style-to-object/actions/workflows/build.yml)\n[![codecov](https://codecov.io/gh/remarkablemark/style-to-object/branch/master/graph/badge.svg?token=XWxph9dpa4)](https://codecov.io/gh/remarkablemark/style-to-object)\n[![NPM downloads](https://badgen.net/npm/dm/style-to-object)](https://www.npmjs.com/package/style-to-object)\n\nParse CSS inline style to JavaScript object:\n\n```js\nimport parse from 'style-to-object';\n\nparse('color: #C0FFEE; background: #BADA55;');\n```\n\nOutput:\n\n```js\n{ color: '#C0FFEE', background: '#BADA55' }\n```\n\n[JSFiddle](https://jsfiddle.net/remarkablemark/ykz2meot/) | [Replit](https://replit.com/@remarkablemark/style-to-object) | [Examples](https://github.com/remarkablemark/style-to-object/tree/master/examples)\n\n## Installation\n\n[NPM](https://www.npmjs.com/package/style-to-object):\n\n```sh\nnpm install style-to-object --save\n```\n\n[Yarn](https://yarn.fyi/style-to-object):\n\n```sh\nyarn add style-to-object\n```\n\n[CDN](https://unpkg.com/style-to-object/):\n\n```html\n\u003cscript src=\"https://unpkg.com/style-to-object@latest/dist/style-to-object.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  window.StyleToObject(/* string */);\n\u003c/script\u003e\n```\n\n## Usage\n\nImport with ES Modules:\n\n```js\nimport parse from 'style-to-object';\n```\n\nRequire with CommonJS:\n\n```js\nconst parse = require('style-to-object').default;\n```\n\nParse single declaration:\n\n```js\nparse('line-height: 42');\n```\n\nOutput:\n\n```js\n{ 'line-height': '42' }\n```\n\nParse multiple declarations:\n\n```js\nparse(`\n  border-color: #ACE;\n  z-index: 1337;\n`);\n```\n\nOutput:\n\n```js\n{ 'border-color': '#ACE', 'z-index': '1337' }\n```\n\nParse unknown declarations:\n\n```js\nparse('answer: 42;');\n```\n\nOutput:\n\n```js\n{ 'answer': '42' }\n```\n\nInvalid declarations/arguments:\n\n\u003c!-- prettier-ignore-start --\u003e\n\n```js\nparse(`\n  top: ;\n  right: 1em;\n`); // { right: '1em' }\n\nparse();        // null\nparse(null);    // null\nparse(1);       // null\nparse(true);    // null\nparse('top:');  // null\nparse(':12px'); // null\nparse(':');     // null\nparse(';');     // null\n\nparse('top'); // throws Error\nparse('/*');  // throws Error\n```\n\n\u003c!-- prettier-ignore-end --\u003e\n\n### Iterator\n\nIf the 2nd argument is a function, then the parser will return `null`:\n\n```js\nparse('color: #f00', () =\u003e {}); // null\n```\n\nBut the function will iterate through each declaration:\n\n\u003c!-- prettier-ignore-start --\u003e\n\n```js\nparse('color: #f00', (name, value, declaration) =\u003e {\n  console.log(name);        // 'color'\n  console.log(value);       // '#f00'\n  console.log(declaration); // { type: 'declaration', property: 'color', value: '#f00' }\n});\n```\n\n\u003c!-- prettier-ignore-end --\u003e\n\nThis makes it easy to customize the output:\n\n```js\nconst style = `\n  color: red;\n  background: blue;\n`;\nconst output = [];\n\nfunction iterator(name, value) {\n  output.push([name, value]);\n}\n\nparse(style, iterator);\nconsole.log(output); // [['color', 'red'], ['background', 'blue']]\n```\n\n## Migration\n\n### v1\n\nMigrated to TypeScript. Iterator excludes `Comment`. CommonJS requires the `.default` key:\n\n```js\nconst parse = require('style-to-object').default;\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- [inline-style-parser](https://github.com/remarkablemark/inline-style-parser)\n- [Contributors](https://github.com/remarkablemark/style-to-object/graphs/contributors)\n\n## License\n\n[MIT](https://github.com/remarkablemark/style-to-object/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremarkablemark%2Fstyle-to-object","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremarkablemark%2Fstyle-to-object","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremarkablemark%2Fstyle-to-object/lists"}