JavaScript StyleSheets

jss.js

/**
 * JSS
 * Author: Jared Abbott
 * Copyright 2015 Jared Abbott
 * Distributed under the MIT license
 * 
 * @param {Object}
 */
var _jss = function(jss, combinator) {
    var _toString = Function.prototype.call.bind(Object.prototype.toString);
    var _toArray = Function.prototype.call.bind(Array.prototype.slice);
    var selector;
    var style;
  
    // Loop through css object containing multiple styles
    if (typeof jss === 'object') {
        for (selector in jss) {
            var query = combinator || selector;
            elements = _toArray(document.querySelectorAll(query));
            var i = elements.length || 1;
            while ((i -= 1) > -1) {
                if (jss.hasOwnProperty(selector)) {
                    var styles = jss[selector];
                    for (style in styles) {
                        if (styles.hasOwnProperty(style)) {
                            if (typeof styles[style] === 'object') {
                                var combinator = (!!combinator) ? (combinator + ' ' + style) : (selector + ' ' + style);
                                var newObj = {
                                    style: styles[style]
                                };
                                _jss(newObj, combinator);
                            } else {
                                var prop = styles[style];
                                elements[i].style[style] = prop;
                            }
                        }
                    }
                }
            }
        }
    } else {
        throw "Argument failed. Invalid parameter.";
    }
};

/*

// Styles
var jssObj = {
  '#item1': {
    'background': 'red',
    'color': 'white',
    'font-family': 'sans-serif',
    'font-size': '3em',
    'text-align': 'right',
    'transform': 'skewX(25deg)',
    'transform': 'skewY(25deg)'
  },
  '#item2': {
    'background': 'blue',
    'color': 'white',
    'font-family': 'sans-serif',
    'font-size': '3em',
    'text-align': 'left',
    'transform': 'skewX(-25deg)',
    'transform': 'skewY(-25deg)',
    '#item-child': {
      'background': 'orange',
    }
  }
};

// Initialize
_jss(jssObj);

*/