charliermarsh / sweet-rcss

A quick experiment in sweeting your JavaScript for use with RCSS.

sweet-rcss

An experiment in sweeting your JavaScript for use with RCSS. Built with Sweet.js and jsx-reader.

Usage

RCSS allows you to handle all of your CSS styling with pure JavaScript. The macros in this repository allow you to drop-in styles from your stylesheet (i.e., following standard CSS syntax) and compile them to RCSS declarations.

For example:

rcss bigRed {
    color: 'red';
    fontSize: '32px'
}
// ...becomes...
var bigRed = RCSS.registerClass({ color: 'red', fontSize: '32px' }).className;

LESS-style mixins are also supported through the following syntax:

rcss big {
    fontSize: '32px';
}

rcss red {
    color: 'red';
}

// bigRed implements both of the above styles
rcss bigRed {
    big;
    red;
}

The variables bound to big and red are the CSS classname that enforces their respective styles. As a more complete example, then, you might have:

var React = require('react');
var RCSS = require('rcss');

rcss bigRed {
    color: 'red';
    fontSize: '32px'
}

RCSS.injectAll();

var Component = React.createClass({
    render: function() {
        return <div className={bigRed}>
            Hello, world!
        </div>;
    }
});

License

MIT.