{"id":16383927,"url":"https://github.com/artalar/stylerun","last_synced_at":"2025-03-21T02:31:00.042Z","repository":{"id":53622543,"uuid":"335070152","full_name":"artalar/stylerun","owner":"artalar","description":"CSS-in-TS with CSS-variables","archived":false,"fork":false,"pushed_at":"2023-09-21T17:01:16.000Z","size":2385,"stargazers_count":18,"open_issues_count":7,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-17T19:52:11.330Z","etag":null,"topics":["css","css-in-js","jsx","preact","react","style","styling"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/artalar.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":"2021-02-01T20:06:49.000Z","updated_at":"2025-03-09T19:49:31.000Z","dependencies_parsed_at":"2022-09-15T10:01:45.392Z","dependency_job_id":null,"html_url":"https://github.com/artalar/stylerun","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artalar%2Fstylerun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artalar%2Fstylerun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artalar%2Fstylerun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artalar%2Fstylerun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artalar","download_url":"https://codeload.github.com/artalar/stylerun/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244725468,"owners_count":20499608,"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-in-js","jsx","preact","react","style","styling"],"created_at":"2024-10-11T04:10:01.146Z","updated_at":"2025-03-21T02:30:59.660Z","avatar_url":"https://github.com/artalar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![version](https://img.shields.io/npm/v/stylerun)](https://www.npmjs.com/package/stylerun)\n[![bundle size](https://deno.bundlejs.com/badge?q=stylerun\u0026treeshake=%5B%7B+default+%7D%5D)](https://bundlejs.com/?q=stylerun\u0026treeshake=%5B%7B+default+%7D%5D)\n![license](https://img.shields.io/github/license/artalar/reatom)\n\n[![logo](https://raw.githubusercontent.com/artalar/stylerun/main/logo.svg)](https://github.com/artalar/stylerun)\n\n**Stylerun** is the most efficient tool to describe styles in (J|T)avaScript. You can use it for small widgets or (P?)React SPAs. It is **small**, **performant** and have **familiar** API inspired by styled-components.\n\nThe size is less than 500 B and controlled by [Size Limit](https://github.com/ai/size-limit).\n\nThe goal of the chosen API is to have CSS syntax highlighting in your script code with any popular extension for styled-components.\n\nStylerun does not parse your styles at runtime and pastes them as they are. All dynamic parts are converted to CSS variables, which is the most modern and performant way to manage dynamic styles!\n\nNote that you can manage only CSS properties; do not include the entire CSS blocks in the function results.\n\nExample https://stackblitz.com/edit/stylerun\n\n```tsx\nimport styled from 'stylerun'\n\nconst inputStyles = styled('')`\n  font-size: ${(length: number) =\u003e `${1 + length * 0.1}em`};\n`\n\nexport const Input = () =\u003e {\n  const [value, setValue] = useState('')\n\n  return (\n    \u003cinput\n      {...inputStyles(value.length)}\n      value={value}\n      onChange={(e) =\u003e setValue(e.currentTarget.value)}\n    /\u003e\n  )\n}\n```\n\nHere `inputStyles(1)` will return `{ className: 'sr_1_zzzz', style: { '--2_sr_1_zzzz': '1.1em' } }`\n\nEach style function returns self class name with `toString` method, which allows you to use styles as selectors! Also, you could chain styles with `styled` method to add extra styles with selectors\n\n```ts\nlet listStyles = styled('')`\n  color: red;\n`\nlet ulStyles = styled('')`\n  margin: 1rem;\n`.styled(':hover')`\n  box-shadow: 0 0 1rem gray;\n`.styled(listStyles)`\n  padding-left: 1rem;\n  color: ${(props: { color: string }) =\u003e props.color};\n`\n```\n\n## Motivation\n\nCSS-in-JS is a powerful approach with benefits like: simple dynamic styles, critical CSS and dead code elimination by design and many others. Stylerun, inspired by [Reshadow](https://reshadow.dev) and [styled-jsx](https://github.com/vercel/styled-jsx), try to get all that benefits, but keeping natural styling and reduce JS specificity.\n\n## Limitations\n\n- Currently there is no SSR support\n- Stylerun has no compiler (pre/post processor) thats prevent vendor prefixing and nesting (`\u0026`) usage\n  \u003e TODO: https://github.com/artalar/stylerun/issues/19\n- Stylerun has no built time static extraction and hasn't goal for that.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/artalar\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/27290320?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eArutyunyan Artyom\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/artalar/stylerun/commits?author=artalar\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-artalar\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#example-artalar\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"https://github.com/artalar/stylerun/commits?author=artalar\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/kancurochat\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/54439779?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDaniel Infante Pacheco\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#design-kancurochat\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/artalar/stylerun/commits?author=kancurochat\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/scorpionknifes\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/23299540?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eZHENK\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/artalar/stylerun/commits?author=scorpionknifes\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-scorpionknifes\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartalar%2Fstylerun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartalar%2Fstylerun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartalar%2Fstylerun/lists"}