A stylematic wrapper for React
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.travis.yml
LICENSE
README.md
index.js
package.json

README.md

react-stylematic

build status dependencies status npm version

A stylematic wrapper for React

Quick example

/** @jsx createElement */

const createElement = require('react-stylematic'); 

const App = () => (
  <div style={{
    color: 'red',
    background: 'linear-gradient(#fff, #eee)',
    ':hover': {
      color: ['rgba(0,75,255,0.8)', 'blue']
    }
  }}>
    Hello World!
  </div>
);

Rendered HTML

<div class="_style_4e1hWd" style="color: red">Hello World!</div>

Automatically injected CSS into document <head>

<style data-styletron>
._style_4e1hWd {
  background: -webkit-linear-gradient(#fff, #eee) !important;
  background: -moz-linear-gradient(#fff, #eee) !important;
  background: linear-gradient(#fff, #eee) !important
}
._style_4e1hWd:hover {
  color: blue !important;
  color: rgba(0,75,255,0.8) !important
}
</style>

Extraction of CSS on server

const React = require('react');
const ReactDOM = require('react-dom/server');
const {renderStatic} = require('styletron-server');

const App = require('./app');

const {html, css, hydrationSrc} = renderStatic(() => {
  return ReactDOM.renderToString(<App/>);
});