https://github.com/jakesidsmith/react-style-sheets
Create cascading style sheets from within your React components. No more need for CSS pre/post-processors.
https://github.com/jakesidsmith/react-style-sheets
cascading-style-sheets css inline-css inline-styles react react-style-sheets reactjs style
Last synced: 3 months ago
JSON representation
Create cascading style sheets from within your React components. No more need for CSS pre/post-processors.
- Host: GitHub
- URL: https://github.com/jakesidsmith/react-style-sheets
- Owner: JakeSidSmith
- License: mit
- Created: 2016-09-02T11:40:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-26T20:31:03.000Z (about 8 years ago)
- Last Synced: 2024-04-24T16:46:22.691Z (about 1 year ago)
- Topics: cascading-style-sheets, css, inline-css, inline-styles, react, react-style-sheets, reactjs, style
- Language: JavaScript
- Homepage: https://jakesidsmith.github.io/react-style-sheets/
- Size: 461 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# React Style Sheets [](https://circleci.com/gh/JakeSidSmith/react-style-sheets)
Create cascading style sheets from within your React components
## About
React Style Sheets allows defining styles in your javascript in a similar way to React Native, but with a huge host of additional benefits
```javascript
// Define your styles
var classNames = ReactStyleSheets.createUniqueClassStyles({
myClass: {
color: 'red'
}
});
// You can then use this in your React components
Hello, World!
```
## Benefits
Unlike 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:
* Styles are only generated once, when the script is first loaded
* 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)
* No need to manually implement hover, active, etc states, or media queries in javascript
* You can still use inline styles without the need for complex extending of styles
* Easily extend / override reusable components styles by concatenating class names
* You can add global styles for all HTML elements (by tag name)
* You can create and utilize CSS keyframe animations
* You can use media queries to adjust styles on different devices
* You can use advanced selectors like hover, active, disabled, firstChild, etc
* You can use selectors for pseudo elements like before, after, and selection
* You can nest selectors
* You can easily define styles with our intuitive API (automatically adds units, joins arrays, and allows breaking up styles with nested objects)
Benefits of React Style Sheets over using CSS, and CSS pre/post-processors include
* Keep your styles, component logic, and markup in the same file
* Easily bundle styles with your component libraries
* Automatically add vendor prefixes
* Use variables and mixins (functions)
* No additional dependencies - parse and bundle your styles with your chosen javascript build tools
* Class names are unique (and obfuscated by default) preventing accidental style inheritance
* No need to invalidate CSS cache
## Examples
### Obfuscated class names
```javascript
// Define your styles
var classNames = ReactStyleSheets.createUniqueClassStyles({
myClass: {
color: 'red'
}
});
// And you end up with some classNames like the following
{
myClass: 'myClass_obfus'
}
// You can then use this in your React components
Hello, World!
```
This also generates the following style tag and appends it to the head tag
```html
.myClass_obfus {
color: red;
}
```
### Global tag styles
```javascript
ReactStyleSheets.createGlobalTagStyles({
p: {
margin: '10px auto'
}
});
```
Generates the following styles (available globally)
```html
p {
margin: 10px auto;
}
```
### Automatically add units and build up style values from arrays
```javascript
ReactStyleSheets.createGlobalTagStyles({
p: {
margin: [10, 'auto']
}
});
```
Generates the following styles
```html
p {
margin: 10px auto;
}
```
### Break up style definitions with nesting
```javascript
ReactStyleSheets.createGlobalTagStyles({
p: {
margin: {
top: 10,
bottom: 10
},
border: {
vertical: [1, 'solid', 'black'],
horizontal: 'none'
}
}
});
```
Generates the following styles
```html
p {
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: none;
border-left: none;
}
```
### Utilize CSS keyframe animations
```javascript
var animations = ReactStyleSheets.createUniqueKeyframeAnimation({
myAnimation: {
'0%': {
opacity: 0;
},
'100%': {
opacity: 1;
}
}
});
var classNames = ReactStyleSheets.createUniqueClassStyles({
myClass: {
animation: animations.myAnimation
}
})
```
### Utilize media queries
```javascript
var classNames = ReactStyleSheets.createUniqueClassStyles({
myClass: {
width: '100%',
'@media all and (min-width: 768px)': {
width: '50%'
}
}
})
```
### Extend styles easily in reusable components
```javascript
render: function () {
return (
);
}
```
### Use state selectors like hover, active, disabled, firstChild, etc
```javascript
ReactStyleSheets.createGlobalTagStyles({
a: {
textDecoration: 'none',
hover: {
textDecoration: 'underline'
}
}
});
```
### Use pseudo element selectors like before, after and selection
```javascript
ReactStyleSheets.createGlobalTagStyles({
li: {
before: {
content: '">"'
}
}
});
```
### Nest state / pseudo element selectors
```javascript
ReactStyleSheets.createGlobalTagStyles({
li: {
firstChild: {
before: {
content: '">"'
}
}
}
});
```
### Automatically prefix styles with vendor prefixes
```javascript
ReactStyleSheets.setOptions({
vendorPrefixes: {
transform: ['webkit', 'moz', 'ms', 'o']
}
});
var classNames = React.createUniqueClassStyles({
myClass: {
transform: 'rotate(45deg)'
}
});
```
Generates the following styles
```html
.myClass_obfus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
```