{"id":17659742,"url":"https://github.com/raphamorim/mugiwara","last_synced_at":"2025-05-07T15:04:53.193Z","repository":{"id":57304790,"uuid":"125281327","full_name":"raphamorim/mugiwara","owner":"raphamorim","description":"fast minimal CSS-in-JS created to reduce size of CSS injected","archived":false,"fork":false,"pushed_at":"2018-09-04T02:38:17.000Z","size":39,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T15:04:43.790Z","etag":null,"topics":["css-in-js","mugiwara","perfomance","react-css-modules","styled-components"],"latest_commit_sha":null,"homepage":"http://npmjs.com/package/mugiwara","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/raphamorim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-14T22:25:42.000Z","updated_at":"2024-11-17T10:39:54.000Z","dependencies_parsed_at":"2022-09-20T20:02:25.042Z","dependency_job_id":null,"html_url":"https://github.com/raphamorim/mugiwara","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fmugiwara","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fmugiwara/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fmugiwara/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fmugiwara/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raphamorim","download_url":"https://codeload.github.com/raphamorim/mugiwara/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252902615,"owners_count":21822261,"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-in-js","mugiwara","perfomance","react-css-modules","styled-components"],"created_at":"2024-10-23T16:08:09.968Z","updated_at":"2025-05-07T15:04:53.139Z","avatar_url":"https://github.com/raphamorim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 dir='rtl' align='right'\u003eMugiwara\u003c/h2\u003e\n\u003cp dir='rtl' align='right'\u003e麦わら帽子\u003c/p\u003e\n\n\u003e Mugiwara is a fast minimal CSS-in-JS created to reduce size of CSS injected\n\nMugiwara uses similar [Virtual CSS concept to reduce bundle](https://ryantsao.com/blog/virtual-css-with-styletron) however using a preemption algorithm behind, called as [Chain CSS](#how-chain-css-works). On `1.2KB` (gzipped).\n\n[![CircleCI branch](https://img.shields.io/circleci/project/github/raphamorim/mugiwara/master.svg?style=for-the-badge)](https://circleci.com/gh/raphamorim/mugiwara) [![NPM Version](https://img.shields.io/npm/v/mugiwara.svg?style=for-the-badge)](https://npmjs.com/package/mugiwara)\n\n**Status**: Under development.\n\n#### Benchmark\n\n```bash\ncxs x 31,955 ops/sec ±5.10% (85 runs sampled)\nfela x 29,790 ops/sec ±0.93% (85 runs sampled)\nmugiwara x 33,806 ops/sec ±0.96% (86 runs sampled)\nglamor x 25,009 ops/sec ±1.34% (85 runs sampled)\nFastest is mugiwara\n✨  Done in 27.38s.\n```\n\n#### Principles:\n\n- Transform declarations in Shallow way\n\nBrowsers read selectors from right to left. The deeper the selectors are, the longer it takes for the browser to render and re-render the elements those selectors are applied to. For complex DOMs that reflow often, short selectors can also cut down on jank. \n\nGood to read: [Efficiently Rendering CSS](https://css-tricks.com/efficiently-rendering-css/)\n\n- Prehemption\n\nFeature not available yet, soon more details.\n\n- Remove redundances\n\nGood to read: [Remove Unused CSS to Reduce the Size of your Stylesheets](https://www.labnol.org/internet/remove-unused-css/28635/)\n\n#### How Chain CSS works?\n\nAlgorithm still in development, here's a preview of first step:\n\n```jsx\n\nElement A -\u003e {color: 'blue', padding: '10px', fontFamily: 'Helvetica'}\nElement B -\u003e {color: 'red', borderRight: '1px solid #333'}\nElement C -\u003e {padding: 10, fontFamily: 'Helvetica'}\n\nResult:\n\n.A { \n  color: blue \n}\n.A, .C { \n  padding: '10px', \n  fontFamily: 'Helvetica' \n}\n.B { \n  border-right: '1px solid #333' \n}\n\n````\n\n## Installing\n\n```bash\nyarn add mugiwara\n```\n\n## Using it\n\nExample with ReactJS:\n\n```jsx\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { createClass, createStyles } from 'mugiwara'\n\nconst className = createClass({\n  padding: 32,\n  backgroundColor: 'green'\n})\n\nconst Box = (props) =\u003e \u003cdiv {...props} className={className} /\u003e\n\ncreateStyles()\n\nrender(Box, document.querySelector('#root'))\n```\n\nAlso valid API (still in draft):\n\n```jsx\nconst className = createClass(`\n  position: 'abolute',\n  padding: 32px,\n  backgroundColor: 'green'\n\n  \u0026 div {\n    width: 100px;\n  }\n`)\n```\n\nExample with ReactJS Server side-render:\n\n```jsx\nimport React from 'react'\nimport ReactDOMServer from 'react-dom/server'\nimport { shallowStyles } from 'mugiwara'\nimport App from './App'\n\nconst renderedApp = ReactDOMServer.renderToString(\u003cApp /\u003e)\nconst staticPage = `\n\u003chtml\u003e\n  \u003cstyle\u003e${shallowStyles()}\u003c/style\u003e\n  ${renderedApp}\n\u003c/html\u003e\n`\n\nconsole.log(staticPage)\n/*\n\u003chtml\u003e\n  \u003cstyle\u003e.app{position:absolute;display:flex;margin:0 auto;}.heading{font-family:Helvetica, arial;}\u003c/style\u003e\n  \u003cdiv class=\"app\" data-reactroot=\"\"\u003e\u003cdiv class=\"heading\"\u003eMyApp\u003c/div\u003e\u003c/div\u003e\n\u003c/html\u003e\n*/\n```\n\n## 1.x ROADMAP\n\n- [ ] Support pseudo-selectors\n- [ ] Support to prefix\n- [ ] Check similar properties (e.g: `#FFF`, `white`) and keep one\n- [ ] Support MediaQueries\n- [x] Support Server Side Renderer\n- [ ] Cache features\n- [ ] Support React Native Style (using [native-css](https://github.com/raphamorim/native-css))\n\n## Reference\n\n- https://www.creativebloq.com/how-to/5-tips-for-super-fast-css\n- https://ryantsao.com/blog/virtual-css-with-styletron\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Fmugiwara","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraphamorim%2Fmugiwara","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Fmugiwara/lists"}