{"id":15314249,"url":"https://github.com/barelyhuman/style-builder","last_synced_at":"2026-04-11T01:51:31.843Z","repository":{"id":195961088,"uuid":"694145913","full_name":"barelyhuman/style-builder","owner":"barelyhuman","description":"Variant based CSS-in-JS library (low-level)","archived":false,"fork":false,"pushed_at":"2023-10-08T13:07:53.000Z","size":45,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-07T13:31:49.056Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/barelyhuman.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-09-20T12:22:09.000Z","updated_at":"2023-09-29T23:13:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"674e5c44-4bd4-4145-8552-22a1e0c14a02","html_url":"https://github.com/barelyhuman/style-builder","commit_stats":null,"previous_names":["barelyhuman/style-builder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/barelyhuman/style-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barelyhuman%2Fstyle-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barelyhuman%2Fstyle-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barelyhuman%2Fstyle-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barelyhuman%2Fstyle-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barelyhuman","download_url":"https://codeload.github.com/barelyhuman/style-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barelyhuman%2Fstyle-builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018220,"owners_count":26086307,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"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":[],"created_at":"2024-10-01T08:44:51.311Z","updated_at":"2025-10-14T07:33:18.352Z","avatar_url":"https://github.com/barelyhuman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# style-builder\n\nI built it while trying to focus on building one of my web apps, safe to say, I\ncouldn't focus.\n\nAnyway, the library is simpler builder chain for styles.\n\n## Highlights\n\n- Simple and Tiny\n- Just plain css, no magic\n- [Easy to extend](#extending)\n\n### Usage\n\n- Start by installing the library itself, the library could be both a\n  `devDependency` or a `dependency` based on how you use it.\n- If you generate the CSS on build time (Meta-frameworks), add it as a\n  `devDependency`, if you are using it with a frontend library and appending the\n  styles to the `head` element on client render, add it as a `dependency`.\n\n```sh\nnpm i @barelyhuman/style-builder\n# or\nnpm i @barelyhuman/style-builder -D\n```\n\n- Next, lets set it up to use a element constructor, example `preact.h`, and\n  define some styles.\n\n```js\nimport { h } from \"preact\";\nimport { extractStyles, setup, styled } from \"@barelyhuman/style-builder\";\n\nsetup(h);\n\nconst StyledLink = styled(\"a\")\n  .base`\n    padding: 8px 16px;\n    text-decoration: none;\n    color: ${(props) =\u003e props.color || \"dodgerblue\"}\n  `\n  .hover`\n    text-decoration: underline;\n  `\n  .variant(\".mini\")`\n    padding: 2px 4px;\n  `\n  .component;\n\nconst styles = extractStyles();\n\nconsole.log(styles);\n// you might want to append the styles to the \u003chead\u003e element or extract and create a .css file out of it. I leave that to you.\n```\n\n### Extending\n\nExtending capabilities is pretty easy, you just use the `variant` function to\ndefine new classes, pseudo states (Hover, focus). The value of variant is\nappended directly to the css class, so you can pretty much write generic CSS\nwith it.\n\n```js\nconst LastChildStyle = styled(\"a\")\n  .base`\n    background-color: black;\n  `\n  .variant(\":not:last-child\")`\n    background-color: red;\n  `;\n```\n\n### Missing Features\n\nBecause it was created just to test an idea, there's quite a few things missing,\nhere's the list. If it's checked, it means the support was added in a specific\nversion (version specified beside it)\n\n- [ ] Forwarding Refs (UI Libraries support)\n- [ ] Internal wrapper for `document.createElement`\n- [ ] Inheriting from existing styled element\n- [ ] Better way to share memory data when working with CJS (Unchunkable\n      situations)\n- Raise an issue if there's other things you wished it did\n\n## License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarelyhuman%2Fstyle-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarelyhuman%2Fstyle-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarelyhuman%2Fstyle-builder/lists"}