{"id":17139296,"url":"https://github.com/renatorib/styn","last_synced_at":"2026-03-14T03:31:15.439Z","repository":{"id":57163321,"uuid":"326315245","full_name":"renatorib/styn","owner":"renatorib","description":":gem: A small, zero-dependency, extensible, object to css generator","archived":false,"fork":false,"pushed_at":"2022-05-02T01:41:06.000Z","size":246,"stargazers_count":42,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T01:22:53.467Z","etag":null,"topics":["ast","css","css-generator"],"latest_commit_sha":null,"homepage":"","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/renatorib.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-03T02:54:42.000Z","updated_at":"2024-03-09T18:25:08.000Z","dependencies_parsed_at":"2022-09-12T01:11:02.823Z","dependency_job_id":null,"html_url":"https://github.com/renatorib/styn","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renatorib%2Fstyn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renatorib%2Fstyn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renatorib%2Fstyn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renatorib%2Fstyn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/renatorib","download_url":"https://codeload.github.com/renatorib/styn/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248695328,"owners_count":21146953,"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":["ast","css","css-generator"],"created_at":"2024-10-14T20:11:54.936Z","updated_at":"2026-03-14T03:31:15.386Z","avatar_url":"https://github.com/renatorib.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./image/styn.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cstrong\u003estyn\u003c/strong\u003e is a small, zero-dependency, extensible, js object to css generator\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Usage](#usage)\n- - [CSS](#css)\n- - [Element](#element)\n- [Plugins](#plugins)\n- [React](#react)\n\n## Usage\n\n### CSS\n\n```js\nimport { css } from \"styn\";\n\nconst styles = css({\n  \".foo\": {\n    backgroundColor: \"red\",\n    \"\u0026:hover\": {\n      backgroundColor: \"blue\",\n    },\n  },\n  \".bar\": {\n    color: \"yellow\",\n  },\n});\n```\n\n**Outputs to:**\n\nstyles\n\n```css\n.foo {\n  background-color: red;\n}\n.foo:hover {\n  background-color: blue;\n}\n.bar {\n  color: yellow;\n}\n```\n\n**css** also accepts at-rules like @keyframes, @font-face, etc.\n\n```js\nimport { css } from \"styn\";\n\nconst styles = css({\n  \"@keyframes pulse\": {\n    from: {\n      backgroundColor: \"red\",\n    },\n    to: {\n      backgroundColor: \"blue\",\n    },\n  },\n  \".foo\": {\n    animationName: \"pulse\",\n  },\n});\n```\n\n### Element\n\nYou can create a scoped element (omit className option to generated one)\n\n```js\nimport { element } from \"styn\";\n\nconst { className, styles } = element({\n  backgroundColor: \"red\",\n  \"\u0026:hover\": {\n    backgroundColor: \"blue\",\n  },\n});\n```\n\n**Outputs to:**\n\nclassName: `'styn4b5pb'`\n\nstyles:\n\n```css\n.styn4b5pb {\n  background-color: red;\n}\n.styn4b5pb:hover {\n  background-color: blue;\n}\n```\n\n## Plugins\n\n**styn** accepts plugins that interact with the styn tree.\n\nBoth `css` and `element` accept plugins.\n\nHere are an example of a plugin that accept a new `truncate` property that converts to three new properties (`white-space`, `overflow` and `text-overflow`)\n\n\u003e Note: \"styn tree\" is a very, very, very short version of an AST. It may not be the best option if you want to work with a full AST.\n\n```ts\nimport { element, StynPlugin } from \"styn\";\n\nconst truncate: StynPlugin = (tree, walk) =\u003e {\n  return walk(tree, (rule) =\u003e {\n    if (rule.declarations) {\n      for (const property in rule.declarations) {\n        if (property === \"truncate\") {\n          delete rule.declarations.truncate;\n          rule.declarations.whiteSpace = \"nowrap\";\n          rule.declarations.overflow = \"hidden\";\n          rule.declarations.textOverflow = \"ellipsis\";\n        }\n      }\n    }\n  });\n};\n\nconst { styles } = element(\n  {\n    width: \"350px\",\n    padding: \"20px\",\n    truncate: true,\n  },\n  {\n    plugins: [truncate],\n  }\n);\n```\n\n**styles output:**\n\n```css\n.styn4b5pb {\n  width: 350px;\n  padding: 20px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n```\n\n### List of plugins\n\n- **@styn/plugin-breakpoints**\n\n```js\nimport { element } from \"styn\";\nimport { breakpoints } from \"@styn/plugin-breakpoints\";\n\nconst plugins = [\n  breakpoints({\n    md: \"768px\",\n    lg: \"1024px\",\n  }),\n];\n\nconst { styles } = element(\n  {\n    color: \"red\",\n    md: {\n      color: \"blue\",\n    },\n    lg: {\n      color: \"yellow\",\n    },\n  },\n  { plugins }\n);\n\n/* css =\u003e\n\n.styn4b5pb {\n  color: red;\n}\n@media (min-width: 768px) {\n  .styn4b5pb {\n    color: blue;\n  }\n}\n@media (min-width: 1024px) {\n  .styn4b5pb {\n    color: yellow;\n  }\n}\n*/\n```\n\n- **@styn/plugin-tokenizer**\n\n```js\nimport { element } from \"styn\";\nimport { tokenizer } from \"@styn/plugin-tokenizer\";\n\nconst plugins = [\n  tokenizer({\n    colors: {\n      primary: \"#123456\",\n    },\n  }),\n];\n\nconst { styles } = element(\n  {\n    color: \"colors.primary\",\n  },\n  { plugins }\n);\n\n/* css =\u003e\n\n.styn4b5pb {\n  color: #123456;\n}\n*/\n```\n\n- **@styn/plugin-tokenizer** (soon)\n\n## React\n\nsoon\n\n## Contribute\n\nYou can help improving this project sending PRs and helping with issues.\nAlso you can ping me at [Twitter](https://twitter.com/renatorib_)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenatorib%2Fstyn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frenatorib%2Fstyn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenatorib%2Fstyn/lists"}