{"id":16939377,"url":"https://github.com/07akioni/css-render","last_synced_at":"2025-04-12T19:49:28.032Z","repository":{"id":37078335,"uuid":"247928529","full_name":"07akioni/css-render","owner":"07akioni","description":"Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.","archived":false,"fork":false,"pushed_at":"2024-05-05T07:10:33.000Z","size":968,"stargazers_count":212,"open_issues_count":41,"forks_count":23,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-08T04:32:12.255Z","etag":null,"topics":["css","css-in-js","preprocessor","style"],"latest_commit_sha":null,"homepage":"css-render.vercel.app","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/07akioni.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2020-03-17T09:27:11.000Z","updated_at":"2025-03-31T13:23:41.000Z","dependencies_parsed_at":"2024-10-23T19:27:38.019Z","dependency_job_id":"a3ef360f-b030-467a-be88-696ab333a69e","html_url":"https://github.com/07akioni/css-render","commit_stats":{"total_commits":337,"total_committers":8,"mean_commits":42.125,"dds":0.08605341246290799,"last_synced_commit":"4fd3b95ecedb17bffafabc00e93ce6eab843e716"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/07akioni%2Fcss-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/07akioni%2Fcss-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/07akioni%2Fcss-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/07akioni%2Fcss-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/07akioni","download_url":"https://codeload.github.com/07akioni/css-render/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248139218,"owners_count":21054053,"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","preprocessor","style"],"created_at":"2024-10-13T21:04:34.686Z","updated_at":"2025-04-12T19:49:28.007Z","avatar_url":"https://github.com/07akioni.png","language":"TypeScript","readme":"# css-render \u0026middot; [![GitHub Liscense](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/07akioni/css-render/blob/master/LICENSE) [![npm](https://img.shields.io/npm/v/css-render)](https://www.npmjs.com/package/css-render) [![Total alerts](https://img.shields.io/lgtm/alerts/g/07akioni/css-render.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/07akioni/css-render/alerts/) [![codecov](https://codecov.io/gh/07akioni/css-render/branch/master/graph/badge.svg?token=28OJZAHLK4\u0026precision=2)](https://codecov.io/gh/07akioni/css-render)\n\nGenerating CSS using JS with considerable flexibility and extensibility, at both server side and client side.\n\nIt's mainly built for **library builders** (who wants make their library work without css import at small overhead). It's not recommend to use it in a webapp.\n\nIt is not designed to totally replace other style-related solutions, but to be a progressive tool which can just work as a supplementary of your style files or totally replace your `.css` files.\n\n## Docs\n[css-render](https://css-render.vercel.app/)\n\n## Why Using It\n1. You want to ship a library without css at a small price (gzip \u003c 2kb).\n2. Reduce size compared with static css (which contains duplicate logic).\n3. You can't write `sass-like` or `less-like` css-in-js (eg. `mixin` in sass or less).\n4. You want to write style variables in JS.\n5. Support an simple SSR API (now only for vue3).\n\n## Comparasion with other CSS-in-JS framework\n\nMain differences between css-render and styled-component, jss or emotion:\n1. It doesn't do the bindings between components and styles. It is more like a style generator with low level mount and unmount API.\n2. It's easier to write like a sass mixin or less mixin.\n\n\n## Examples\n### Realworld Example\n- [DataTable](https://github.com/TuSimple/naive-ui/blob/main/src/data-table/src/styles/index.cssr.ts)\n- [XScroll](https://github.com/07akioni/vueuc/blob/main/src/x-scroll/src/index.ts)\n- [VirtualList](https://github.com/07akioni/vueuc/blob/main/src/virtual-list/src/VirtualList.ts)\n\n### Basic Example\n```bash\n$ npm install --save-dev css-render\n```\n```js\nimport CssRender from 'css-render'\n/**\n * CommonJS:\n * const { CssRender } = require('css-render')\n */\n\nconst {\n  c\n} = CssRender()\n\nconst style = c('body', ({ props }) =\u003e ({\n  margin: 0,\n  backgroundColor: props.backgroundColor\n}), [\n  c('\u0026.dark', {\n    backgroundColor: 'black'\n  }),\n  c('.container', {\n    width: '100%'\n  })\n])\n\n/** use it as string */\nconsole.log(style.render({ backgroundColor: 'white' }))\n/**\n * or mount on document.head. (the following lines only work in the browser.)\n */\nstyle.mount()\n// ...\nstyle.unmount()\n```\n```css\nbody {\n  margin: 0;\n  background-color: white;\n}\n\nbody.dark {\n  background-color: black;\n}\n\nbody .container {\n  width: 100%;\n}\n```\n\n### BEM Plugin Example\n```bash\n$ npm install --save-dev css-render @css-render/plugin-bem\n```\n\nYou can use bem plugin to generate bem CSS like this:\n\n```js\nimport CssRender from 'css-render'\nimport bem from '@css-render/plugin-bem'\n/**\n * CommonJS:\n * const { CssRender } = require('css-render')\n * const { plugin: bem } = require('@css-render/plugin-bem')\n */\n\nconst cssr = CssRender()\nconst plugin = bem({\n  blockPrefix: '.c-'\n})\ncssr.use(plugin) // bind the plugin with the cssr instance\nconst {\n  cB, cE, cM\n} = plugin\n\nconst style = cB(\n  'container',\n  [\n    cE(\n      'left, right', \n      {\n        width: '50%'\n      }\n    ),\n    cM(\n      'dark', \n      [\n        cE(\n          'left, right',\n          {\n            backgroundColor: 'black'\n          }\n        )\n      ]\n    )\n  ]\n)\n\n/** use it as string */\nconsole.log(style.render())\n/**\n * or mount on document.head\n * the following lines only works in browser, don't call them in node.js\n */\nstyle.mount()\n// ...\nstyle.unmount()\n```\n```css\n.c-container .c-container__left, .c-container .c-container__right {\n  width: 50%;\n}\n\n.c-container.c-container--dark .c-container__left, .c-container.c-container--dark .c-container__right {\n  background-color: black;\n}\n```\n\n## Packages\n|Name|Cov|\n|-|-|\n|css-render|[![codecov](https://codecov.io/gh/07akioni/css-render/branch/master/graph/badge.svg?token=28OJZAHLK4\u0026flag=css-render)](https://codecov.io/gh/07akioni/css-render)|\n|@css-render/plugin-bem| [![codecov](https://codecov.io/gh/07akioni/css-render/branch/master/graph/badge.svg?token=28OJZAHLK4\u0026flag=plugin-bem)](https://codecov.io/gh/07akioni/css-render)|\n|vue3-ssr| [![codecov](https://codecov.io/gh/07akioni/css-render/branch/master/graph/badge.svg?token=28OJZAHLK4\u0026flag=vue3-ssr)](https://codecov.io/gh/07akioni/css-render)|","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F07akioni%2Fcss-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F07akioni%2Fcss-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F07akioni%2Fcss-render/lists"}