jss - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

bower.json

 {
   "name": "jss",
   "description": "Dynamic stylesheets for web components.",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": {
@@ -23,3 +23,4 @@ "name": "Oleg Slobodskoi",
     "qunit": "0.7.5",
-    "qunitjs": "1.15.0"
+    "qunitjs": "1.15.0",
+    "xpkg": "0.2.0"
   },
@@ -26,0 +27,0 @@ "scripts": {},

dist/jss.js

@@ -95,17 +95,19 @@ !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){
  * @param {Object} [rules] object with selectors and declarations
- * @param {Object} [generateClasses] generate selectors instead of using rules property as selector.
+ * @param {Boolean} [named] rules have names if true, class names will be generated.
  * @param {Object} [attributes] stylesheet element attributes
  * @api public
  */
-function Stylesheet(rules, generateClasses, attributes) {
-    if (typeof generateClasses == 'object') {
-        attributes = generateClasses
-        generateClasses = false
+function Stylesheet(rules, named, attributes) {
+    if (typeof named == 'object') {
+        attributes = named
+        named = false
     }
     this.element = null
     this.attached = false
-    this.generateClasses = generateClasses || false
+    this.named = named || false
     this.rules = {}
     this.attributes = attributes || {}
-    this.classes = generateClasses ? {} : null
+    this.classes = {}
+    this.text = ''
+    this.element = this.createElement()
     if (!this.attributes.type) this.attributes.type = 'text/css'
@@ -115,3 +117,5 @@ if (!this.attributes.media) this.attributes.media = 'screen'
 
-    if (rules) this.addRules(rules)
+    if (rules) this.createRules(rules)
+
+
 }
@@ -130,5 +134,5 @@
 
-    if (!this.element) {
-        this.element = this.createElement()
-        this.element.innerHTML = this.toString()
+    if (!this.text) {
+        this.text = this.toString()
+        this.element.innerHTML = '\n' + this.text + '\n'
     }
@@ -158,14 +162,14 @@
 /**
- * Add a rule to the current stylesheet.
+ * Add a rule to the current stylesheet. Will insert a rule also after the stylesheet
+ * has been rendered first time.
  *
- * @param {Object} [selector] if you don't pass selector - it will be generated
+ * @param {Object} [key] can be selector or name if `this.named` is true
  * @param {Object} style property/value hash
- * @return {Stylesheet}
+ * @return {Rule}
  * @api public
  */
-Stylesheet.prototype.addRule = function (selector, style) {
-    var rule = new Rule(selector, style, 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)
-    this.rules[rule.selector] = rule
 
@@ -176,16 +180,5 @@ return rule
 /**
- * Get a rule.
+ * Create rules, will render also after stylesheet was rendered the first time.
  *
- * @param {String} selector
- * @return {Rule}
- * @api public
- */
-Stylesheet.prototype.getRule = function (selector) {
-    return this.rules[selector]
-}
-
-/**
- * Add rules to the current stylesheet.
- *
- * @param {Object} rules selector:style hash.
+ * @param {Object} rules key:style hash.
  * @return {Stylesheet} this
@@ -195,9 +188,4 @@ * @api public
 Stylesheet.prototype.addRules = function (rules) {
-    var selector
     for (var key in rules) {
-        if (!this.generateClasses) selector = key
-        var rule = new Rule(selector, rules[key], this)
-        this.rules[rule.selector] = rule
-        rule.runPreprocessors()
-        if (this.generateClasses) this.classes[key] = rule.className
+        this.addRule(key, rules[key])
     }
@@ -209,6 +197,17 @@
 /**
+ * Get a rule.
+ *
+ * @param {String} key can be selector or name if `named` is true.
+ * @return {Rule}
+ * @api public
+ */
+Stylesheet.prototype.getRule = function (key) {
+    return this.rules[key]
+}
+
+/**
  * Convert rules to a css string.
  *
+ * @return {String}
  * @api public
- * @return {String}
  */
@@ -219,5 +218,5 @@ Stylesheet.prototype.toString = function () {
 
-    for (var selector in rules) {
+    for (var key in rules) {
         if (str) str += '\n'
-        str += rules[selector].toString()
+        str += rules[key].toString()
     }
@@ -229,2 +228,37 @@
 /**
+ * Create a rule, will not render after stylesheet was rendered the first time.
+ *
+ * @param {Object} [selector] if you don't pass selector - it will be generated
+ * @param {Object} style property/value hash
+ * @return {Rule}
+ * @api private
+ */
+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
+}
+
+/**
+ * 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])
+    }
+
+    return this
+}
+
+/**
  * Create stylesheet element.
@@ -270,3 +304,3 @@ *
  * @param {Object} rules is selector:style hash.
- * @param {Object} [generateClasses] generate class names instead of using rules property as selector.
+ * @param {Object} [named] rules have names if true, class names will be generated.
  * @param {Object} [attributes] stylesheet element attributes.
@@ -276,4 +310,4 @@ * @return {Stylesheet}
  */
-exports.createStylesheet = function (rules, generateClasses, attributes) {
-    return new Stylesheet(rules, generateClasses, attributes)
+exports.createStylesheet = function (rules, named, attributes) {
+    return new Stylesheet(rules, named, attributes)
 }
@@ -280,0 +314,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};Rule.prototype.toString=function(){var style=this.style;var str=this.selector+" {";for(var prop in style){str+="\n  "+prop+": "+style[prop]+";"}str+="\n}";return str}},{}],3:[function(require,module,exports){"use strict";var Rule=require("./Rule");function Stylesheet(rules,generateClasses,attributes){if(typeof generateClasses=="object"){attributes=generateClasses;generateClasses=false}this.element=null;this.attached=false;this.generateClasses=generateClasses||false;this.rules={};this.attributes=attributes||{};this.classes=generateClasses?{}:null;if(!this.attributes.type)this.attributes.type="text/css";if(!this.attributes.media)this.attributes.media="screen";if(!this.attributes.title)this.attributes.title="Generated by jss.";if(rules)this.addRules(rules)}module.exports=Stylesheet;Stylesheet.prototype.attach=function(){if(this.attached)return this;if(!this.element){this.element=this.createElement();this.element.innerHTML=this.toString()}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(selector,style){var rule=new Rule(selector,style,this);var sheet=this.element.sheet;sheet.insertRule(rule.toString(),sheet.cssRules.length);this.rules[rule.selector]=rule;return rule};Stylesheet.prototype.getRule=function(selector){return this.rules[selector]};Stylesheet.prototype.addRules=function(rules){var selector;for(var key in rules){if(!this.generateClasses)selector=key;var rule=new Rule(selector,rules[key],this);this.rules[rule.selector]=rule;rule.runPreprocessors();if(this.generateClasses)this.classes[key]=rule.className}return this};Stylesheet.prototype.toString=function(){var str="";var rules=this.rules;for(var selector in rules){if(str)str+="\n";str+=rules[selector].toString()}return str};Stylesheet.prototype.createElement=function(){var el=document.createElement("style");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=[];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.toString=function(){var style=this.style;var str=this.selector+" {";for(var prop in style){str+="\n  "+prop+": "+style[prop]+";"}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.rules={};this.attributes=attributes||{};this.classes={};this.text="";this.element=this.createElement();if(!this.attributes.type)this.attributes.type="text/css";if(!this.attributes.media)this.attributes.media="screen";if(!this.attributes.title)this.attributes.title="Generated by jss.";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");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")].forEach(Rule.addPreprocessor);exports.Stylesheet=Stylesheet;exports.Rule=Rule;exports.createStylesheet=function(rules,generateClasses,attributes){return new Stylesheet(rules,generateClasses,attributes)};exports.createRule=function(selector,style){return new Rule(selector,style)}},{"./Rule":2,"./Stylesheet":3,"./processors/extend":5,"./processors/nested":6}],5:[function(require,module,exports){"use strict";module.exports=function(rule){var style=rule.style;if(!style)return;var extend=style.extend;if(!extend)return;var newStyle={};var prop;if("length"in extend){for(var i=0;i<extend.length;i++){for(prop in extend[i])newStyle[prop]=extend[i][prop]}}else{for(prop in extend)newStyle[prop]=extend[prop]}for(prop in style){if(prop!="extend")newStyle[prop]=style[prop]}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=rule.selector+prop.substr(1);stylesheet.rules[selector]=new Rule(selector,style[prop],stylesheet);delete style[prop]}}}},{"../Rule":2}]},{},[1])(1)});
+"use strict";var Stylesheet=require("./Stylesheet");var Rule=require("./Rule");[require("./processors/nested"),require("./processors/extend")].forEach(Rule.addPreprocessor);exports.Stylesheet=Stylesheet;exports.Rule=Rule;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}],5:[function(require,module,exports){"use strict";module.exports=function(rule){var style=rule.style;if(!style)return;var extend=style.extend;if(!extend)return;var newStyle={};var prop;if("length"in extend){for(var i=0;i<extend.length;i++){for(prop in extend[i])newStyle[prop]=extend[i][prop]}}else{for(prop in extend)newStyle[prop]=extend[prop]}for(prop in style){if(prop!="extend")newStyle[prop]=style[prop]}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=rule.selector+prop.substr(1);stylesheet.rules[selector]=new Rule(selector,style[prop],stylesheet);delete style[prop]}}}},{"../Rule":2}]},{},[1])(1)});

examples/commonjs/build.js

@@ -125,17 +125,19 @@ (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){
  * @param {Object} [rules] object with selectors and declarations
- * @param {Object} [generateClasses] generate selectors instead of using rules property as selector.
+ * @param {Boolean} [named] rules have names if true, class names will be generated.
  * @param {Object} [attributes] stylesheet element attributes
  * @api public
  */
-function Stylesheet(rules, generateClasses, attributes) {
-    if (typeof generateClasses == 'object') {
-        attributes = generateClasses
-        generateClasses = false
+function Stylesheet(rules, named, attributes) {
+    if (typeof named == 'object') {
+        attributes = named
+        named = false
     }
     this.element = null
     this.attached = false
-    this.generateClasses = generateClasses || false
+    this.named = named || false
     this.rules = {}
     this.attributes = attributes || {}
-    this.classes = generateClasses ? {} : null
+    this.classes = {}
+    this.text = ''
+    this.element = this.createElement()
     if (!this.attributes.type) this.attributes.type = 'text/css'
@@ -145,3 +147,5 @@ if (!this.attributes.media) this.attributes.media = 'screen'
 
-    if (rules) this.addRules(rules)
+    if (rules) this.createRules(rules)
+
+
 }
@@ -160,5 +164,5 @@
 
-    if (!this.element) {
-        this.element = this.createElement()
-        this.element.innerHTML = this.toString()
+    if (!this.text) {
+        this.text = this.toString()
+        this.element.innerHTML = '\n' + this.text + '\n'
     }
@@ -188,14 +192,14 @@
 /**
- * Add a rule to the current stylesheet.
+ * Add a rule to the current stylesheet. Will insert a rule also after the stylesheet
+ * has been rendered first time.
  *
- * @param {Object} [selector] if you don't pass selector - it will be generated
+ * @param {Object} [key] can be selector or name if `this.named` is true
  * @param {Object} style property/value hash
- * @return {Stylesheet}
+ * @return {Rule}
  * @api public
  */
-Stylesheet.prototype.addRule = function (selector, style) {
-    var rule = new Rule(selector, style, 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)
-    this.rules[rule.selector] = rule
 
@@ -206,16 +210,5 @@ return rule
 /**
- * Get a rule.
+ * Create rules, will render also after stylesheet was rendered the first time.
  *
- * @param {String} selector
- * @return {Rule}
- * @api public
- */
-Stylesheet.prototype.getRule = function (selector) {
-    return this.rules[selector]
-}
-
-/**
- * Add rules to the current stylesheet.
- *
- * @param {Object} rules selector:style hash.
+ * @param {Object} rules key:style hash.
  * @return {Stylesheet} this
@@ -225,9 +218,4 @@ * @api public
 Stylesheet.prototype.addRules = function (rules) {
-    var selector
     for (var key in rules) {
-        if (!this.generateClasses) selector = key
-        var rule = new Rule(selector, rules[key], this)
-        this.rules[rule.selector] = rule
-        rule.runPreprocessors()
-        if (this.generateClasses) this.classes[key] = rule.className
+        this.addRule(key, rules[key])
     }
@@ -239,6 +227,17 @@
 /**
+ * Get a rule.
+ *
+ * @param {String} key can be selector or name if `named` is true.
+ * @return {Rule}
+ * @api public
+ */
+Stylesheet.prototype.getRule = function (key) {
+    return this.rules[key]
+}
+
+/**
  * Convert rules to a css string.
  *
+ * @return {String}
  * @api public
- * @return {String}
  */
@@ -249,5 +248,5 @@ Stylesheet.prototype.toString = function () {
 
-    for (var selector in rules) {
+    for (var key in rules) {
         if (str) str += '\n'
-        str += rules[selector].toString()
+        str += rules[key].toString()
     }
@@ -259,2 +258,37 @@
 /**
+ * Create a rule, will not render after stylesheet was rendered the first time.
+ *
+ * @param {Object} [selector] if you don't pass selector - it will be generated
+ * @param {Object} style property/value hash
+ * @return {Rule}
+ * @api private
+ */
+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
+}
+
+/**
+ * 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])
+    }
+
+    return this
+}
+
+/**
  * Create stylesheet element.
@@ -300,3 +334,3 @@ *
  * @param {Object} rules is selector:style hash.
- * @param {Object} [generateClasses] generate class names instead of using rules property as selector.
+ * @param {Object} [named] rules have names if true, class names will be generated.
  * @param {Object} [attributes] stylesheet element attributes.
@@ -306,4 +340,4 @@ * @return {Stylesheet}
  */
-exports.createStylesheet = function (rules, generateClasses, attributes) {
-    return new Stylesheet(rules, generateClasses, attributes)
+exports.createStylesheet = function (rules, named, attributes) {
+    return new Stylesheet(rules, named, attributes)
 }
@@ -310,0 +344,0 @@

lib/index.js

@@ -28,3 +28,3 @@ /**
  * @param {Object} rules is selector:style hash.
- * @param {Object} [generateClasses] generate class names instead of using rules property as selector.
+ * @param {Object} [named] rules have names if true, class names will be generated.
  * @param {Object} [attributes] stylesheet element attributes.
@@ -34,4 +34,4 @@ * @return {Stylesheet}
  */
-exports.createStylesheet = function (rules, generateClasses, attributes) {
-    return new Stylesheet(rules, generateClasses, attributes)
+exports.createStylesheet = function (rules, named, attributes) {
+    return new Stylesheet(rules, named, attributes)
 }
@@ -38,0 +38,0 @@

lib/Stylesheet.js

@@ -9,17 +9,19 @@ 'use strict'
  * @param {Object} [rules] object with selectors and declarations
- * @param {Object} [generateClasses] generate selectors instead of using rules property as selector.
+ * @param {Boolean} [named] rules have names if true, class names will be generated.
  * @param {Object} [attributes] stylesheet element attributes
  * @api public
  */
-function Stylesheet(rules, generateClasses, attributes) {
-    if (typeof generateClasses == 'object') {
-        attributes = generateClasses
-        generateClasses = false
+function Stylesheet(rules, named, attributes) {
+    if (typeof named == 'object') {
+        attributes = named
+        named = false
     }
     this.element = null
     this.attached = false
-    this.generateClasses = generateClasses || false
+    this.named = named || false
     this.rules = {}
     this.attributes = attributes || {}
-    this.classes = generateClasses ? {} : null
+    this.classes = {}
+    this.text = ''
+    this.element = this.createElement()
     if (!this.attributes.type) this.attributes.type = 'text/css'
@@ -29,3 +31,5 @@ if (!this.attributes.media) this.attributes.media = 'screen'
 
-    if (rules) this.addRules(rules)
+    if (rules) this.createRules(rules)
+
+
 }
@@ -44,5 +48,5 @@
 
-    if (!this.element) {
-        this.element = this.createElement()
-        this.element.innerHTML = this.toString()
+    if (!this.text) {
+        this.text = this.toString()
+        this.element.innerHTML = '\n' + this.text + '\n'
     }
@@ -72,14 +76,14 @@
 /**
- * Add a rule to the current stylesheet.
+ * Add a rule to the current stylesheet. Will insert a rule also after the stylesheet
+ * has been rendered first time.
  *
- * @param {Object} [selector] if you don't pass selector - it will be generated
+ * @param {Object} [key] can be selector or name if `this.named` is true
  * @param {Object} style property/value hash
- * @return {Stylesheet}
+ * @return {Rule}
  * @api public
  */
-Stylesheet.prototype.addRule = function (selector, style) {
-    var rule = new Rule(selector, style, 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)
-    this.rules[rule.selector] = rule
 
@@ -90,16 +94,5 @@ return rule
 /**
- * Get a rule.
+ * Create rules, will render also after stylesheet was rendered the first time.
  *
- * @param {String} selector
- * @return {Rule}
- * @api public
- */
-Stylesheet.prototype.getRule = function (selector) {
-    return this.rules[selector]
-}
-
-/**
- * Add rules to the current stylesheet.
- *
- * @param {Object} rules selector:style hash.
+ * @param {Object} rules key:style hash.
  * @return {Stylesheet} this
@@ -109,9 +102,4 @@ * @api public
 Stylesheet.prototype.addRules = function (rules) {
-    var selector
     for (var key in rules) {
-        if (!this.generateClasses) selector = key
-        var rule = new Rule(selector, rules[key], this)
-        this.rules[rule.selector] = rule
-        rule.runPreprocessors()
-        if (this.generateClasses) this.classes[key] = rule.className
+        this.addRule(key, rules[key])
     }
@@ -123,6 +111,17 @@
 /**
+ * Get a rule.
+ *
+ * @param {String} key can be selector or name if `named` is true.
+ * @return {Rule}
+ * @api public
+ */
+Stylesheet.prototype.getRule = function (key) {
+    return this.rules[key]
+}
+
+/**
  * Convert rules to a css string.
  *
+ * @return {String}
  * @api public
- * @return {String}
  */
@@ -133,5 +132,5 @@ Stylesheet.prototype.toString = function () {
 
-    for (var selector in rules) {
+    for (var key in rules) {
         if (str) str += '\n'
-        str += rules[selector].toString()
+        str += rules[key].toString()
     }
@@ -143,2 +142,37 @@
 /**
+ * Create a rule, will not render after stylesheet was rendered the first time.
+ *
+ * @param {Object} [selector] if you don't pass selector - it will be generated
+ * @param {Object} style property/value hash
+ * @return {Rule}
+ * @api private
+ */
+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
+}
+
+/**
+ * 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])
+    }
+
+    return this
+}
+
+/**
  * Create stylesheet element.
@@ -145,0 +179,0 @@ *

package.json

 {
   "name": "jss",
   "description": "Dynamic stylesheets for web components.",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": {
@@ -23,3 +23,4 @@ "name": "Oleg Slobodskoi",
     "qunit": "0.7.5",
-    "qunitjs": "1.15.0"
+    "qunitjs": "1.15.0",
+    "xpkg": "0.2.0"
   },
@@ -26,0 +27,0 @@ "scripts": {},

readme.md

@@ -103,6 +103,6 @@ ## Dynamic stylesheets for web components.
 
-`jss.createStylesheet([rules], [generateClasses], [attributes])`
+`jss.createStylesheet([rules], [named], [attributes])`
 
-- `rules` is an object, where keys are selectors if `generateClasses` is not true
-- `generateClasses` will cause auto generated class names for rules as selectors. It will also make class names accessible via `stylesheet.classes`.
+- `rules` is an object, where keys are selectors if `named` is not true
+- `named` rule keys are not used as selectors, but as names, will cause auto generated class names and selectors. It will also make class names accessible via `stylesheet.classes`.
 - `attributes` allows to set any attributes on style element.
@@ -199,5 +199,27 @@
 ```javascript
+// Using selector
 var rule = stylesheet.getRule('.my-button')
+
+// Using name, if named rule was added.
+var rule = stylesheet.getRule('myButton')
+
 ```
 
+### Add a rules
+
+`stylesheet.addRules(rules)`
+
+Add a list of rules.
+
+```javascript
+stylesheet.addRules({
+    '.my-button': {
+        float: 'left',
+    },
+    '.something': {
+        display: 'none'
+    }
+})
+```
+
 ### Create a rule without a stylesheet.
@@ -217,6 +239,14 @@
 
+## Install
+
+```bash
+npm i jss
+```
+
 ## Run tests
 
-    npm i
-    open test/index.html
+```bash
+npm i
+open test/index.html
+```
 
@@ -223,0 +253,0 @@ ## License

test/Stylesheet.js

@@ -11,6 +11,6 @@ QUnit.module('Stylesheet')
     })
-    equal(ss.classes, null)
-    equal(ss.element, null)
-    equal(ss.generateClasses, false)
+    ok(ss.element instanceof Element)
+    equal(ss.named, false)
     deepEqual(ss.rules, {})
+    deepEqual(ss.classes, {})
 })
@@ -26,4 +26,4 @@
     equal(typeof ss.classes.a, 'string')
-    ok(ss.rules['.' + ss.classes.a] instanceof jss.Rule)
-    ok(ss.generateClasses)
+    ok(ss.rules.a instanceof jss.Rule)
+    ok(ss.named)
 })
@@ -34,3 +34,3 @@
     ok(ss.rules.a instanceof jss.Rule)
-    equal(ss.generateClasses, false)
+    equal(ss.named, false)
     equal(ss.attributes.test, 1)
@@ -42,4 +42,4 @@ })
     equal(typeof ss.classes.a, 'string')
-    ok(ss.rules['.' + ss.classes.a] instanceof jss.Rule)
-    ok(ss.generateClasses)
+    ok(ss.rules.a instanceof jss.Rule)
+    ok(ss.named)
     equal(ss.attributes.test, 1)
@@ -53,3 +53,3 @@ })
     strictEqual(style, ss.element)
-    equal(style.innerHTML, ss.toString())
+    equal(style.innerHTML.trim(), ss.toString())
     ss.detach()
@@ -56,0 +56,0 @@ equal(ss.attached, false)

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

52759

increased by5.65%

Lines of code

1281

increased by7.2%

Number of lines in readme file

253

increased by13.45%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes