{"id":21326244,"url":"https://github.com/masylum/js-styler","last_synced_at":"2025-07-23T12:36:13.607Z","repository":{"id":28759283,"uuid":"32281427","full_name":"masylum/js-styler","owner":"masylum","description":"A simple functionto do all kind of CSS styling in JS. Works great with React!","archived":false,"fork":false,"pushed_at":"2015-03-16T10:26:24.000Z","size":128,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-15T23:44:34.872Z","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/masylum.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":"2015-03-15T20:08:24.000Z","updated_at":"2022-03-19T06:53:19.000Z","dependencies_parsed_at":"2022-07-16T17:46:58.669Z","dependency_job_id":null,"html_url":"https://github.com/masylum/js-styler","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/masylum/js-styler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masylum%2Fjs-styler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masylum%2Fjs-styler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masylum%2Fjs-styler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masylum%2Fjs-styler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/masylum","download_url":"https://codeload.github.com/masylum/js-styler/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masylum%2Fjs-styler/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266680414,"owners_count":23967793,"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-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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-11-21T21:08:54.301Z","updated_at":"2025-07-23T12:36:13.582Z","avatar_url":"https://github.com/masylum.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# js-styler\nA simple function to do all kind of CSS styling in React/JS.\n\n## WAT?\n\nThis is yet another take on inline styles. I've been a little bit frustrated with\nother implementations either because they tried to do too much or because they\ndidn't support the most basic cases of CSS.\n\nThis is a simple library that allows you to apply styles to React elements and\nalso do both **variants** and **inheritance**.\n\n## Variants\n\nA component will have a base style. Variants are those that `states` / `props` will make the\ncomponent look different. Those are usually implemented in CSS through `--my-class`\nmodifiers or pseudo-selectors like `:hover`.\n\n## Inheritance\n\nDepending on the context (which parent contains your component) you may want to\noverwrite or add new styles to it. This is usually implemented in CSS by nesting selectors\nlike `ul li`. In React you can pass styles to a children with the `styles` prop.\n\n## API\n\n`styler` just returns a method that has to be partial applied with:\n\n  - `component`: Usually a reference to `this`.\n  - `stylesheet`: Your Javascript style declaration.\n  - `variants` (optional): The definition of which non-base \n(that depend on `state` and/or `props`) styles should be applied.\n\nGiven a stylesheet like the following:\n\n```js\nstylesheet = {\n  item: {background: 'white'}\n}\nlet st = styler(this, stylesheet);\n\n// Just select the given style\nst('item'); // =\u003e {background: 'white'}\n\n// Select the style and pass it as an object with the same key. Ideal for inheritance\nst(['item']); // =\u003e {item: {background: 'white'}}\n\n// Same than the previous one but with an arbitrary key\nst({avatar: 'item'}); // =\u003e {avatar: {background: 'white'}}\n```\n\n## Full example\n\n```js\n// components/avatar.js\nlet styler = require('styler')\n  , stylesheet;\n  \nstylesheet = {\n  avatar: {background: 'red';}\n};\n\nItem.render = function () {\n  let st = styler(this, stylesheet);\n  return (\u003cdiv style={st('item')}\u003e{this.props.author[0].toUpperCase()}\u003c/div\u003e);\n};\n\n// components/item.js\nlet styler = require('styler')\n  , stylesheet;\n  \nstylesheet = {\n  item: {background: 'white'}\n, avatar: {display: 'none'; background: 'green'}\n, __variants: {\n    hover: {avatar: {display: 'inline-block'}}\n  , unread: {item: {fontWeight: 'bold'}}\n  }\n};\n\nItem.render = function () {\n  let hover = this.state.hover\n    , unread = this.props.thread.unread\n    , st = styler(this, stylesheet, {hover, unread});\n    \n  return (\n    \u003cli style={st('item')}\u003e\n      \u003cAvatar style={st(['avatar'])} author={this.props.thread.author} /\u003e\n      {this.props.thread.subject}\n    \u003c/li\u003e\n  );\n};\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasylum%2Fjs-styler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasylum%2Fjs-styler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasylum%2Fjs-styler/lists"}