{"id":23033764,"url":"https://github.com/p-chan/object-to-css-variables","last_synced_at":"2025-08-14T15:33:02.139Z","repository":{"id":39110488,"uuid":"413118525","full_name":"p-chan/object-to-css-variables","owner":"p-chan","description":"A library to convert JavaScript Object to CSS Variables","archived":false,"fork":false,"pushed_at":"2024-11-06T20:41:21.000Z","size":798,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-12T19:53:36.192Z","etag":null,"topics":["css","css-variables","custom-media-queries","custom-media-query","custom-properties","custom-property"],"latest_commit_sha":null,"homepage":"https://npm.im/object-to-css-variables","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/p-chan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-03T15:33:28.000Z","updated_at":"2024-11-06T20:41:23.000Z","dependencies_parsed_at":"2023-02-18T00:46:01.645Z","dependency_job_id":"e6e25dc6-171a-4f01-b8c4-3f22a3c2305a","html_url":"https://github.com/p-chan/object-to-css-variables","commit_stats":{"total_commits":104,"total_committers":3,"mean_commits":"34.666666666666664","dds":0.6057692307692308,"last_synced_commit":"84da73fd5c3bbdc8de1dbd8f19c46d236c5153e3"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-chan%2Fobject-to-css-variables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-chan%2Fobject-to-css-variables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-chan%2Fobject-to-css-variables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-chan%2Fobject-to-css-variables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/p-chan","download_url":"https://codeload.github.com/p-chan/object-to-css-variables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229841504,"owners_count":18132568,"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","css-variables","custom-media-queries","custom-media-query","custom-properties","custom-property"],"created_at":"2024-12-15T16:18:34.572Z","updated_at":"2024-12-15T16:18:35.309Z","avatar_url":"https://github.com/p-chan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# object-to-css-variables\n\n\u003e A library to convert JavaScript Object to CSS Variables\n\n## Install\n\n```sh\nnpm install object-to-css-variables\n```\n\nor\n\n```sh\nyarn add object-to-css-variables\n```\n\n## Usage\n\n### Object to Custom Properties\n\n```ts\n// to Array\ntoCustomPropertiesArray(object, options)\n\n// to String\ntoCustomPropertiesString(object, options)\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eExamples\u003c/summary\u003e\n\n```ts\nimport { toCustomPropertiesArray, toCustomPropertiesString } from 'object-to-css-variables'\n\nconst customProperties = {\n  success: {\n    400: '#BAE944',\n    700: '#649D06',\n  },\n  info: {\n    400: '#48F0FD',\n    700: '#067FB5',\n  },\n  warning: {\n    400: '#FDCC70',\n    700: '#B57020',\n  },\n  danger: {\n    400: '#FF7C65',\n    700: '#B71928',\n  },\n}\n\ntoCustomPropertiesArray(customProperties)\n/* log -\u003e\n[\n  { key: '--success-400', value: '#BAE944' },\n  { key: '--success-700', value: '#649D06' },\n  { key: '--info-400', value: '#48F0FD' },\n  { key: '--info-700', value: '#067FB5' },\n  { key: '--warning-400', value: '#FDCC70' },\n  { key: '--warning-700', value: '#B57020' },\n  { key: '--danger-400', value: '#FF7C65' },\n  { key: '--danger-700', value: '#B71928' }\n]\n*/\n\ntoCustomPropertiesString(customProperties)\n/* log -\u003e\n--success-400: #BAE944; --success-700: #649D06; --info-400: #48F0FD; --info-700: #067FB5; --warning-400: #FDCC70; --warning-700: #B57020; --danger-400: #FF7C65; --danger-700: #B71928;\n*/\n```\n\n\u003c/details\u003e\n\n#### Paramaters\n\n- `object`\n- `options`\n  - Type: `Options?`\n\n#### Options\n\n- `prefix`\n  - Type: `string?`\n  - Description: Add a prefix before all variables\n- `withRGB`\n  - Type: `boolean?`\n  - Description: Add a RGB variable when a variable is HEX\n\n### Object to Custom Media Queries\n\n```ts\n// to Array\ntoCustomPropertiesArray(object, options)\n\n// to String\ntoCustomPropertiesString(object, options)\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eExamples\u003c/summary\u003e\n\n```ts\nimport { toCustomMediaQueriesArray, toCustomMediaQueriesString } from 'object-to-css-variables'\n\nconst customMediaQueries = {\n  phone: '(max-width: 428px)',\n  tablet: '(max-width: 768px)',\n  laptop: '(max-width: 1024px)',\n  desktop: '(max-width: 1440px)',\n}\n\ntoCustomMediaQueriesArray(customMediaQueries)\n/* log -\u003e\n[\n  { key: '--phone', value: '(max-width: 428px)' },\n  { key: '--tablet', value: '(max-width: 768px)' },\n  { key: '--laptop', value: '(max-width: 1024px)' },\n  { key: '--desktop', value: '(max-width: 1440px)' }\n]\n*/\n\ntoCustomMediaQueriesString(customMediaQueries)\n/* log -\u003e\n@custom-media --phone (max-width: 428px); @custom-media --tablet (max-width: 768px); @custom-media --laptop (max-width: 1024px); @custom-media --desktop (max-width: 1440px);\n*/\n```\n\n\u003c/details\u003e\n\n#### Paramaters\n\n- `object`\n- `options`\n  - Type: `Options?`\n\n#### Options\n\n- `prefix`\n  - Type: `string?`\n  - Description: Add a prefix before all variables\n\n## Author\n\n[@p-chan](https://github.com/p-chan)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp-chan%2Fobject-to-css-variables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fp-chan%2Fobject-to-css-variables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp-chan%2Fobject-to-css-variables/lists"}