{"id":22139675,"url":"https://github.com/ddneat/stylebuddy","last_synced_at":"2026-01-12T05:30:17.978Z","repository":{"id":43984743,"uuid":"63087155","full_name":"ddneat/stylebuddy","owner":"ddneat","description":"🐻 Generate encapsulated css inline styles which are extremely configurable.","archived":false,"fork":false,"pushed_at":"2023-03-03T13:46:33.000Z","size":448,"stargazers_count":9,"open_issues_count":10,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-09-30T05:30:24.596Z","etag":null,"topics":["at-rules","class-selectors","client-side-rendering","css","encapsulation","id-selectors","inline-styles","json","media-queries","parser","preprocessor","pseudo-selectors","react","selector","server-side-rendering","simple","tag-selectors","transform","transpile","vendor-prefix"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ddneat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-11T17:14:41.000Z","updated_at":"2022-07-20T07:49:51.000Z","dependencies_parsed_at":"2022-07-22T01:48:16.228Z","dependency_job_id":null,"html_url":"https://github.com/ddneat/stylebuddy","commit_stats":null,"previous_names":["davidspinat/stylebuddy"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ddneat/stylebuddy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddneat%2Fstylebuddy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddneat%2Fstylebuddy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddneat%2Fstylebuddy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddneat%2Fstylebuddy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ddneat","download_url":"https://codeload.github.com/ddneat/stylebuddy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddneat%2Fstylebuddy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28335202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["at-rules","class-selectors","client-side-rendering","css","encapsulation","id-selectors","inline-styles","json","media-queries","parser","preprocessor","pseudo-selectors","react","selector","server-side-rendering","simple","tag-selectors","transform","transpile","vendor-prefix"],"created_at":"2024-12-01T20:16:55.357Z","updated_at":"2026-01-12T05:30:17.936Z","avatar_url":"https://github.com/ddneat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stylebuddy 🐻\n\n__Generate CSS from JSON without any additional dependencies:__\n\n- Supports at-rules like `media queries`\n- Supports pseudo selectors like `:hover`, `:focus`, `:before`, etc.\n- Supports selectors by tag, class and id (e.g.: `body,`, `.components`, `#component`)\n- Supports vendor prefixes like `-webkit-transition`, `display: -moz-box`, etc.\n- Can be used for server side rendering\n- Converts camel case property names to hyphen notation\n- No dependencies\n- Tiny (2kb, about 860bytes uglified and gzipped)\n\n## Contents\n\n- [Usage](#usage)\n- [Basic Example](#basic-example)\n- [API Description](#api)\n- [Configuration](#configuration)\n- [Stylesheet Config](#stylesheet-config)\n- [Tag Selector](#tag-selector)\n- [Id Selector](#id-selector)\n- [Vendor Prefixes](#vendor-prefixes)\n- [Flexible Stylesheet](#flexible-stylesheet)\n\n## Usage\n\n```console\nnpm install --save stylebuddy\n```\n\n## Basic Example\n\n```javascript\nimport stylebuddy from 'stylebuddy';\n\nconst desktop = '@media screen and (min-width:720px)';\n\nconst input = {\n  component: {\n    background: '#ccc',\n    ':hover': {\n      background: '#777'\n    },\n    [desktop]: {\n      fontSize: 20,\n      ':hover': {\n        background: '#333'\n      }\n    }\n  }\n};\n\nconst styleSheet = stylebuddy.create();\nconst styles = styleSheet.add(input);\nconst css = styleSheet.render();\n// ._component_2513881194{background:#ccc;}.component_2513881194:hover ...\n\nconst styleNode = document.createElement('style');\ndocument.head.appendChild(styleNode);\nstyleNode.textContent = css;\n\nconsole.log(styles.component);\n// ._component_2513881194\n```\n\n## API\n\n### `create([, config])`\n\nReturns a new instance of the styleSheet API. The optional config merges with the default values and will be used for the current styleSheet instance.\n\n### `styleSheet.add(styles[, config])`\n\nReturns an object with the generated style identifiers. The passed config will be merged with the styleSheet config.\n\n### `styleSheet.render()`\n\nReturns the CSS string of the current styleSheet instance.\n\n## Configuration\n\n```javascript\nconst DEFAULT_CONFIG = {\n  prefix: '.', // e.g.: enforce css classes\n  delimiter: '_',\n  salt: '',\n  hashSelector: false,\n  appendHash: true,\n};\n```\n\n## Stylesheet Config\n\n```javascript\nimport stylebuddy from 'stylebuddy';\n\nconst styleSheetConfig = {\n  delimiter: '___',\n  appendHash: false\n};\n\nconst styles = {\n  components: {\n    background: '#ccc'\n  }\n};\n\nconst styleSheet = stylebuddy.create(styleSheetConfig);\nstyleSheet.add(styles);\nconst css = styleSheet.render();\n// .___components{background:#ccc;}\n```\n\n## Tag Selector\n\n```javascript\nimport stylebuddy from 'stylebuddy';\n\nconst tagSelector = {\n  body: {\n    background: '#ccc'\n  }\n};\n\nconst styleSheet = stylebuddy.create();\nstyleSheet.add(tagSelector, { delimiter: '', prefix: '', appendHash: false });\nconst css = styleSheet.render();\n// body{background:#ccc;}\n```\n\n## Id Selector\n\n```javascript\nimport stylebuddy from 'stylebuddy';\n\nconst idSelector = {\n  component: {\n    background: '#333'\n  }\n};\n\nconst styleSheet = stylebuddy.create();\nstyleSheet.add(idSelector, { prefix: '#', appendHash: false });\nconst css = styleSheet.render();\n// #_component{background:#333;}\n```\n\n## Vendor Prefixes\n\n```javascript\nimport stylebuddy from 'stylebuddy';\n\nconst input = {\n  component: {\n    WebkitTransition: '200ms all linear',\n    display: ['-webkit-box', '-moz-box']\n  }\n};\n\nconst styleSheet = stylebuddy.create();\nconst styles = styleSheet.add(input);\nconst css = styleSheet.render();\n// ._component_2513881194{-webkit-transition:200ms all linear;display:-webkit-box;display:-moz-box;}\n```\n\n## Flexible Stylesheet\n\n```javascript\nimport stylebuddy from 'stylebuddy';\n\nconst tagSelectors = {\n  body: {\n    background: '#ccc'\n  }\n};\n\nconst classSelectors = {\n  components: {\n    background: '#999'\n  }\n};\n\nconst idSelectors = {\n  component: {\n    background: '#333'\n  }\n};\n\nconst styleSheetConfig = {\n  appendHash: false\n};\n\nconst styleSheet = stylebuddy.create(styleSheetConfig);\n\nstyleSheet.add(tagSelectors, { prefix: '', delimiter: '' });\nstyleSheet.add(classSelectors, { delimiter: '___' });\nstyleSheet.add(idSelectors, { prefix: '#' });\n\nconst css = styleSheet.render();\n// body{background:#ccc;}.___components{background:#999;}#_component{background:#333;}\n\nconst styleNode = document.createElement('style');\ndocument.head.appendChild(styleNode);\nstyleNode.textContent = css;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fddneat%2Fstylebuddy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fddneat%2Fstylebuddy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fddneat%2Fstylebuddy/lists"}