{"id":16383867,"url":"https://github.com/jakesidsmith/react-style-sheets","last_synced_at":"2026-05-02T20:34:47.389Z","repository":{"id":57345973,"uuid":"67217777","full_name":"JakeSidSmith/react-style-sheets","owner":"JakeSidSmith","description":"Create cascading style sheets from within your React components. No more need for CSS pre/post-processors.","archived":false,"fork":false,"pushed_at":"2017-02-26T20:31:03.000Z","size":472,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T16:46:22.691Z","etag":null,"topics":["cascading-style-sheets","css","inline-css","inline-styles","react","react-style-sheets","reactjs","style"],"latest_commit_sha":null,"homepage":"https://jakesidsmith.github.io/react-style-sheets/","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/JakeSidSmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-02T11:40:17.000Z","updated_at":"2018-03-02T03:25:19.000Z","dependencies_parsed_at":"2022-09-18T08:30:16.991Z","dependency_job_id":null,"html_url":"https://github.com/JakeSidSmith/react-style-sheets","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/JakeSidSmith%2Freact-style-sheets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Freact-style-sheets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Freact-style-sheets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Freact-style-sheets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JakeSidSmith","download_url":"https://codeload.github.com/JakeSidSmith/react-style-sheets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240106788,"owners_count":19748687,"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":["cascading-style-sheets","css","inline-css","inline-styles","react","react-style-sheets","reactjs","style"],"created_at":"2024-10-11T04:09:52.349Z","updated_at":"2025-11-11T20:02:34.658Z","avatar_url":"https://github.com/JakeSidSmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Style Sheets [![CircleCI](https://circleci.com/gh/JakeSidSmith/react-style-sheets.svg?style=svg)](https://circleci.com/gh/JakeSidSmith/react-style-sheets)\nCreate cascading style sheets from within your React components\n\n## About\n\nReact Style Sheets allows defining styles in your javascript in a similar way to React Native, but with a huge host of additional benefits\n\n```javascript\n// Define your styles\n\nvar classNames = ReactStyleSheets.createUniqueClassStyles({\n  myClass: {\n    color: 'red'\n  }\n});\n\n// You can then use this in your React components\n\n\u003cdiv className={classNames.myClass}\u003e\n  Hello, World!\n\u003c/div\u003e\n```\n\n## Benefits\n\nUnlike React Native (or libraries like [Radium](https://github.com/FormidableLabs/radium) / [React Style](https://github.com/js-next/react-style)), it has the following benefits:\n\n* Styles are only generated once, when the script is first loaded\n* The styles are not inlined, instead they are added in a style tag and either available globally, or accessed by a unique class name (see examples)\n* No need to manually implement hover, active, etc states, or media queries in javascript\n* You can still use inline styles without the need for complex extending of styles\n* Easily extend / override reusable components styles by concatenating class names\n* You can add global styles for all HTML elements (by tag name)\n* You can create and utilize CSS keyframe animations\n* You can use media queries to adjust styles on different devices\n* You can use advanced selectors like hover, active, disabled, firstChild, etc\n* You can use selectors for pseudo elements like before, after, and selection\n* You can nest selectors\n* You can easily define styles with our intuitive API (automatically adds units, joins arrays, and allows breaking up styles with nested objects)\n\nBenefits of React Style Sheets over using CSS, and CSS pre/post-processors include\n\n* Keep your styles, component logic, and markup in the same file\n* Easily bundle styles with your component libraries\n* Automatically add vendor prefixes\n* Use variables and mixins (functions)\n* No additional dependencies - parse and bundle your styles with your chosen javascript build tools\n* Class names are unique (and obfuscated by default) preventing accidental style inheritance\n* No need to invalidate CSS cache\n\n## Examples\n\n### Obfuscated class names\n\n```javascript\n// Define your styles\nvar classNames = ReactStyleSheets.createUniqueClassStyles({\n  myClass: {\n    color: 'red'\n  }\n});\n\n// And you end up with some classNames like the following\n{\n  myClass: 'myClass_obfus'\n}\n\n// You can then use this in your React components\n\u003cdiv className={classNames.myClass}\u003e\n  Hello, World!\n\u003c/div\u003e\n```\n\nThis also generates the following style tag and appends it to the head tag\n\n```html\n\u003cstyle type=\"text/css\"\u003e\n  .myClass_obfus {\n    color: red;\n  }\n\u003c/style\u003e\n```\n\n### Global tag styles\n\n```javascript\nReactStyleSheets.createGlobalTagStyles({\n  p: {\n    margin: '10px auto'\n  }\n});\n```\n\nGenerates the following styles (available globally)\n\n```html\n\u003cstyle type=\"text/css\"\u003e\n  p {\n    margin: 10px auto;\n  }\n\u003c/style\u003e\n```\n\n### Automatically add units and build up style values from arrays\n\n```javascript\nReactStyleSheets.createGlobalTagStyles({\n  p: {\n    margin: [10, 'auto']\n  }\n});\n```\n\nGenerates the following styles\n\n```html\n\u003cstyle type=\"text/css\"\u003e\n  p {\n    margin: 10px auto;\n  }\n\u003c/style\u003e\n```\n\n### Break up style definitions with nesting\n\n```javascript\nReactStyleSheets.createGlobalTagStyles({\n  p: {\n    margin: {\n      top: 10,\n      bottom: 10\n    },\n    border: {\n      vertical: [1, 'solid', 'black'],\n      horizontal: 'none'\n    }\n  }\n});\n```\n\nGenerates the following styles\n\n```html\n\u003cstyle type=\"text/css\"\u003e\n  p {\n    margin-top: 10px;\n    margin-bottom: 10px;\n    border-top: 1px solid black;\n    border-bottom: 1px solid black;\n    border-right: none;\n    border-left: none;\n  }\n\u003c/style\u003e\n```\n\n### Utilize CSS keyframe animations\n\n```javascript\nvar animations = ReactStyleSheets.createUniqueKeyframeAnimation({\n  myAnimation: {\n    '0%': {\n      opacity: 0;\n    },\n    '100%': {\n      opacity: 1;\n    }\n  }\n});\n\nvar classNames = ReactStyleSheets.createUniqueClassStyles({\n  myClass: {\n    animation: animations.myAnimation\n  }\n})\n```\n\n### Utilize media queries\n\n```javascript\nvar classNames = ReactStyleSheets.createUniqueClassStyles({\n  myClass: {\n    width: '100%',\n    '@media all and (min-width: 768px)': {\n      width: '50%'\n    }\n  }\n})\n```\n\n### Extend styles easily in reusable components\n\n```javascript\nrender: function () {\n  return (\n    \u003cdiv className={classNames.myClass + ' ' + this.props.className} /\u003e\n  );\n}\n```\n\n### Use state selectors like hover, active, disabled, firstChild, etc\n\n```javascript\nReactStyleSheets.createGlobalTagStyles({\n  a: {\n    textDecoration: 'none',\n    hover: {\n      textDecoration: 'underline'\n    }\n  }\n});\n```\n\n### Use pseudo element selectors like before, after and selection\n\n```javascript\nReactStyleSheets.createGlobalTagStyles({\n  li: {\n    before: {\n      content: '\"\u003e\"'\n    }\n  }\n});\n```\n\n### Nest state / pseudo element selectors\n\n```javascript\nReactStyleSheets.createGlobalTagStyles({\n  li: {\n    firstChild: {\n      before: {\n        content: '\"\u003e\"'\n      }\n    }\n  }\n});\n```\n\n### Automatically prefix styles with vendor prefixes\n\n```javascript\nReactStyleSheets.setOptions({\n  vendorPrefixes: {\n    transform: ['webkit', 'moz', 'ms', 'o']\n  }\n});\n\nvar classNames = React.createUniqueClassStyles({\n  myClass: {\n    transform: 'rotate(45deg)'\n  }\n});\n```\n\nGenerates the following styles\n\n```html\n\u003cstyle type=\"text/css\"\u003e\n  .myClass_obfus {\n    -webkit-transform: rotate(45deg);\n    -moz-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    -o-transform: rotate(45deg);\n    transform: rotate(45deg);\n  }\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakesidsmith%2Freact-style-sheets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjakesidsmith%2Freact-style-sheets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakesidsmith%2Freact-style-sheets/lists"}