{"id":13572887,"url":"https://github.com/tuchk4/rockey","last_synced_at":"2025-04-14T09:50:29.076Z","repository":{"id":57355555,"uuid":"85680025","full_name":"tuchk4/rockey","owner":"tuchk4","description":"Stressless CSS for components using JS. Write Component Based CSS with functional mixins.","archived":false,"fork":false,"pushed_at":"2019-02-15T10:22:12.000Z","size":522,"stargazers_count":98,"open_issues_count":3,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-29T11:13:32.351Z","etag":null,"topics":["css","css-in-js","css-rules","dynamic-css","react"],"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/tuchk4.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-03-21T09:00:02.000Z","updated_at":"2023-09-11T04:06:04.000Z","dependencies_parsed_at":"2022-09-26T16:31:42.747Z","dependency_job_id":null,"html_url":"https://github.com/tuchk4/rockey","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuchk4%2Frockey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuchk4%2Frockey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuchk4%2Frockey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuchk4%2Frockey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tuchk4","download_url":"https://codeload.github.com/tuchk4/rockey/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248859342,"owners_count":21173334,"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","css-rules","dynamic-css","react"],"created_at":"2024-08-01T15:00:23.282Z","updated_at":"2025-04-14T09:50:29.039Z","avatar_url":"https://github.com/tuchk4.png","language":"JavaScript","readme":"# Rockey \u003csup\u003eComponent Based CSS in JS\u003c/sup\u003e\n\nStressless CSS for components using JS. Write Component Based CSS with functional mixins.\n\n- \u003cimg src=\"http://i.imgur.com/ULoeOL4.png\" height=\"16\"/\u003e [CSS in JS. Rockey](https://medium.com/@tuchk4/css-in-js-rockey-890ebbbd16e7)\n- [SUMMARY](https://github.com/tuchk4/rockey/blob/master/SUMMARY.md) - here I tried to collect all features and differences with other libs.\n- [MOTIVATION](https://github.com/tuchk4/rockey/blob/master/MOTIVATION.md)\n\n\n```bash\nnpm install --save rockey\n\n# For React applications:\nnpm install --save rockey-react\n```\n\n![Rockey tests](https://api.travis-ci.org/tuchk4/rockey.svg?branch=master)\n\n---\n\n## Documentation\n\n- [rockey](https://github.com/tuchk4/rockey/tree/master/packages/rockey)\n- [rockey-css-parse](https://github.com/tuchk4/rockey/tree/master/packages/rockey-css-parse)\n- [rockey-react](https://github.com/tuchk4/rockey/tree/master/packages/rockey-react)\n- [rockey-css-parse REPL](https://tuchk4.github.io/rockey-css-parse-repl/)\n\n\n### Why do we need CSS in JS?\n\nFirstly, CSS in JS approach is the vanilla JS. \n\nCSS in JS approach — is native JS. You don’t need additional tools to use or build it.\n\n- Developer Experience!\n- For components libraries. Or when going to share components between applications.\n- More simpler application configuration\n- There is no custom loaders\n- More cleaner file structure\n- Easier to run tests\n- DRY\n\nMore details explained at Medium Post - \u003cimg src=\"http://i.imgur.com/ULoeOL4.png\" height=\"16\"/\u003e [CSS in JS. Rockey](https://medium.com/@tuchk4/css-in-js-rockey-890ebbbd16e7)\n\n## Features and Advantages\n\n### Framework Agnostic\n\nRockey could be used in any application.\n\n### Small Size\n\n- `rockey` ![rockey gzip size](http://img.badgesize.io/https://unpkg.com/rockey@0.0.14/rockey.min.js?compression=gzip\u0026label=gzip%20size)\n- `rockey-react` ![rockey-react gzip size](http://img.badgesize.io/https://unpkg.com/rockey-react@0.0.14/rockey-react.min.js?compression=gzip\u0026label=gzip%20size)\n- `rockey-css-parse` ![rockey-css-parse gzip size](http://img.badgesize.io/https://unpkg.com/rockey-css-parse@0.0.14/rockey-react.min.js?compression=gzip\u0026label=rockey%20css%20parse%20gzip)\n\n`npm run minify` output:\n\n![rockey and rockey-react size](https://monosnap.com/file/1vgaMkwKiYrFjproYTXr1mT3RgkHhT.png)\n\n\n### Uniq Class Names\n\nEach time generate uniq class names with randomly generated hash. Same as [css-modules](https://github.com/css-modules/css-modules).\n\n### Component based selectors\n\nWrite CSS according your components structure. Use real components names for CSS rules instead of classes.\nMeans that if you have component Card  — use its name as CSS selector. If you have component PrimaryCard — use its name as CSS selector. Use nested selectors according to components structure.\n\nLive demo: [Card example](https://www.webpackbin.com/bins/-KfkcTYPzpyglHKfmuKh)\n\n### Readable CSS Class Names\n\nEach generated classname is clear and readable. The same components renders with same class names. It is very useful and сompatible with browser dev tools — change styles for one component will always apply changes for the rest of the same components.\n\n![Generated class names](https://cdn-images-1.medium.com/max/1600/1*Q0qkkBt0xYt0LXjBy-2fzg.png)\n\n### ~100% CSS Syntax\n\n```css\nCard {\n  CardHeader, CardFooter {\n    padding: 15px;\n  }\n\n  CardBody {\n    + Button {\n      padding-left: 15px;\n    }\n  }\n\n  :hover {\n    border: 1px solid #000;\n\n    CardHeader {\n      background: yellow;\n    }\n  }  \n\n  CardFooter {\n    background: purple;\n\n    @media (max-width: 600px) {\n      display: none\n    }\n  }  \n}\n```\n\nThere is no needs to import specific function to render *@media*, *keyframes*, *font-faces* or pseudo classes like *:hover* or *::after*. Support nested and multiple selectors.\n\nLive demo with complex selectors: [Material TextField](https://www.webpackbin.com/bins/-Ki-KJQAQOJEmTECJUoE)\n\n### Fast. And Will be More Faster!\n\nRendering CSS string, generating CSS rules and inserting them into DOM is really fast. There is example React application with implemented different approaches: fela / jss / glamor / styled-components / rockey.\n\n- Live: [tuchk4.github.io/css-in-js-app](https://tuchk4.github.io/css-in-js-app/#/)\n- Github repo: [github.com/tuchk4/css-in-js-app](https://github.com/tuchk4/css-in-js-app)\n\n#### Benchmark: parsing and generating CSS\n\n```bash\nnpm run best-results -- --size 10000\n```\n\n- Rockey Parse Optimized — 3.325sec\n- Rockey Parse — 3.841sec\n- [Postcss](https://github.com/postcss/postcss) with [Nested Plugin](https://github.com/postcss/postcss-nested) 14.204sec\n- [Postcss Safe Parser](https://github.com/postcss/postcss-safe-parser) with [Nested Plugin](https://github.com/postcss/postcss-nested) — 16.404sec\n\n\u003e Note that rockey and postcss were developed for different tasks. Rockey parser configured for specific syntax and will never be able to replace postcss\n\n#### Benchmark: [A-gambit/CSS-IN-JS-Benchmarks](https://github.com/A-gambit/CSS-IN-JS-Benchmarks)\n\nResults could be found [here](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md).\n\n### Class Names\n\nrockey uses separated CSS classes for each rule and for each mixin. That is why it is very сompatible with devtools. When change CSS values of parent component via devtools — it will be applied for all children.\n\nrockey-react example (works same as [rockey.addParent](https://github.com/tuchk4/rockey/tree/master/packages/rockey#ruleaddparent)):\n\n```js\nimport rockey from 'rockey-react';\n\nconst Button = rockey.button('Button')`\n  color: black;\n\n  ${rockey.when('LargeButton', props =\u003e props.large)`\n    font-size: 20px;\n  `}\n`;\n\nconst PrimaryButton = Button('PrimaryButton')`\n  color: blue;\n`;\n\nconst SuperButton = PrimaryButton('SuperButton')`\n  color: red;\n`;\n```\n\nInserted CSS (after component is rendered):\n\n```css\n.Button-{{ hash }} {\n  color: black;\n}\n\n.PrimaryButton-{{ hash }} {\n  color: blue;\n}\n\n.SuperButton-{{ hash }} {\n  color: red;\n}\n\n.Mixin-LargeButton-{{ hash }}.Button-{{ hash }} {\n  font-size: 20px;\n}\n```\n\nAnd for `\u003cPrimaryButton large={true}/\u003e` className prop will equal `.PrimaryButton-{{ hash }} .Button-{{ hash }} .Mixin-LargeButton-{{ hash }}`.\n\nThat is why it is very сompatible with devtools. When change CSS values of parent component via devtools — it will be applied for all children.\n\nIf prop *large* is changed to *false* - only mixin class will be removed instead of all styles re-calculating. This is another reason why rockey is fast.\n\n- Live demo: [Buttons example](https://www.webpackbin.com/bins/-KflMmHbcVU01PD6h43F)\n- Demo with anonymous components: [Anonymous Buttons example](https://www.webpackbin.com/bins/-Ki-Jk6OoMnFSFshKib6)\n\n![git how extends works](https://cdn-images-1.medium.com/max/1600/1*cOu2wXkCq6_m6RPQSkNtsA.gif)\n\n### Dynamic CSS\n\n```css\nButton {\n  color: black;\n\n  ${rockey.when('isPrimary', props =\u003e props.primary)`\n    color: blue;\n  `}\n\n  Icon {\n    margin: 5px;\n  }\n}\n```\n\nInserted CSS:\n\n```css\n.Button-{{ hash }} {\n  color: black;\n}\n\n.isPrimary-{{ hash }}.Button-{{ hash }} {\n  color: blue;\n}\n\n.Button-{{ hash }} .Icon-{{ hash }} {\n  font-size: 12px;\n}\n```\n\n### Rockey React\n\nRockey was integrated with React. There are much more feature and advanteags.\n\n- Api documentation - [rockey-react](https://github.com/tuchk4/rockey/tree/master/packages/rockey-react)\n- Features:\n  - [Flexible Rockey Higher Order Component](https://github.com/tuchk4/rockey/tree/master/packages/rockey-react#flexible-rockey-higher-order-component)\n  - [Shortcuts](https://github.com/tuchk4/rockey/tree/master/packages/rockey-react#shortcuts)\n  - [Dynamic CSS — props](https://github.com/tuchk4/rockey/tree/master/packages/rockey-react#dynamic-cssprops)\n  - [Dynamic CSS — Event Handlers](https://github.com/tuchk4/rockey/tree/master/packages/rockey-react#dynamic-csseventhandlers)\n  - [Looks](https://github.com/tuchk4/rockey/tree/master/packages/rockey-react#looks)\n  - [Recompose shortcut](https://github.com/tuchk4/rockey/tree/master/packages/rockey-react#recompose-shortcut)\n\n---\n\n## Current Disadvantages\n\nThis is a very new and young library and not all features are implemented yet.\nBut with each new release this list will be much and much shorter until there are no disadvantages :)\n\n- Does not support Server Rendering. Will be added in nearest release.\n- There is no auto-prefixer. Will be added in nearest release. Because styles are generating in realtime\nprefixes will be added only for current browser.\n- There is no CSS validation. Will be added in nearest release. Will work only if `process.NODE_ENV === 'development'`\n- There is not way to remove inserted rules. Will be added a bit later.\n- Does not support hot-reload. Will be added a bit later.\n- Does not delete unused styles from DOM. Will be added a bit later.\n\n# Examples\n\n- [Card example](https://www.webpackbin.com/bins/-KfkcTYPzpyglHKfmuKh)\n- [Warning Card example](https://www.webpackbin.com/bins/-Ki-AMdS7Q0bzkSyZ81f)\n- [Buttons example](https://www.webpackbin.com/bins/-KflMmHbcVU01PD6h43F)\n- [Button / PrimaryButton / SuccessButton with raised mixin](https://www.webpackbin.com/bins/-Ki2_Te-1y_OiIbQB5bO)\n- [Anonymous Extending: raised Button / PrimaryButton / SuccessButton](https://www.webpackbin.com/bins/-Ki0oy6hS3vdQZluouKZ)\n- [Anonymous Buttons example](https://www.webpackbin.com/bins/-Ki-Jk6OoMnFSFshKib6)\n- [Material TextField](https://www.webpackbin.com/bins/-Ki-KJQAQOJEmTECJUoE)\n- [Primary and Raised Blocks](https://www.webpackbin.com/bins/-KflpZuJTEet-ECpPpWE)\n- [Input styles for specific value](https://www.webpackbin.com/bins/-Ki22k9ewZ6gh3Rw87d-)\n- [Div background depends on mouse X and Y](https://www.webpackbin.com/bins/-Ki1G10UY-sXlden2XSS)\n- [Animated divs](https://www.webpackbin.com/bins/-KflkDbSVrccxSkAAFZq)\n- [Themed Buttons](https://www.webpackbin.com/bins/-Kflsy2FIkQy4n27qeLc)\n\n## Contribute\n\nAfter clone:\n- `npm install` - install dev dependencies\n- `lerna bootstrap`  - install dependencies for all packages\n\nIf you want to run rockey inside another applicaiton via *npm link* - run `npm run dev` at rockey to start watchers and transpile code.\n\n- `npm run minify` to minify code\n- `npm run optimize-parse` to auto optimize CSS parser *packages/rockey-css-parse/parse.js*\n- `npm run clean` - to remove all transpiled files\n- `npm run test` - run tests\n- `npm run test-dev` - run tests with watchers\n- `lerna run prepublish` - to transpile all packages.\n\nbenchmarks:\n\nFor nested CSS syntax:\n\n```\nnpm run bench:nested -- --size {{ SIZE }}\n```\n\nFor native CSS syntax:\n\n```\nnpm run bench:native -- --size {{ SIZE }}\n```\n\n- *`{{ SIZE }}`* - number of generated CSS classes to parse (1000 by default).\n\nThere is precommit hook (via [husky](http://npmjs.com/package/husky)) to run [prettier](prettier) for all staged files.\n\n\n## Feedback wanted\n\nThis is a very new approach and library and not all features are implemented yet. Feel free to [file issue or suggest feature](https://github.com/tuchk4/rockey/issues/new) to help me to make rockey better.\nOr ping me on twitter [@tuchk4](https://twitter.com/tuchk4).\n\n🎉\n\nUpcoming plans:\n\n- Make disadvantages list as shorter as possible\n- Medium post *\"Rockey Under the Hood\"*. Topic about how rockey works — how to make batch CSS rules insert, how to parse and auto optimize parser, how dynamic CSS works\n- Medium post *\"Rockey — tips and tricks\"*. There are too lot of tips and tricks that I want to share with you\n- *\"Components kit\"* — library with easiest way to develop React components using rockey and [recompose](https://github.com/acdlite/recompose)\n","funding_links":[],"categories":["库"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuchk4%2Frockey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftuchk4%2Frockey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuchk4%2Frockey/lists"}