Old JSS React Wrapper

jssSheet.js

'use strict';

var _ = require('lodash');

// JSS styling
var jss = require('jss');

// Order matters!
// https://github.com/jsstyles/jss-camel-case/issues/1
jss.use(require('jss-extend'));
jss.use(require('jss-nested'));
jss.use(require('jss-camel-case'));
jss.use(require('jss-vendor-prefixer'));

var jssReact = require('react-jss');

module.exports = (rules, options) => {
    var out = jssReact(rules, options);

    // Add improved syntax
    out.css = function() {
        var classes = (this.sheet || {}).classes || {};

        function stringToClass(value) {
            return classes[value] || value;
        }

        function objectToClasses(value) {
            return _.chain(value).pick(_.identity).keys().map(stringToClass).value().join(' ');
        }

        return _.map(Array.prototype.slice.call(arguments), function(value) {
            if (_.isPlainObject(value))
            {
                return objectToClasses(value);
            }

            if (_.isString(value))
            {
                return stringToClass(value);
            }

            return '';
        }).join(' ');
    };

    return out;
}