jss - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

bower.json

 {
   "name": "jss",
   "description": "Dynamic stylesheets for web components.",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "author": {
@@ -6,0 +6,0 @@ "name": "Oleg Slobodskoi",

dist/jss.js

@@ -11,2 +11,4 @@ !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.jss=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+var hasKeyframes = /@keyframes/
+
 /**
@@ -58,2 +60,3 @@ * Rule is selector + style hash.
  *
+ * @return {Rule}
  * @api private
@@ -69,4 +72,16 @@ */
 
-var hasKeyframes = /@keyframes/
+/**
+ * Add child rule. Used by "nested" preprocessor.
+ * Stylesheet will render them separately.
+ *
+ * @return {Rule}
+ * @api private
+ */
+Rule.prototype.addChild = function (selector, style) {
+    if (!this.children) this.children = {}
+    this.children[selector] = style
 
+    return this
+}
+
 /**
@@ -130,3 +145,5 @@ * Converts the rule to css string.
 
-    if (rules) this.createRules(rules)
+    for (var key in rules) {
+        this.createRules(key, rules[key])
+    }
 }
@@ -145,6 +162,3 @@
 
-    if (!this.text) {
-        this.text = this.toString()
-        this.element.innerHTML = '\n' + this.text + '\n'
-    }
+    if (!this.text) this.deploy()
 
@@ -158,2 +172,15 @@ document.head.appendChild(this.element)
 /**
+ * Stringify and inject the rules.
+ *
+ * @return {Stylesheet}
+ * @api private
+ */
+Stylesheet.prototype.deploy = function () {
+    this.text = this.toString()
+    this.element.innerHTML = '\n' + this.text + '\n'
+
+    return this
+}
+
+/**
  * Remove stylesheet element from render tree.
@@ -183,7 +210,16 @@ *
 Stylesheet.prototype.addRule = function (key, style) {
-    var rule = this.createRule(key, style)
-    var sheet = this.element.sheet
-    sheet.insertRule(rule.toString(), sheet.cssRules.length)
+    var rules = this.createRules(key, style)
 
-    return rule
+    // Don't insert rule directly if there is no stringified version yet.
+    // It will be inserted all together when .attach is called.
+    if (this.text) {
+        var sheet = this.element.sheet
+        for (var i = 0; i < rules.length; i++) {
+            sheet.insertRule(rules[i].toString(), sheet.cssRules.length)
+        }
+    } else {
+        this.deploy()
+    }
+
+    return rules
 }
@@ -240,10 +276,14 @@
  * @param {Object} style property/value hash
- * @return {Rule}
+ * @return {Array} rule can contain child rules
  * @api private
  */
-Stylesheet.prototype.createRule = function (key, style) {
+Stylesheet.prototype.createRules = function (key, style) {
+    var rules = []
     var selector, name
+
     if (this.named) name = key
     else selector = key
+
     var rule = new Rule(selector, style, this)
+    rules.push(rule)
     this.rules[name || rule.selector] = rule
@@ -253,18 +293,7 @@ if (this.named) this.classes[name] = rule.className
 
-    return rule
-}
-
-/**
- * Create rules, will not render after stylesheet was rendered the first time.
- *
- * @param {Object} rules key:style hash.
- * @return {Stylesheet} this
- * @api private
- */
-Stylesheet.prototype.createRules = function (rules) {
-    for (var key in rules) {
-        this.createRule(key, rules[key])
+    for (key in rule.children) {
+        rules.push(this.createRules(key, rule.children[key]))
     }
 
-    return this
+    return rules
 }
@@ -339,3 +368,3 @@
 exports.createRule = function (selector, style) {
-    return new Rule(selector, style)
+    return new Rule(selector, style).runPreprocessors()
 }
@@ -385,3 +414,3 @@
 
-var Rule = require('../Rule')
+var regExp = /&/gi
 
@@ -400,4 +429,4 @@ /**
         if (prop[0] == '&') {
-            var selector = prop.replace(/&/gi, rule.selector)
-            stylesheet.rules[selector] = new Rule(selector, style[prop], stylesheet)
+            var selector = prop.replace(regExp, rule.selector)
+            rule.addChild(selector, style[prop])
             delete style[prop]
@@ -408,3 +437,3 @@ }
 
-},{"../Rule":2}],7:[function(require,module,exports){
+},{}],7:[function(require,module,exports){
 'use strict'
@@ -435,3 +464,3 @@
 var camelize = (function () {
-    var regexp = /[-\s]+(.)?/g
+    var regExp = /[-\s]+(.)?/g
 
@@ -443,3 +472,3 @@ function toUpper(match, c) {
     return function(str) {
-        return str.replace(regexp, toUpper)
+        return str.replace(regExp, toUpper)
     }
@@ -457,3 +486,2 @@ }())
 module.exports = function (rule) {
-    var stylesheet = rule.stylesheet
     var style = rule.style
@@ -460,0 +488,0 @@

dist/jss.min.js

@@ -1,2 +0,2 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.jss=e()}}(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=require("./lib/index")},{"./lib/index":4}],2:[function(require,module,exports){"use strict";var uid=0;var processors=[];function Rule(selector,style,stylesheet){if(typeof selector=="object"){stylesheet=style;style=selector;selector=null}if(selector){this.selector=selector}else{this.className=Rule.NAMESPACE_PREFIX+"-"+uid;uid++;this.selector="."+this.className}this.stylesheet=stylesheet;this.style=style}module.exports=Rule;Rule.NAMESPACE_PREFIX="jss";Rule.addPreprocessor=function(fn){processors.push(fn);return processors};Rule.prototype.runPreprocessors=function(){for(var i=0;i<processors.length;i++){processors[i](this)}return this};var hasKeyframes=/@keyframes/;Rule.prototype.toString=function(){var isKeyframe=hasKeyframes.test(this.selector);var style=this.style;var str=this.selector+" {";for(var prop in style){var value=style[prop];if(typeof value=="object"){var valueStr="{";for(var prop2 in value){valueStr+="\n    "+prop2+": "+value[prop2]+";"}valueStr+="\n  }";value=valueStr}else{value+=";"}str+="\n  "+prop+(isKeyframe?" ":": ")+value}str+="\n}";return str}},{}],3:[function(require,module,exports){"use strict";var Rule=require("./Rule");function Stylesheet(rules,named,attributes){if(typeof named=="object"){attributes=named;named=false}this.element=null;this.attached=false;this.named=named||false;this.attributes=attributes;this.rules={};this.classes={};this.text="";this.element=this.createElement();if(rules)this.createRules(rules)}module.exports=Stylesheet;Stylesheet.prototype.attach=function(){if(this.attached)return this;if(!this.text){this.text=this.toString();this.element.innerHTML="\n"+this.text+"\n"}document.head.appendChild(this.element);this.attached=true;return this};Stylesheet.prototype.detach=function(){if(!this.attached)return this;this.element.parentNode.removeChild(this.element);this.attached=false;return this};Stylesheet.prototype.addRule=function(key,style){var rule=this.createRule(key,style);var sheet=this.element.sheet;sheet.insertRule(rule.toString(),sheet.cssRules.length);return rule};Stylesheet.prototype.addRules=function(rules){for(var key in rules){this.addRule(key,rules[key])}return this};Stylesheet.prototype.getRule=function(key){return this.rules[key]};Stylesheet.prototype.toString=function(){var str="";var rules=this.rules;for(var key in rules){if(str)str+="\n";str+=rules[key].toString()}return str};Stylesheet.prototype.createRule=function(key,style){var selector,name;if(this.named)name=key;else selector=key;var rule=new Rule(selector,style,this);this.rules[name||rule.selector]=rule;if(this.named)this.classes[name]=rule.className;rule.runPreprocessors();return rule};Stylesheet.prototype.createRules=function(rules){for(var key in rules){this.createRule(key,rules[key])}return this};Stylesheet.prototype.createElement=function(){var el=document.createElement("style");if(this.attributes){for(var name in this.attributes){el.setAttribute(name,this.attributes[name])}}return el}},{"./Rule":2}],4:[function(require,module,exports){/**
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.jss=e()}}(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=require("./lib/index")},{"./lib/index":4}],2:[function(require,module,exports){"use strict";var uid=0;var processors=[];var hasKeyframes=/@keyframes/;function Rule(selector,style,stylesheet){if(typeof selector=="object"){stylesheet=style;style=selector;selector=null}if(selector){this.selector=selector}else{this.className=Rule.NAMESPACE_PREFIX+"-"+uid;uid++;this.selector="."+this.className}this.stylesheet=stylesheet;this.style=style}module.exports=Rule;Rule.NAMESPACE_PREFIX="jss";Rule.addPreprocessor=function(fn){processors.push(fn);return processors};Rule.prototype.runPreprocessors=function(){for(var i=0;i<processors.length;i++){processors[i](this)}return this};Rule.prototype.addChild=function(selector,style){if(!this.children)this.children={};this.children[selector]=style;return this};Rule.prototype.toString=function(){var isKeyframe=hasKeyframes.test(this.selector);var style=this.style;var str=this.selector+" {";for(var prop in style){var value=style[prop];if(typeof value=="object"){var valueStr="{";for(var prop2 in value){valueStr+="\n    "+prop2+": "+value[prop2]+";"}valueStr+="\n  }";value=valueStr}else{value+=";"}str+="\n  "+prop+(isKeyframe?" ":": ")+value}str+="\n}";return str}},{}],3:[function(require,module,exports){"use strict";var Rule=require("./Rule");function Stylesheet(rules,named,attributes){if(typeof named=="object"){attributes=named;named=false}this.element=null;this.attached=false;this.named=named||false;this.attributes=attributes;this.rules={};this.classes={};this.text="";this.element=this.createElement();for(var key in rules){this.createRules(key,rules[key])}}module.exports=Stylesheet;Stylesheet.prototype.attach=function(){if(this.attached)return this;if(!this.text)this.deploy();document.head.appendChild(this.element);this.attached=true;return this};Stylesheet.prototype.deploy=function(){this.text=this.toString();this.element.innerHTML="\n"+this.text+"\n";return this};Stylesheet.prototype.detach=function(){if(!this.attached)return this;this.element.parentNode.removeChild(this.element);this.attached=false;return this};Stylesheet.prototype.addRule=function(key,style){var rules=this.createRules(key,style);if(this.text){var sheet=this.element.sheet;for(var i=0;i<rules.length;i++){sheet.insertRule(rules[i].toString(),sheet.cssRules.length)}}else{this.deploy()}return rules};Stylesheet.prototype.addRules=function(rules){for(var key in rules){this.addRule(key,rules[key])}return this};Stylesheet.prototype.getRule=function(key){return this.rules[key]};Stylesheet.prototype.toString=function(){var str="";var rules=this.rules;for(var key in rules){if(str)str+="\n";str+=rules[key].toString()}return str};Stylesheet.prototype.createRules=function(key,style){var rules=[];var selector,name;if(this.named)name=key;else selector=key;var rule=new Rule(selector,style,this);rules.push(rule);this.rules[name||rule.selector]=rule;if(this.named)this.classes[name]=rule.className;rule.runPreprocessors();for(key in rule.children){rules.push(this.createRules(key,rule.children[key]))}return rules};Stylesheet.prototype.createElement=function(){var el=document.createElement("style");if(this.attributes){for(var name in this.attributes){el.setAttribute(name,this.attributes[name])}}return el}},{"./Rule":2}],4:[function(require,module,exports){/**
  * Stylesheets written in javascript.
@@ -8,2 +8,2 @@ *
  */
-"use strict";var Stylesheet=require("./Stylesheet");var Rule=require("./Rule");[require("./processors/nested"),require("./processors/extend"),require("./processors/vendorPrefixer")].forEach(Rule.addPreprocessor);exports.Stylesheet=Stylesheet;exports.Rule=Rule;exports.vendorPrefix=require("./vendorPrefix");exports.createStylesheet=function(rules,named,attributes){return new Stylesheet(rules,named,attributes)};exports.createRule=function(selector,style){return new Rule(selector,style)}},{"./Rule":2,"./Stylesheet":3,"./processors/extend":5,"./processors/nested":6,"./processors/vendorPrefixer":7,"./vendorPrefix":8}],5:[function(require,module,exports){"use strict";var toString=Object.prototype.toString;module.exports=function(rule){var style=rule.style;if(!style||!style.extend)return;var newStyle={};(function extend(style){if(toString.call(style.extend)=="[object Array]"){for(var i=0;i<style.extend.length;i++){extend(style.extend[i])}}else{for(var prop in style.extend){if(prop=="extend")extend(style.extend.extend);else newStyle[prop]=style.extend[prop]}}for(var prop in style){if(prop!="extend")newStyle[prop]=style[prop]}})(style);rule.style=newStyle}},{}],6:[function(require,module,exports){"use strict";var Rule=require("../Rule");module.exports=function(rule){var stylesheet=rule.stylesheet;var style=rule.style;for(var prop in style){if(prop[0]=="&"){var selector=prop.replace(/&/gi,rule.selector);stylesheet.rules[selector]=new Rule(selector,style[prop],stylesheet);delete style[prop]}}}},{"../Rule":2}],7:[function(require,module,exports){"use strict";var jss=require("..");var cache={};var p=document.createElement("p");(function(){var computed=window.getComputedStyle(document.documentElement,"");for(var key in computed){cache[computed[key]]=false}})();var camelize=function(){var regexp=/[-\s]+(.)?/g;function toUpper(match,c){return c?c.toUpperCase():""}return function(str){return str.replace(regexp,toUpper)}}();module.exports=function(rule){var stylesheet=rule.stylesheet;var style=rule.style;for(var prop in style){if(cache[prop]==null){var camelized=jss.vendorPrefix.js+camelize("-"+prop);var dasherized=jss.vendorPrefix.css+prop;cache[prop]=camelized in p.style?dasherized:false}if(cache[prop]){style[cache[prop]]=style[prop];delete style[prop]}}}},{"..":4}],8:[function(require,module,exports){"use strict";var jsCssMap={Webkit:"-webkit-",Moz:"-moz-",ms:"-ms-",O:"-o-"};var style=document.createElement("p").style;var testProp="Transform";for(var js in jsCssMap){if(js+testProp in style){exports.js=js;exports.css=jsCssMap[js];break}}},{}]},{},[1])(1)});
+"use strict";var Stylesheet=require("./Stylesheet");var Rule=require("./Rule");[require("./processors/nested"),require("./processors/extend"),require("./processors/vendorPrefixer")].forEach(Rule.addPreprocessor);exports.Stylesheet=Stylesheet;exports.Rule=Rule;exports.vendorPrefix=require("./vendorPrefix");exports.createStylesheet=function(rules,named,attributes){return new Stylesheet(rules,named,attributes)};exports.createRule=function(selector,style){return new Rule(selector,style).runPreprocessors()}},{"./Rule":2,"./Stylesheet":3,"./processors/extend":5,"./processors/nested":6,"./processors/vendorPrefixer":7,"./vendorPrefix":8}],5:[function(require,module,exports){"use strict";var toString=Object.prototype.toString;module.exports=function(rule){var style=rule.style;if(!style||!style.extend)return;var newStyle={};(function extend(style){if(toString.call(style.extend)=="[object Array]"){for(var i=0;i<style.extend.length;i++){extend(style.extend[i])}}else{for(var prop in style.extend){if(prop=="extend")extend(style.extend.extend);else newStyle[prop]=style.extend[prop]}}for(var prop in style){if(prop!="extend")newStyle[prop]=style[prop]}})(style);rule.style=newStyle}},{}],6:[function(require,module,exports){"use strict";var regExp=/&/gi;module.exports=function(rule){var stylesheet=rule.stylesheet;var style=rule.style;for(var prop in style){if(prop[0]=="&"){var selector=prop.replace(regExp,rule.selector);rule.addChild(selector,style[prop]);delete style[prop]}}}},{}],7:[function(require,module,exports){"use strict";var jss=require("..");var cache={};var p=document.createElement("p");(function(){var computed=window.getComputedStyle(document.documentElement,"");for(var key in computed){cache[computed[key]]=false}})();var camelize=function(){var regExp=/[-\s]+(.)?/g;function toUpper(match,c){return c?c.toUpperCase():""}return function(str){return str.replace(regExp,toUpper)}}();module.exports=function(rule){var style=rule.style;for(var prop in style){if(cache[prop]==null){var camelized=jss.vendorPrefix.js+camelize("-"+prop);var dasherized=jss.vendorPrefix.css+prop;cache[prop]=camelized in p.style?dasherized:false}if(cache[prop]){style[cache[prop]]=style[prop];delete style[prop]}}}},{"..":4}],8:[function(require,module,exports){"use strict";var jsCssMap={Webkit:"-webkit-",Moz:"-moz-",ms:"-ms-",O:"-o-"};var style=document.createElement("p").style;var testProp="Transform";for(var js in jsCssMap){if(js+testProp in style){exports.js=js;exports.css=jsCssMap[js];break}}},{}]},{},[1])(1)});

examples/commonjs/build.js

@@ -41,2 +41,4 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+var hasKeyframes = /@keyframes/
+
 /**
@@ -88,2 +90,3 @@ * Rule is selector + style hash.
  *
+ * @return {Rule}
  * @api private
@@ -99,4 +102,16 @@ */
 
-var hasKeyframes = /@keyframes/
+/**
+ * Add child rule. Used by "nested" preprocessor.
+ * Stylesheet will render them separately.
+ *
+ * @return {Rule}
+ * @api private
+ */
+Rule.prototype.addChild = function (selector, style) {
+    if (!this.children) this.children = {}
+    this.children[selector] = style
 
+    return this
+}
+
 /**
@@ -160,3 +175,5 @@ * Converts the rule to css string.
 
-    if (rules) this.createRules(rules)
+    for (var key in rules) {
+        this.createRules(key, rules[key])
+    }
 }
@@ -175,6 +192,3 @@
 
-    if (!this.text) {
-        this.text = this.toString()
-        this.element.innerHTML = '\n' + this.text + '\n'
-    }
+    if (!this.text) this.deploy()
 
@@ -188,2 +202,15 @@ document.head.appendChild(this.element)
 /**
+ * Stringify and inject the rules.
+ *
+ * @return {Stylesheet}
+ * @api private
+ */
+Stylesheet.prototype.deploy = function () {
+    this.text = this.toString()
+    this.element.innerHTML = '\n' + this.text + '\n'
+
+    return this
+}
+
+/**
  * Remove stylesheet element from render tree.
@@ -213,7 +240,16 @@ *
 Stylesheet.prototype.addRule = function (key, style) {
-    var rule = this.createRule(key, style)
-    var sheet = this.element.sheet
-    sheet.insertRule(rule.toString(), sheet.cssRules.length)
+    var rules = this.createRules(key, style)
 
-    return rule
+    // Don't insert rule directly if there is no stringified version yet.
+    // It will be inserted all together when .attach is called.
+    if (this.text) {
+        var sheet = this.element.sheet
+        for (var i = 0; i < rules.length; i++) {
+            sheet.insertRule(rules[i].toString(), sheet.cssRules.length)
+        }
+    } else {
+        this.deploy()
+    }
+
+    return rules
 }
@@ -270,10 +306,14 @@
  * @param {Object} style property/value hash
- * @return {Rule}
+ * @return {Array} rule can contain child rules
  * @api private
  */
-Stylesheet.prototype.createRule = function (key, style) {
+Stylesheet.prototype.createRules = function (key, style) {
+    var rules = []
     var selector, name
+
     if (this.named) name = key
     else selector = key
+
     var rule = new Rule(selector, style, this)
+    rules.push(rule)
     this.rules[name || rule.selector] = rule
@@ -283,18 +323,7 @@ if (this.named) this.classes[name] = rule.className
 
-    return rule
-}
-
-/**
- * Create rules, will not render after stylesheet was rendered the first time.
- *
- * @param {Object} rules key:style hash.
- * @return {Stylesheet} this
- * @api private
- */
-Stylesheet.prototype.createRules = function (rules) {
-    for (var key in rules) {
-        this.createRule(key, rules[key])
+    for (key in rule.children) {
+        rules.push(this.createRules(key, rule.children[key]))
     }
 
-    return this
+    return rules
 }
@@ -369,3 +398,3 @@
 exports.createRule = function (selector, style) {
-    return new Rule(selector, style)
+    return new Rule(selector, style).runPreprocessors()
 }
@@ -415,3 +444,3 @@
 
-var Rule = require('../Rule')
+var regExp = /&/gi
 
@@ -430,4 +459,4 @@ /**
         if (prop[0] == '&') {
-            var selector = prop.replace(/&/gi, rule.selector)
-            stylesheet.rules[selector] = new Rule(selector, style[prop], stylesheet)
+            var selector = prop.replace(regExp, rule.selector)
+            rule.addChild(selector, style[prop])
             delete style[prop]
@@ -438,3 +467,3 @@ }
 
-},{"../Rule":4}],9:[function(require,module,exports){
+},{}],9:[function(require,module,exports){
 'use strict'
@@ -465,3 +494,3 @@
 var camelize = (function () {
-    var regexp = /[-\s]+(.)?/g
+    var regExp = /[-\s]+(.)?/g
 
@@ -473,3 +502,3 @@ function toUpper(match, c) {
     return function(str) {
-        return str.replace(regexp, toUpper)
+        return str.replace(regExp, toUpper)
     }
@@ -487,3 +516,2 @@ }())
 module.exports = function (rule) {
-    var stylesheet = rule.stylesheet
     var style = rule.style
@@ -490,0 +518,0 @@

examples/topcoat/build.js

@@ -303,2 +303,4 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+var hasKeyframes = /@keyframes/
+
 /**
@@ -350,2 +352,3 @@ * Rule is selector + style hash.
  *
+ * @return {Rule}
  * @api private
@@ -361,4 +364,16 @@ */
 
-var hasKeyframes = /@keyframes/
+/**
+ * Add child rule. Used by "nested" preprocessor.
+ * Stylesheet will render them separately.
+ *
+ * @return {Rule}
+ * @api private
+ */
+Rule.prototype.addChild = function (selector, style) {
+    if (!this.children) this.children = {}
+    this.children[selector] = style
 
+    return this
+}
+
 /**
@@ -422,3 +437,5 @@ * Converts the rule to css string.
 
-    if (rules) this.createRules(rules)
+    for (var key in rules) {
+        this.createRules(key, rules[key])
+    }
 }
@@ -437,6 +454,3 @@
 
-    if (!this.text) {
-        this.text = this.toString()
-        this.element.innerHTML = '\n' + this.text + '\n'
-    }
+    if (!this.text) this.deploy()
 
@@ -450,2 +464,15 @@ document.head.appendChild(this.element)
 /**
+ * Stringify and inject the rules.
+ *
+ * @return {Stylesheet}
+ * @api private
+ */
+Stylesheet.prototype.deploy = function () {
+    this.text = this.toString()
+    this.element.innerHTML = '\n' + this.text + '\n'
+
+    return this
+}
+
+/**
  * Remove stylesheet element from render tree.
@@ -475,7 +502,16 @@ *
 Stylesheet.prototype.addRule = function (key, style) {
-    var rule = this.createRule(key, style)
-    var sheet = this.element.sheet
-    sheet.insertRule(rule.toString(), sheet.cssRules.length)
+    var rules = this.createRules(key, style)
 
-    return rule
+    // Don't insert rule directly if there is no stringified version yet.
+    // It will be inserted all together when .attach is called.
+    if (this.text) {
+        var sheet = this.element.sheet
+        for (var i = 0; i < rules.length; i++) {
+            sheet.insertRule(rules[i].toString(), sheet.cssRules.length)
+        }
+    } else {
+        this.deploy()
+    }
+
+    return rules
 }
@@ -532,10 +568,14 @@
  * @param {Object} style property/value hash
- * @return {Rule}
+ * @return {Array} rule can contain child rules
  * @api private
  */
-Stylesheet.prototype.createRule = function (key, style) {
+Stylesheet.prototype.createRules = function (key, style) {
+    var rules = []
     var selector, name
+
     if (this.named) name = key
     else selector = key
+
     var rule = new Rule(selector, style, this)
+    rules.push(rule)
     this.rules[name || rule.selector] = rule
@@ -545,18 +585,7 @@ if (this.named) this.classes[name] = rule.className
 
-    return rule
-}
-
-/**
- * Create rules, will not render after stylesheet was rendered the first time.
- *
- * @param {Object} rules key:style hash.
- * @return {Stylesheet} this
- * @api private
- */
-Stylesheet.prototype.createRules = function (rules) {
-    for (var key in rules) {
-        this.createRule(key, rules[key])
+    for (key in rule.children) {
+        rules.push(this.createRules(key, rule.children[key]))
     }
 
-    return this
+    return rules
 }
@@ -631,3 +660,3 @@
 exports.createRule = function (selector, style) {
-    return new Rule(selector, style)
+    return new Rule(selector, style).runPreprocessors()
 }
@@ -677,3 +706,3 @@
 
-var Rule = require('../Rule')
+var regExp = /&/gi
 
@@ -692,4 +721,4 @@ /**
         if (prop[0] == '&') {
-            var selector = prop.replace(/&/gi, rule.selector)
-            stylesheet.rules[selector] = new Rule(selector, style[prop], stylesheet)
+            var selector = prop.replace(regExp, rule.selector)
+            rule.addChild(selector, style[prop])
             delete style[prop]
@@ -700,3 +729,3 @@ }
 
-},{"../Rule":9}],14:[function(require,module,exports){
+},{}],14:[function(require,module,exports){
 'use strict'
@@ -727,3 +756,3 @@
 var camelize = (function () {
-    var regexp = /[-\s]+(.)?/g
+    var regExp = /[-\s]+(.)?/g
 
@@ -735,3 +764,3 @@ function toUpper(match, c) {
     return function(str) {
-        return str.replace(regexp, toUpper)
+        return str.replace(regExp, toUpper)
     }
@@ -749,3 +778,2 @@ }())
 module.exports = function (rule) {
-    var stylesheet = rule.stylesheet
     var style = rule.style
@@ -752,0 +780,0 @@

history.md

@@ -1,6 +0,10 @@
-## 0.3.2 / 2014-19-10
+## 0.4.0 / 2014-11-23
 
+- support nested rules when using .addRule method #20
+
+## 0.3.2 / 2014-11-19
+
 - rewrite prefixer for feature testing using camel cased version because of firefox
 
-## 0.3.0 / 2014-19-10
+## 0.3.0 / 2014-11-19
 
@@ -7,0 +11,0 @@ - add vendor prefixes preprocessor for properties #21

lib/index.js

@@ -49,3 +49,3 @@ /**
 exports.createRule = function (selector, style) {
-    return new Rule(selector, style)
+    return new Rule(selector, style).runPreprocessors()
 }

lib/processors/nested.js

 'use strict'
 
-var Rule = require('../Rule')
+var regExp = /&/gi
 
@@ -17,4 +17,4 @@ /**
         if (prop[0] == '&') {
-            var selector = prop.replace(/&/gi, rule.selector)
-            stylesheet.rules[selector] = new Rule(selector, style[prop], stylesheet)
+            var selector = prop.replace(regExp, rule.selector)
+            rule.addChild(selector, style[prop])
             delete style[prop]
@@ -21,0 +21,0 @@ }

lib/processors/vendorPrefixer.js

@@ -26,3 +26,3 @@ 'use strict'
 var camelize = (function () {
-    var regexp = /[-\s]+(.)?/g
+    var regExp = /[-\s]+(.)?/g
 
@@ -34,3 +34,3 @@ function toUpper(match, c) {
     return function(str) {
-        return str.replace(regexp, toUpper)
+        return str.replace(regExp, toUpper)
     }
@@ -48,3 +48,2 @@ }())
 module.exports = function (rule) {
-    var stylesheet = rule.stylesheet
     var style = rule.style
@@ -51,0 +50,0 @@

lib/Rule.js

@@ -7,2 +7,4 @@ 'use strict'
 
+var hasKeyframes = /@keyframes/
+
 /**
@@ -54,2 +56,3 @@ * Rule is selector + style hash.
  *
+ * @return {Rule}
  * @api private
@@ -65,4 +68,16 @@ */
 
-var hasKeyframes = /@keyframes/
+/**
+ * Add child rule. Used by "nested" preprocessor.
+ * Stylesheet will render them separately.
+ *
+ * @return {Rule}
+ * @api private
+ */
+Rule.prototype.addChild = function (selector, style) {
+    if (!this.children) this.children = {}
+    this.children[selector] = style
 
+    return this
+}
+
 /**
@@ -69,0 +84,0 @@ * Converts the rule to css string.

lib/Stylesheet.js

@@ -27,3 +27,5 @@ 'use strict'
 
-    if (rules) this.createRules(rules)
+    for (var key in rules) {
+        this.createRules(key, rules[key])
+    }
 }
@@ -42,6 +44,3 @@
 
-    if (!this.text) {
-        this.text = this.toString()
-        this.element.innerHTML = '\n' + this.text + '\n'
-    }
+    if (!this.text) this.deploy()
 
@@ -55,2 +54,15 @@ document.head.appendChild(this.element)
 /**
+ * Stringify and inject the rules.
+ *
+ * @return {Stylesheet}
+ * @api private
+ */
+Stylesheet.prototype.deploy = function () {
+    this.text = this.toString()
+    this.element.innerHTML = '\n' + this.text + '\n'
+
+    return this
+}
+
+/**
  * Remove stylesheet element from render tree.
@@ -80,7 +92,16 @@ *
 Stylesheet.prototype.addRule = function (key, style) {
-    var rule = this.createRule(key, style)
-    var sheet = this.element.sheet
-    sheet.insertRule(rule.toString(), sheet.cssRules.length)
+    var rules = this.createRules(key, style)
 
-    return rule
+    // Don't insert rule directly if there is no stringified version yet.
+    // It will be inserted all together when .attach is called.
+    if (this.text) {
+        var sheet = this.element.sheet
+        for (var i = 0; i < rules.length; i++) {
+            sheet.insertRule(rules[i].toString(), sheet.cssRules.length)
+        }
+    } else {
+        this.deploy()
+    }
+
+    return rules
 }
@@ -137,10 +158,14 @@
  * @param {Object} style property/value hash
- * @return {Rule}
+ * @return {Array} rule can contain child rules
  * @api private
  */
-Stylesheet.prototype.createRule = function (key, style) {
+Stylesheet.prototype.createRules = function (key, style) {
+    var rules = []
     var selector, name
+
     if (this.named) name = key
     else selector = key
+
     var rule = new Rule(selector, style, this)
+    rules.push(rule)
     this.rules[name || rule.selector] = rule
@@ -150,18 +175,7 @@ if (this.named) this.classes[name] = rule.className
 
-    return rule
-}
-
-/**
- * Create rules, will not render after stylesheet was rendered the first time.
- *
- * @param {Object} rules key:style hash.
- * @return {Stylesheet} this
- * @api private
- */
-Stylesheet.prototype.createRules = function (rules) {
-    for (var key in rules) {
-        this.createRule(key, rules[key])
+    for (key in rule.children) {
+        rules.push(this.createRules(key, rule.children[key]))
     }
 
-    return this
+    return rules
 }
@@ -168,0 +182,0 @@

package.json

 {
   "name": "jss",
   "description": "Dynamic stylesheets for web components.",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "author": {
@@ -6,0 +6,0 @@ "name": "Oleg Slobodskoi",

readme.md

@@ -142,4 +142,6 @@ ## Dynamic stylesheets for web components.
 
-Create a stylesheet with [namespaced](http://kof.github.io/jss/examples/namespace/index.html) rules.
+### Create namespaced stylesheet.
 
+Create a stylesheet with [namespaced](http://kof.github.io/jss/examples/namespace/index.html) rules. For this set second parameter to `true`.
+
 ```javascript
@@ -189,6 +191,9 @@ var stylesheet = jss.createStylesheet({
 
+Returns an array of rules, because you might have a nested rule in your style.
+
+
 #### You might want to add rules dynamically.
 
 ```javascript
-var button = stylesheet.addRule('.my-button', {
+var rules = stylesheet.addRule('.my-button', {
     padding: '20px',
@@ -198,13 +203,10 @@ background: 'blue'
 ```
-#### Generated namespace.
+#### Add rule with generated class name.
 
-In case you have an element reference or you create elements in javascript you might want to write styles and attach them later to the element using a generated class name.
-
 ```javascript
-var button = stylesheet.addRule({
+var rules = stylesheet.addRule({
     padding: '20px',
     background: 'blue'
 })
-
-document.body.innerHTML = '<button class="' + button.className + '">Button</button>'
+document.body.innerHTML = '<button class="' + rules[0].className + '">Button</button>'
 ```
@@ -211,0 +213,0 @@

test/processors/nested.js

@@ -54,1 +54,23 @@ 'use strict'
 })
+
+test('addRules', function () {
+    var ss = new jss.Stylesheet({
+        a: {
+            height: '1px'
+        }
+    }).attach()
+
+    ss.addRules({
+        b: {
+            height: '2px',
+            '& c': {
+                height: '3px'
+            }
+        }
+    })
+
+    equal(ss.element.sheet.rules[0].cssText, 'a { height: 1px; }')
+    equal(ss.element.sheet.rules[1].cssText, 'b { height: 2px; }')
+    equal(ss.element.sheet.rules[2].cssText, 'b c { height: 3px; }')
+    ss.detach()
+})

test/Stylesheet.js

@@ -61,7 +61,7 @@ 'use strict'
     var ss = new jss.Stylesheet().attach()
-    var rule = ss.addRule('aa', {float: 'left'})
+    var rules = ss.addRule('aa', {float: 'left'})
     equal(ss.element.sheet.cssRules.length, 1)
     equal(ss.element.sheet.cssRules[0].cssText, 'aa { float: left; }')
-    strictEqual(ss.rules.aa, rule)
-    strictEqual(ss.getRule('aa'), rule)
+    strictEqual(ss.rules.aa, rules[0])
+    strictEqual(ss.getRule('aa'), rules[0])
     strictEqual(ss.rules.aa.stylesheet, ss)
@@ -68,0 +68,0 @@ ss.detach()

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

372303

increased by0.81%

Lines of code

9151

increased by1.19%

Number of lines in readme file

291

increased by0.69%

No dependency changes