CSJS basics

Basic Usage

styles.js

var csjs = require('csjs');

var green = '#33aa22';

module.exports = csjs`

  .foo {
    border: 1px solid black;
    background-color: ${green};
  }

`;

CSJS relies on tagged ES6 template strings. In our case above, csjs is the tag.

component.js

var React = require('react');

var styles = require('./styles');

module.exports = React.createClass({
  render() {
    return React.DOM.div({className: styles.foo}, [
      'hello world'
    ]);
  }
});

Rendering our component will yield the following markup:

rendered html

<div class="foo_19Yy9">hello world</div>

getting the css

CSJS leaves it up to the user how the CSS should be injected into the page. It could be either extracted into a external stylesheet bundle, or dynamically embedded into the page. It is recommended that you do this automatically on a project-level basis via the csjs-injectify browserify transform or browserify plugin (coming soon). But below is an example on how to get the scoped CSS out of CSJS.

var styles = require('./styles.js');
var getCss = require('csjs/get-css');

console.log(getCss(styles));
/*
  .foo_19Yy9 {
    border: 1px solid black;
    background-color: #33aa22;
  }
*/