https://github.com/michalkvasnicak/stylo
Stylo is painless approach for styling React components.
https://github.com/michalkvasnicak/stylo
Last synced: 23 days ago
JSON representation
Stylo is painless approach for styling React components.
- Host: GitHub
- URL: https://github.com/michalkvasnicak/stylo
- Owner: michalkvasnicak
- License: mit
- Created: 2015-06-29T14:37:29.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-09-26T17:29:06.000Z (over 9 years ago)
- Last Synced: 2025-03-09T16:47:38.438Z (about 2 months ago)
- Language: JavaScript
- Size: 234 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Stylo
[](https://circleci.com/gh/michalkvasnicak/stylo)
Stylo is painless approach for styling [React](https://facebook.github.io/react/) components.
It can be used with syntax similar to `StyleSheet.create` from [React Native](http://facebook.github.io/react-native/docs/stylesheet.html#content) or [Radium](https://github.com/FormidableLabs/radium)/[React-Style](https://github.com/js-next/react-style) syntax.
Stylo works server and client side. You just need to render `StyleSheetRegistry` to string on server and `dehydrate/rehydrate` it see Usage.
**This library is experimental and it not tested in production!! Use at your own risk! Pull requests are welcome**
## Features
* **Native CSS styling (no inline styles or javscript handlers for :hover, ...!)**: used styles are transformed to CSS and injected to Stylesheet in browser or can be turned to string on server side.
* **Can be used with existing CSS**: CSS classes are prepended to existing class names of component
* **CSS transformation can be implemented**: you can autoprefix or do whatever you want with generated CSS rules, just use `new StyleSheetRegistry(function(ruleString) { return ruleString; })`, it will be called before rule is inserted.
## Installation
`npm install stylo`
## Usage
First we need to make our application wrapper component to pass `StyleSheetRegistry` to child context. To make this possible, you can use `StyloWrapperMixin`.
```js
var Stylo = require("stylo");
var React = require("react");
var App = require("./app"); // your root app component
var serialize = require("serialize-javascript");
var Wrapper = React.createClass({
mixins: [Stylo.StyloWrapperMixin],
render: function() {
return ();
}
});
// server.js
var registry = new Stylo.StyleSheetRegistry; // this should be created on every request! so every request has isolated styles
var renderedApp = React.renderToString();
// this needs to be done, so registry can generate right css classes, etc
// it has to be called after app is rendered but before static markup is rendered otherwise registry will be empty
var state = "window.__serializedRegistryState = " + serialize(registry.dehydrate) + ";";
React.renderToStaticMarkup(
load your app js
);
// or using element() method
React.renderToStaticMarkup(
{registry.element()}
load your app js
)
// app.js
var Stylo = require("stylo");
var React = require("react");
var AppComponent = require("./AppComponent");
var Wrapper = React.createClass({
mixins: [Stylo.StyloWrapperMixin],
render: function() {
return ();
}
});
var dehydratedState = window.__serializedRegistryState;
var registry = new Stylo.StyleSheetRegistry;
// rehydrate registry
registry.rehydrate(dehydratedState);
React.render(, document.getElementById("content"));
```
### With syntax similar to [React Native](http://facebook.github.io/react-native/docs/stylesheet.html#content)
```js
var React = require("react");
var StyleSheet = require("stylo").StyleSheet;
var styles = StyleSheet.create({
base: {
fontSize: "10px",
":hover": {
fontSize: "20px"
},
"@keyframes resize": {
"10%": { /* ... */}
}
},
another: {
color: #000
},
"@media screen": {
base: {
fontSize: "20px"
}
}
});
module.exports = React.createClass({
render: function() {
return (
dynamic styles
uses only styles.another and styles.base
);
}
});
```
### With simple javascript objects (no nested styles)
```js
var React = require("react");
var StyleSheet = require("stylo").StyleSheet;
var styles = StyleSheet.create({
fontSize: "10px",
":hover": {
fontSize: "20px"
}
});
module.exports = React.createClass({
render: function() {
return (
dynamic styles
uses only styles and styles2
);
}
});
```
## Contributing
Thanks for your interest! Pull requests are welcome but provide tests for them please.
This library is experimental and tests are not exhaustive enough to uncover all bugs.
## TODO
* pass simple javascript objects directly to inline styles?
* gh-pages
* creating stylesheet from LESS syntax ?
* creating stylesheet from CSS syntax
* add build (now it is just part of workflow, so it is build by application which is using it)