j2c - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/inline/j2c.amd.js

 define('j2c', function(){return (function () {
   var
-    OBJECT = "[object Object]",
-    STRING = "[object String]",
-    ARRAY =  "[object Array]",
     type = ({}).toString,
-    default_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_",
+    own =  ({}).hasOwnProperty,
+    OBJECT = type.call({}),
+    ARRAY =  type.call([]),
+    STRING = type.call(""),
+    scope_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_" + 1 * (new Date()) + "_",
     counter = 0;
 
-  function _O(k, v, o) {
-    o = {};
-    o[k] = v;
-    return o;
+  function _cartesian(a,b, selectorP, res, i, j) {
+    res = [];
+    for (j in b) if(own.call(b, j))
+      for (i in a) if(own.call(a, i))
+        res.push(_concat(a[i], b[j], selectorP));
+    return res;
   }
 
-  function inline(o) {
-    var buf = [];
-    _declarations(o, buf, "", j2c.vendors, "");
-    return buf.join("");
+  function _concat(a, b, selectorP) {
+    return selectorP && b.indexOf("&") + 1 ? b.replace("&", a) : a + b
   }
 
-  function _declarations(o, buf, pfx, vendors/*var*/, k, v) {
+  // Handles the property:value; pairs.
+  // Note that the sheets are built upside down and reversed before being
+  // turned into strings.
+  function _declarations(o, buf, prefix, vendors, /*var*/ k, v, kk) {
     switch (type.call(o)) {
     case ARRAY:
-      o.forEach(function (o) {
-        _declarations(o, buf, pfx, vendors);
-      });
+      for (k = o.length;k--;)
+        _declarations(o[k], buf, prefix, vendors);
       break;
     case OBJECT:
+      prefix = (prefix && prefix + "-");
       for (k in o) {
         v = o[k];
-        k.split("$").forEach(function(k){
-          _declarations(v, buf, (pfx && pfx + "-") + k, vendors);
-        });
+        if (k.indexOf("$") + 1) {
+          // "$" was found.
+          for (kk in k = k.split("$")) if (own.call(k, kk))
+            _declarations(v, buf, prefix + k[kk], vendors);
+        } else {
+          _declarations(v, buf, prefix + k, vendors);
+        }
       }
       break;
     default:
-      o = (pfx && (pfx).replace(/_/g, "-") + ":") + o + ";";
-      vendors.forEach(function (v) {
-        buf.push("-" + v + "-" + o);
-      })
-      buf.push(o)
+      // prefix is falsy when it is "", which means that we're
+      // at the top level.
+      // `o` is then treated as a `property:value` pair.
+      // otherwise, `prefix` is the property name, and
+      // `o` is the value.
+      buf.push(o = (prefix && (prefix).replace(/_/g, "-") + ":") + o + ";");
+      // vendorify
+      for (k = vendors.length; k--;)
+         buf.push("-" + vendors[k] + "-" + o);
     }
   }
 
-  /*/-inline-/*/
-  return {
-    inline: inline,
-    vendors:["o", "ms", "moz", "webkit"]
+
+  function finalize(buf) {return buf.reverse().join("\n");}
+
+  function j2c(o, buf) {
+    _declarations(o, buf = [], "", j2c.vendors);
+    return finalize(buf);
   }
-  /*/-inline-/*/
 
+
   
+
+  j2c.prefix = function(prefix, val) {
+    return _cartesian(
+      prefix.map(function(p){return "-"+p+"-"}).concat([""]),
+      [val]
+    );
+  };
+  j2c.vendors = [];
+  return j2c;
 })()
@@ -55,0 +78,0 @@

dist/inline/j2c.amd.min.js

@@ -1,1 +0,1 @@
-define("j2c",function(){return function(){function n(n){var r=[];return c(n,r,"",j2c.vendors,""),r.join("")}function c(n,t,i,a,f,u){switch(o.call(n)){case e:n.forEach(function(n){c(n,t,i,a)});break;case r:for(f in n)u=n[f],f.split("$").forEach(function(n){c(u,t,(i&&i+"-")+n,a)});break;default:n=(i&&i.replace(/_/g,"-")+":")+n+";",a.forEach(function(c){t.push("-"+c+"-"+n)}),t.push(n)}}{var r="[object Object]",e="[object Array]",o={}.toString;".j2c_"+(1e9*Math.random()|0)+"_"}return{inline:n,vendors:["o","ms","moz","webkit"]}}()});
+define("j2c",function(){return function(){function n(n,e,t,c,i,o){c=[];for(o in e)if(f.call(e,o))for(i in n)f.call(n,i)&&c.push(r(n[i],e[o],t));return c}function r(n,r,e){return e&&r.indexOf("&")+1?r.replace("&",n):n+r}function e(n,r,t,c,l,u,s){switch(i.call(n)){case a:for(l=n.length;l--;)e(n[l],r,t,c);break;case o:t=t&&t+"-";for(l in n)if(u=n[l],l.indexOf("$")+1)for(s in l=l.split("$"))f.call(l,s)&&e(u,r,t+l[s],c);else e(u,r,t+l,c);break;default:for(r.push(n=(t&&t.replace(/_/g,"-")+":")+n+";"),l=c.length;l--;)r.push("-"+c[l]+"-"+n)}}function t(n){return n.reverse().join("\n")}function c(n,r){return e(n,r=[],"",c.vendors),t(r)}{var i={}.toString,f={}.hasOwnProperty,o=i.call({}),a=i.call([]);i.call(""),".j2c_"+(1e9*Math.random()|0)+"_"+1*new Date+"_"}return c.prefix=function(r,e){return n(r.map(function(n){return"-"+n+"-"}).concat([""]),[e])},c.vendors=[],c}()});

dist/inline/j2c.commonjs.js

 module.exports = (function () {
   var
-    OBJECT = "[object Object]",
-    STRING = "[object String]",
-    ARRAY =  "[object Array]",
     type = ({}).toString,
-    default_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_",
+    own =  ({}).hasOwnProperty,
+    OBJECT = type.call({}),
+    ARRAY =  type.call([]),
+    STRING = type.call(""),
+    scope_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_" + 1 * (new Date()) + "_",
     counter = 0;
 
-  function _O(k, v, o) {
-    o = {};
-    o[k] = v;
-    return o;
+  function _cartesian(a,b, selectorP, res, i, j) {
+    res = [];
+    for (j in b) if(own.call(b, j))
+      for (i in a) if(own.call(a, i))
+        res.push(_concat(a[i], b[j], selectorP));
+    return res;
   }
 
-  function inline(o) {
-    var buf = [];
-    _declarations(o, buf, "", j2c.vendors, "");
-    return buf.join("");
+  function _concat(a, b, selectorP) {
+    return selectorP && b.indexOf("&") + 1 ? b.replace("&", a) : a + b
   }
 
-  function _declarations(o, buf, pfx, vendors/*var*/, k, v) {
+  // Handles the property:value; pairs.
+  // Note that the sheets are built upside down and reversed before being
+  // turned into strings.
+  function _declarations(o, buf, prefix, vendors, /*var*/ k, v, kk) {
     switch (type.call(o)) {
     case ARRAY:
-      o.forEach(function (o) {
-        _declarations(o, buf, pfx, vendors);
-      });
+      for (k = o.length;k--;)
+        _declarations(o[k], buf, prefix, vendors);
       break;
     case OBJECT:
+      prefix = (prefix && prefix + "-");
       for (k in o) {
         v = o[k];
-        k.split("$").forEach(function(k){
-          _declarations(v, buf, (pfx && pfx + "-") + k, vendors);
-        });
+        if (k.indexOf("$") + 1) {
+          // "$" was found.
+          for (kk in k = k.split("$")) if (own.call(k, kk))
+            _declarations(v, buf, prefix + k[kk], vendors);
+        } else {
+          _declarations(v, buf, prefix + k, vendors);
+        }
       }
       break;
     default:
-      o = (pfx && (pfx).replace(/_/g, "-") + ":") + o + ";";
-      vendors.forEach(function (v) {
-        buf.push("-" + v + "-" + o);
-      })
-      buf.push(o)
+      // prefix is falsy when it is "", which means that we're
+      // at the top level.
+      // `o` is then treated as a `property:value` pair.
+      // otherwise, `prefix` is the property name, and
+      // `o` is the value.
+      buf.push(o = (prefix && (prefix).replace(/_/g, "-") + ":") + o + ";");
+      // vendorify
+      for (k = vendors.length; k--;)
+         buf.push("-" + vendors[k] + "-" + o);
     }
   }
 
-  /*/-inline-/*/
-  return {
-    inline: inline,
-    vendors:["o", "ms", "moz", "webkit"]
+
+  function finalize(buf) {return buf.reverse().join("\n");}
+
+  function j2c(o, buf) {
+    _declarations(o, buf = [], "", j2c.vendors);
+    return finalize(buf);
   }
-  /*/-inline-/*/
 
+
   
+
+  j2c.prefix = function(prefix, val) {
+    return _cartesian(
+      prefix.map(function(p){return "-"+p+"-"}).concat([""]),
+      [val]
+    );
+  };
+  j2c.vendors = [];
+  return j2c;
 })()
@@ -55,0 +78,0 @@

dist/inline/j2c.commonjs.min.js

@@ -1,1 +0,1 @@
-module.exports=function(){function n(n){var r=[];return o(n,r,"",j2c.vendors,""),r.join("")}function o(n,t,a,i,u,f){switch(e.call(n)){case c:n.forEach(function(n){o(n,t,a,i)});break;case r:for(u in n)f=n[u],u.split("$").forEach(function(n){o(f,t,(a&&a+"-")+n,i)});break;default:n=(a&&a.replace(/_/g,"-")+":")+n+";",i.forEach(function(o){t.push("-"+o+"-"+n)}),t.push(n)}}{var r="[object Object]",c="[object Array]",e={}.toString;".j2c_"+(1e9*Math.random()|0)+"_"}return{inline:n,vendors:["o","ms","moz","webkit"]}}();
+module.exports=function(){function n(n,e,t,c,o,a){c=[];for(a in e)if(l.call(e,a))for(o in n)l.call(n,o)&&c.push(r(n[o],e[a],t));return c}function r(n,r,e){return e&&r.indexOf("&")+1?r.replace("&",n):n+r}function e(n,r,t,c,f,u,s){switch(o.call(n)){case i:for(f=n.length;f--;)e(n[f],r,t,c);break;case a:t=t&&t+"-";for(f in n)if(u=n[f],f.indexOf("$")+1)for(s in f=f.split("$"))l.call(f,s)&&e(u,r,t+f[s],c);else e(u,r,t+f,c);break;default:for(r.push(n=(t&&t.replace(/_/g,"-")+":")+n+";"),f=c.length;f--;)r.push("-"+c[f]+"-"+n)}}function t(n){return n.reverse().join("\n")}function c(n,r){return e(n,r=[],"",c.vendors),t(r)}{var o={}.toString,l={}.hasOwnProperty,a=o.call({}),i=o.call([]);o.call(""),".j2c_"+(1e9*Math.random()|0)+"_"+1*new Date+"_"}return c.prefix=function(r,e){return n(r.map(function(n){return"-"+n+"-"}).concat([""]),[e])},c.vendors=[],c}();

dist/inline/j2c.es6.js

 export default (function () {
   var
-    OBJECT = "[object Object]",
-    STRING = "[object String]",
-    ARRAY =  "[object Array]",
     type = ({}).toString,
-    default_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_",
+    own =  ({}).hasOwnProperty,
+    OBJECT = type.call({}),
+    ARRAY =  type.call([]),
+    STRING = type.call(""),
+    scope_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_" + 1 * (new Date()) + "_",
     counter = 0;
 
-  function _O(k, v, o) {
-    o = {};
-    o[k] = v;
-    return o;
+  function _cartesian(a,b, selectorP, res, i, j) {
+    res = [];
+    for (j in b) if(own.call(b, j))
+      for (i in a) if(own.call(a, i))
+        res.push(_concat(a[i], b[j], selectorP));
+    return res;
   }
 
-  function inline(o) {
-    var buf = [];
-    _declarations(o, buf, "", j2c.vendors, "");
-    return buf.join("");
+  function _concat(a, b, selectorP) {
+    return selectorP && b.indexOf("&") + 1 ? b.replace("&", a) : a + b
   }
 
-  function _declarations(o, buf, pfx, vendors/*var*/, k, v) {
+  // Handles the property:value; pairs.
+  // Note that the sheets are built upside down and reversed before being
+  // turned into strings.
+  function _declarations(o, buf, prefix, vendors, /*var*/ k, v, kk) {
     switch (type.call(o)) {
     case ARRAY:
-      o.forEach(function (o) {
-        _declarations(o, buf, pfx, vendors);
-      });
+      for (k = o.length;k--;)
+        _declarations(o[k], buf, prefix, vendors);
       break;
     case OBJECT:
+      prefix = (prefix && prefix + "-");
       for (k in o) {
         v = o[k];
-        k.split("$").forEach(function(k){
-          _declarations(v, buf, (pfx && pfx + "-") + k, vendors);
-        });
+        if (k.indexOf("$") + 1) {
+          // "$" was found.
+          for (kk in k = k.split("$")) if (own.call(k, kk))
+            _declarations(v, buf, prefix + k[kk], vendors);
+        } else {
+          _declarations(v, buf, prefix + k, vendors);
+        }
       }
       break;
     default:
-      o = (pfx && (pfx).replace(/_/g, "-") + ":") + o + ";";
-      vendors.forEach(function (v) {
-        buf.push("-" + v + "-" + o);
-      })
-      buf.push(o)
+      // prefix is falsy when it is "", which means that we're
+      // at the top level.
+      // `o` is then treated as a `property:value` pair.
+      // otherwise, `prefix` is the property name, and
+      // `o` is the value.
+      buf.push(o = (prefix && (prefix).replace(/_/g, "-") + ":") + o + ";");
+      // vendorify
+      for (k = vendors.length; k--;)
+         buf.push("-" + vendors[k] + "-" + o);
     }
   }
 
-  /*/-inline-/*/
-  return {
-    inline: inline,
-    vendors:["o", "ms", "moz", "webkit"]
+
+  function finalize(buf) {return buf.reverse().join("\n");}
+
+  function j2c(o, buf) {
+    _declarations(o, buf = [], "", j2c.vendors);
+    return finalize(buf);
   }
-  /*/-inline-/*/
 
+
   
+
+  j2c.prefix = function(prefix, val) {
+    return _cartesian(
+      prefix.map(function(p){return "-"+p+"-"}).concat([""]),
+      [val]
+    );
+  };
+  j2c.vendors = [];
+  return j2c;
 })()
@@ -55,0 +78,0 @@

dist/inline/j2c.global.js

 ;var j2c = (function () {
   var
-    OBJECT = "[object Object]",
-    STRING = "[object String]",
-    ARRAY =  "[object Array]",
     type = ({}).toString,
-    default_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_",
+    own =  ({}).hasOwnProperty,
+    OBJECT = type.call({}),
+    ARRAY =  type.call([]),
+    STRING = type.call(""),
+    scope_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_" + 1 * (new Date()) + "_",
     counter = 0;
 
-  function _O(k, v, o) {
-    o = {};
-    o[k] = v;
-    return o;
+  function _cartesian(a,b, selectorP, res, i, j) {
+    res = [];
+    for (j in b) if(own.call(b, j))
+      for (i in a) if(own.call(a, i))
+        res.push(_concat(a[i], b[j], selectorP));
+    return res;
   }
 
-  function inline(o) {
-    var buf = [];
-    _declarations(o, buf, "", j2c.vendors, "");
-    return buf.join("");
+  function _concat(a, b, selectorP) {
+    return selectorP && b.indexOf("&") + 1 ? b.replace("&", a) : a + b
   }
 
-  function _declarations(o, buf, pfx, vendors/*var*/, k, v) {
+  // Handles the property:value; pairs.
+  // Note that the sheets are built upside down and reversed before being
+  // turned into strings.
+  function _declarations(o, buf, prefix, vendors, /*var*/ k, v, kk) {
     switch (type.call(o)) {
     case ARRAY:
-      o.forEach(function (o) {
-        _declarations(o, buf, pfx, vendors);
-      });
+      for (k = o.length;k--;)
+        _declarations(o[k], buf, prefix, vendors);
       break;
     case OBJECT:
+      prefix = (prefix && prefix + "-");
       for (k in o) {
         v = o[k];
-        k.split("$").forEach(function(k){
-          _declarations(v, buf, (pfx && pfx + "-") + k, vendors);
-        });
+        if (k.indexOf("$") + 1) {
+          // "$" was found.
+          for (kk in k = k.split("$")) if (own.call(k, kk))
+            _declarations(v, buf, prefix + k[kk], vendors);
+        } else {
+          _declarations(v, buf, prefix + k, vendors);
+        }
       }
       break;
     default:
-      o = (pfx && (pfx).replace(/_/g, "-") + ":") + o + ";";
-      vendors.forEach(function (v) {
-        buf.push("-" + v + "-" + o);
-      })
-      buf.push(o)
+      // prefix is falsy when it is "", which means that we're
+      // at the top level.
+      // `o` is then treated as a `property:value` pair.
+      // otherwise, `prefix` is the property name, and
+      // `o` is the value.
+      buf.push(o = (prefix && (prefix).replace(/_/g, "-") + ":") + o + ";");
+      // vendorify
+      for (k = vendors.length; k--;)
+         buf.push("-" + vendors[k] + "-" + o);
     }
   }
 
-  /*/-inline-/*/
-  return {
-    inline: inline,
-    vendors:["o", "ms", "moz", "webkit"]
+
+  function finalize(buf) {return buf.reverse().join("\n");}
+
+  function j2c(o, buf) {
+    _declarations(o, buf = [], "", j2c.vendors);
+    return finalize(buf);
   }
-  /*/-inline-/*/
 
+
   
+
+  j2c.prefix = function(prefix, val) {
+    return _cartesian(
+      prefix.map(function(p){return "-"+p+"-"}).concat([""]),
+      [val]
+    );
+  };
+  j2c.vendors = [];
+  return j2c;
 })()
@@ -55,0 +78,0 @@

dist/inline/j2c.global.min.js

@@ -1,1 +0,1 @@
-var j2c=function(){function n(n){var r=[];return c(n,r,"",j2c.vendors,""),r.join("")}function c(n,e,a,i,f,u){switch(t.call(n)){case o:n.forEach(function(n){c(n,e,a,i)});break;case r:for(f in n)u=n[f],f.split("$").forEach(function(n){c(u,e,(a&&a+"-")+n,i)});break;default:n=(a&&a.replace(/_/g,"-")+":")+n+";",i.forEach(function(c){e.push("-"+c+"-"+n)}),e.push(n)}}{var r="[object Object]",o="[object Array]",t={}.toString;".j2c_"+(1e9*Math.random()|0)+"_"}return{inline:n,vendors:["o","ms","moz","webkit"]}}();
+var j2c=function(){function n(n,e,t,c,a,l){c=[];for(l in e)if(i.call(e,l))for(a in n)i.call(n,a)&&c.push(r(n[a],e[l],t));return c}function r(n,r,e){return e&&r.indexOf("&")+1?r.replace("&",n):n+r}function e(n,r,t,c,f,u,s){switch(a.call(n)){case o:for(f=n.length;f--;)e(n[f],r,t,c);break;case l:t=t&&t+"-";for(f in n)if(u=n[f],f.indexOf("$")+1)for(s in f=f.split("$"))i.call(f,s)&&e(u,r,t+f[s],c);else e(u,r,t+f,c);break;default:for(r.push(n=(t&&t.replace(/_/g,"-")+":")+n+";"),f=c.length;f--;)r.push("-"+c[f]+"-"+n)}}function t(n){return n.reverse().join("\n")}function c(n,r){return e(n,r=[],"",c.vendors),t(r)}{var a={}.toString,i={}.hasOwnProperty,l=a.call({}),o=a.call([]);a.call(""),".j2c_"+(1e9*Math.random()|0)+"_"+1*new Date+"_"}return c.prefix=function(r,e){return n(r.map(function(n){return"-"+n+"-"}).concat([""]),[e])},c.vendors=[],c}();

dist/j2c.amd.js

 define('j2c', function(){return (function () {
   var
-    OBJECT = "[object Object]",
-    STRING = "[object String]",
-    ARRAY =  "[object Array]",
     type = ({}).toString,
-    default_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_",
+    own =  ({}).hasOwnProperty,
+    OBJECT = type.call({}),
+    ARRAY =  type.call([]),
+    STRING = type.call(""),
+    scope_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_" + 1 * (new Date()) + "_",
     counter = 0;
 
-  function _O(k, v, o) {
-    o = {};
-    o[k] = v;
-    return o;
+  function _cartesian(a,b, selectorP, res, i, j) {
+    res = [];
+    for (j in b) if(own.call(b, j))
+      for (i in a) if(own.call(a, i))
+        res.push(_concat(a[i], b[j], selectorP));
+    return res;
   }
 
-  function inline(o) {
-    var buf = [];
-    _declarations(o, buf, "", j2c.vendors, "");
-    return buf.join("");
+  function _concat(a, b, selectorP) {
+    return selectorP && b.indexOf("&") + 1 ? b.replace("&", a) : a + b
   }
 
-  function _declarations(o, buf, pfx, vendors/*var*/, k, v) {
+  // Handles the property:value; pairs.
+  // Note that the sheets are built upside down and reversed before being
+  // turned into strings.
+  function _declarations(o, buf, prefix, vendors, /*var*/ k, v, kk) {
     switch (type.call(o)) {
     case ARRAY:
-      o.forEach(function (o) {
-        _declarations(o, buf, pfx, vendors);
-      });
+      for (k = o.length;k--;)
+        _declarations(o[k], buf, prefix, vendors);
       break;
     case OBJECT:
+      prefix = (prefix && prefix + "-");
       for (k in o) {
         v = o[k];
-        k.split("$").forEach(function(k){
-          _declarations(v, buf, (pfx && pfx + "-") + k, vendors);
-        });
+        if (k.indexOf("$") + 1) {
+          // "$" was found.
+          for (kk in k = k.split("$")) if (own.call(k, kk))
+            _declarations(v, buf, prefix + k[kk], vendors);
+        } else {
+          _declarations(v, buf, prefix + k, vendors);
+        }
       }
       break;
     default:
-      o = (pfx && (pfx).replace(/_/g, "-") + ":") + o + ";";
-      vendors.forEach(function (v) {
-        buf.push("-" + v + "-" + o);
-      })
-      buf.push(o)
+      // prefix is falsy when it is "", which means that we're
+      // at the top level.
+      // `o` is then treated as a `property:value` pair.
+      // otherwise, `prefix` is the property name, and
+      // `o` is the value.
+      buf.push(o = (prefix && (prefix).replace(/_/g, "-") + ":") + o + ";");
+      // vendorify
+      for (k = vendors.length; k--;)
+         buf.push("-" + vendors[k] + "-" + o);
     }
   }
 
-  
 
-  /*/-statements-/*/
-  function j2c(root) {return new Sheet(root);}
-  function Sheet(root) {
-    this.root = (root != null ? root : default_root + (counter++));
-    this.buf = []
+  function finalize(buf) {return buf.reverse().join("\n");}
+
+  function j2c(o, buf) {
+    _declarations(o, buf = [], "", j2c.vendors);
+    return finalize(buf);
   }
-  
-  Sheet.prototype = Sheet;
 
-  Sheet.add = function (statements) {
-    _add(statements, this.buf, this.root.split(","), j2c.vendors);
-    return this
-  };
 
-  function cartesian(a,b) {
-    var res = [];
-    for (var i, j = 0; j < b.length; j++)
-      for (i = 0; i< a.length; i++) 
-        res.push(a[i]+b[j]);
-    return res;
-  }
+  /*/-statements-/*/
 
-  function _add(statements, buf, pfx, vendors/*var*/, k, v, props) {
+  // Add rulesets and other CSS statements to the sheet.
+  function _add(statements, buf, prefix, vendors, /*var*/ k, v, decl) {
+    // optionally needed in the "[object String]" case
+    // where the `statements` variable actually holds
+    // declaratons. This allows to process either a 
+    // string or a declarations object with the same code.
+    decl = statements
+
     switch (type.call(statements)) {
+
+    case ARRAY:
+      for (k = statements.length;k--;)
+        _add(statements[k], buf, prefix, vendors);
+      break;
+
     case OBJECT:
-      props = {};
+      decl = {};
       for (k in statements) {
         v = statements[k];
-        if (k[0] == "@"){
-          if (type.call(v) == OBJECT) {
+        if (k[0] == "@"){ // Handle At-rules
+
+          if (k.match(/^@keyframes /)) {
+            buf.push("}");
+            _add(v, buf, "", vendors);
             buf.push(k + "{");
-            _add(v, buf, pfx, vendors);
+
+            // add a @-webkit-keyframes block too.
             buf.push("}");
-          } else {
+            _add(v, buf, "", ["webkit"]);
+            buf.push("@-webkit-" + k.slice(1) + "{");
+
+          } else if (k.match(/^@font-face/)) {
+            _add(v, buf, k, [])
+
+          } else if (type.call(v) == STRING) {
             buf.push(k + " " + v + ";");
+
+          } else { 
+            // default @-rule (usually @media)
+            buf.push("}");
+            _add(v, buf, prefix, vendors);
+            buf.push(k + "{");
           }
         } else if (k.match(/^[-\w$]+$/)) {
-          props[k] = v;
-        } else {
-          _add(v, buf, cartesian(pfx, k.split(",")), vendors);
+          // It is a declaration.
+          decl[k] = v;
+
+        } else { // A sub-selector
+          _add(v, buf,
+            /* if prefix and/or k have a coma */
+              prefix.indexOf(",") + k.indexOf(",") + 2 ?
+            /* then */
+              _cartesian(prefix.split(","), k.split(","), 1).join(",") :
+            /* else */
+              _concat(prefix, k, 1)
+            ,
+            vendors
+          );
         }
       }
-      // fake loop to detect the presence of keys in props.
-      for (k in props){
-        buf.push(pfx + "{");
-        _declarations(props, buf, "", vendors);
+      // fall through for handling declarations.
+
+    case STRING:
+      // fake loop to detect the presence of declarations.
+      // runs if decl is a non-empty string or when falling
+      // through from the `Object` case, when there are
+      // declarations.
+      for (k in decl) if (own.call(decl, k)){
         buf.push("}");
+        _declarations(decl, buf, "", vendors);
+        buf.push(prefix + "{");
         break;
       }
-      break;
-    case ARRAY:
-      statements.forEach(function (statement) {
-        _add(statement, buf, pfx, vendors);
-      })
-      break;
-    case STRING:
-        buf.push(pfx.join(",") + "{" + statements + "}");
     }
   }
 
-  Sheet.keyframes = function(name, frames) {
-    j2c.vendors.forEach(function(vendor) {
-      _add(_O("@-" + vendor + "-keyframes " + name, frames), this.buf, [""], [vendor]);
-    }, this)    
-    _add(_O("@keyframes " + name, frames), this.buf, [""], j2c.vendors);
-    return this;
-  }
+  j2c.sheet = function (statements, buf) {
+    buf = []
+    _add(statements, buf, "", j2c.vendors);
+    return finalize(buf);
+  };
 
-  Sheet.font = function(o) {
-    this.buf.push("@font-face{");
-    _declarations(o, this.buf, "", []);
-    this.buf.push("}");
-    return this
+  j2c.scoped = function(statements, k) {
+    var classes = {},
+        buf = [];
+    for (k in statements) if (own.call(statements, k)) {
+      classes[k] = scope_root + (counter++)
+      _add(statements[k], buf, classes[k], j2c.vendors);
+    }
+    buf = new String(finalize(buf));
+    buf.classes = classes
+    return buf
   }
+  /*/-statements-/*/
 
-  Sheet.toString = function () {
-    return this.buf.join("");
+  j2c.prefix = function(prefix, val) {
+    return _cartesian(
+      prefix.map(function(p){return "-"+p+"-"}).concat([""]),
+      [val]
+    );
   };
-
-  j2c.inline = inline;
-  j2c.vendors = ["o", "ms", "moz", "webkit"];
+  j2c.vendors = [];
   return j2c;
-  /*/-statements-/*/
 })()
@@ -132,0 +173,0 @@

dist/j2c.amd.min.js

@@ -1,1 +0,1 @@
-define("j2c",function(){return function(){function n(n,t,r){return r={},r[n]=t,r}function t(n){var t=[];return r(n,t,"",o.vendors,""),t.join("")}function r(n,t,o,i,u,e){switch(h.call(n)){case c:n.forEach(function(n){r(n,t,o,i)});break;case f:for(u in n)e=n[u],u.split("$").forEach(function(n){r(e,t,(o&&o+"-")+n,i)});break;default:n=(o&&o.replace(/_/g,"-")+":")+n+";",i.forEach(function(r){t.push("-"+r+"-"+n)}),t.push(n)}}function o(n){return new i(n)}function i(n){this.root=null!=n?n:a+b++,this.buf=[]}function u(n,t){for(var r,o=[],i=0;i<t.length;i++)for(r=0;r<n.length;r++)o.push(n[r]+t[i]);return o}function e(n,t,o,i,a,b,p){switch(h.call(n)){case f:p={};for(a in n)b=n[a],"@"==a[0]?h.call(b)==f?(t.push(a+"{"),e(b,t,o,i),t.push("}")):t.push(a+" "+b+";"):a.match(/^[-\w$]+$/)?p[a]=b:e(b,t,u(o,a.split(",")),i);for(a in p){t.push(o+"{"),r(p,t,"",i),t.push("}");break}break;case c:n.forEach(function(n){e(n,t,o,i)});break;case s:t.push(o.join(",")+"{"+n+"}")}}var f="[object Object]",s="[object String]",c="[object Array]",h={}.toString,a=".j2c_"+(1e9*Math.random()|0)+"_",b=0;return i.prototype=i,i.add=function(n){return e(n,this.buf,this.root.split(","),o.vendors),this},i.keyframes=function(t,r){return o.vendors.forEach(function(o){e(n("@-"+o+"-keyframes "+t,r),this.buf,[""],[o])},this),e(n("@keyframes "+t,r),this.buf,[""],o.vendors),this},i.font=function(n){return this.buf.push("@font-face{"),r(n,this.buf,"",[]),this.buf.push("}"),this},i.toString=function(){return this.buf.join("")},o.inline=t,o.vendors=["o","ms","moz","webkit"],o}()});
+define("j2c",function(){return function(){function n(n,r,t,c,i,a){c=[];for(a in r)if(s.call(r,a))for(i in n)s.call(n,i)&&c.push(e(n[i],r[a],t));return c}function e(n,e,r){return r&&e.indexOf("&")+1?e.replace("&",n):n+e}function r(n,e,t,c,i,l,o){switch(a.call(n)){case u:for(i=n.length;i--;)r(n[i],e,t,c);break;case f:t=t&&t+"-";for(i in n)if(l=n[i],i.indexOf("$")+1)for(o in i=i.split("$"))s.call(i,o)&&r(l,e,t+i[o],c);else r(l,e,t+i,c);break;default:for(e.push(n=(t&&t.replace(/_/g,"-")+":")+n+";"),i=c.length;i--;)e.push("-"+c[i]+"-"+n)}}function t(n){return n.reverse().join("\n")}function c(n,e){return r(n,e=[],"",c.vendors),t(e)}function i(t,c,o,h,p,d,w){switch(w=t,a.call(t)){case u:for(p=t.length;p--;)i(t[p],c,o,h);break;case f:w={};for(p in t)d=t[p],"@"==p[0]?p.match(/^@keyframes /)?(c.push("}"),i(d,c,"",h),c.push(p+"{"),c.push("}"),i(d,c,"",["webkit"]),c.push("@-webkit-"+p.slice(1)+"{")):p.match(/^@font-face/)?i(d,c,p,[]):a.call(d)==l?c.push(p+" "+d+";"):(c.push("}"),i(d,c,o,h),c.push(p+"{")):p.match(/^[-\w$]+$/)?w[p]=d:i(d,c,o.indexOf(",")+p.indexOf(",")+2?n(o.split(","),p.split(","),1).join(","):e(o,p,1),h);case l:for(p in w)if(s.call(w,p)){c.push("}"),r(w,c,"",h),c.push(o+"{");break}}}var a={}.toString,s={}.hasOwnProperty,f=a.call({}),u=a.call([]),l=a.call(""),o=".j2c_"+(1e9*Math.random()|0)+"_"+1*new Date+"_",h=0;return c.sheet=function(n,e){return e=[],i(n,e,"",c.vendors),t(e)},c.scoped=function(n,e){var r={},a=[];for(e in n)s.call(n,e)&&(r[e]=o+h++,i(n[e],a,r[e],c.vendors));return a=new String(t(a)),a.classes=r,a},c.prefix=function(e,r){return n(e.map(function(n){return"-"+n+"-"}).concat([""]),[r])},c.vendors=[],c}()});

dist/j2c.commonjs.js

 module.exports = (function () {
   var
-    OBJECT = "[object Object]",
-    STRING = "[object String]",
-    ARRAY =  "[object Array]",
     type = ({}).toString,
-    default_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_",
+    own =  ({}).hasOwnProperty,
+    OBJECT = type.call({}),
+    ARRAY =  type.call([]),
+    STRING = type.call(""),
+    scope_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_" + 1 * (new Date()) + "_",
     counter = 0;
 
-  function _O(k, v, o) {
-    o = {};
-    o[k] = v;
-    return o;
+  function _cartesian(a,b, selectorP, res, i, j) {
+    res = [];
+    for (j in b) if(own.call(b, j))
+      for (i in a) if(own.call(a, i))
+        res.push(_concat(a[i], b[j], selectorP));
+    return res;
   }
 
-  function inline(o) {
-    var buf = [];
-    _declarations(o, buf, "", j2c.vendors, "");
-    return buf.join("");
+  function _concat(a, b, selectorP) {
+    return selectorP && b.indexOf("&") + 1 ? b.replace("&", a) : a + b
   }
 
-  function _declarations(o, buf, pfx, vendors/*var*/, k, v) {
+  // Handles the property:value; pairs.
+  // Note that the sheets are built upside down and reversed before being
+  // turned into strings.
+  function _declarations(o, buf, prefix, vendors, /*var*/ k, v, kk) {
     switch (type.call(o)) {
     case ARRAY:
-      o.forEach(function (o) {
-        _declarations(o, buf, pfx, vendors);
-      });
+      for (k = o.length;k--;)
+        _declarations(o[k], buf, prefix, vendors);
       break;
     case OBJECT:
+      prefix = (prefix && prefix + "-");
       for (k in o) {
         v = o[k];
-        k.split("$").forEach(function(k){
-          _declarations(v, buf, (pfx && pfx + "-") + k, vendors);
-        });
+        if (k.indexOf("$") + 1) {
+          // "$" was found.
+          for (kk in k = k.split("$")) if (own.call(k, kk))
+            _declarations(v, buf, prefix + k[kk], vendors);
+        } else {
+          _declarations(v, buf, prefix + k, vendors);
+        }
       }
       break;
     default:
-      o = (pfx && (pfx).replace(/_/g, "-") + ":") + o + ";";
-      vendors.forEach(function (v) {
-        buf.push("-" + v + "-" + o);
-      })
-      buf.push(o)
+      // prefix is falsy when it is "", which means that we're
+      // at the top level.
+      // `o` is then treated as a `property:value` pair.
+      // otherwise, `prefix` is the property name, and
+      // `o` is the value.
+      buf.push(o = (prefix && (prefix).replace(/_/g, "-") + ":") + o + ";");
+      // vendorify
+      for (k = vendors.length; k--;)
+         buf.push("-" + vendors[k] + "-" + o);
     }
   }
 
-  
 
-  /*/-statements-/*/
-  function j2c(root) {return new Sheet(root);}
-  function Sheet(root) {
-    this.root = (root != null ? root : default_root + (counter++));
-    this.buf = []
+  function finalize(buf) {return buf.reverse().join("\n");}
+
+  function j2c(o, buf) {
+    _declarations(o, buf = [], "", j2c.vendors);
+    return finalize(buf);
   }
-  
-  Sheet.prototype = Sheet;
 
-  Sheet.add = function (statements) {
-    _add(statements, this.buf, this.root.split(","), j2c.vendors);
-    return this
-  };
 
-  function cartesian(a,b) {
-    var res = [];
-    for (var i, j = 0; j < b.length; j++)
-      for (i = 0; i< a.length; i++) 
-        res.push(a[i]+b[j]);
-    return res;
-  }
+  /*/-statements-/*/
 
-  function _add(statements, buf, pfx, vendors/*var*/, k, v, props) {
+  // Add rulesets and other CSS statements to the sheet.
+  function _add(statements, buf, prefix, vendors, /*var*/ k, v, decl) {
+    // optionally needed in the "[object String]" case
+    // where the `statements` variable actually holds
+    // declaratons. This allows to process either a 
+    // string or a declarations object with the same code.
+    decl = statements
+
     switch (type.call(statements)) {
+
+    case ARRAY:
+      for (k = statements.length;k--;)
+        _add(statements[k], buf, prefix, vendors);
+      break;
+
     case OBJECT:
-      props = {};
+      decl = {};
       for (k in statements) {
         v = statements[k];
-        if (k[0] == "@"){
-          if (type.call(v) == OBJECT) {
+        if (k[0] == "@"){ // Handle At-rules
+
+          if (k.match(/^@keyframes /)) {
+            buf.push("}");
+            _add(v, buf, "", vendors);
             buf.push(k + "{");
-            _add(v, buf, pfx, vendors);
+
+            // add a @-webkit-keyframes block too.
             buf.push("}");
-          } else {
+            _add(v, buf, "", ["webkit"]);
+            buf.push("@-webkit-" + k.slice(1) + "{");
+
+          } else if (k.match(/^@font-face/)) {
+            _add(v, buf, k, [])
+
+          } else if (type.call(v) == STRING) {
             buf.push(k + " " + v + ";");
+
+          } else { 
+            // default @-rule (usually @media)
+            buf.push("}");
+            _add(v, buf, prefix, vendors);
+            buf.push(k + "{");
           }
         } else if (k.match(/^[-\w$]+$/)) {
-          props[k] = v;
-        } else {
-          _add(v, buf, cartesian(pfx, k.split(",")), vendors);
+          // It is a declaration.
+          decl[k] = v;
+
+        } else { // A sub-selector
+          _add(v, buf,
+            /* if prefix and/or k have a coma */
+              prefix.indexOf(",") + k.indexOf(",") + 2 ?
+            /* then */
+              _cartesian(prefix.split(","), k.split(","), 1).join(",") :
+            /* else */
+              _concat(prefix, k, 1)
+            ,
+            vendors
+          );
         }
       }
-      // fake loop to detect the presence of keys in props.
-      for (k in props){
-        buf.push(pfx + "{");
-        _declarations(props, buf, "", vendors);
+      // fall through for handling declarations.
+
+    case STRING:
+      // fake loop to detect the presence of declarations.
+      // runs if decl is a non-empty string or when falling
+      // through from the `Object` case, when there are
+      // declarations.
+      for (k in decl) if (own.call(decl, k)){
         buf.push("}");
+        _declarations(decl, buf, "", vendors);
+        buf.push(prefix + "{");
         break;
       }
-      break;
-    case ARRAY:
-      statements.forEach(function (statement) {
-        _add(statement, buf, pfx, vendors);
-      })
-      break;
-    case STRING:
-        buf.push(pfx.join(",") + "{" + statements + "}");
     }
   }
 
-  Sheet.keyframes = function(name, frames) {
-    j2c.vendors.forEach(function(vendor) {
-      _add(_O("@-" + vendor + "-keyframes " + name, frames), this.buf, [""], [vendor]);
-    }, this)    
-    _add(_O("@keyframes " + name, frames), this.buf, [""], j2c.vendors);
-    return this;
-  }
+  j2c.sheet = function (statements, buf) {
+    buf = []
+    _add(statements, buf, "", j2c.vendors);
+    return finalize(buf);
+  };
 
-  Sheet.font = function(o) {
-    this.buf.push("@font-face{");
-    _declarations(o, this.buf, "", []);
-    this.buf.push("}");
-    return this
+  j2c.scoped = function(statements, k) {
+    var classes = {},
+        buf = [];
+    for (k in statements) if (own.call(statements, k)) {
+      classes[k] = scope_root + (counter++)
+      _add(statements[k], buf, classes[k], j2c.vendors);
+    }
+    buf = new String(finalize(buf));
+    buf.classes = classes
+    return buf
   }
+  /*/-statements-/*/
 
-  Sheet.toString = function () {
-    return this.buf.join("");
+  j2c.prefix = function(prefix, val) {
+    return _cartesian(
+      prefix.map(function(p){return "-"+p+"-"}).concat([""]),
+      [val]
+    );
   };
-
-  j2c.inline = inline;
-  j2c.vendors = ["o", "ms", "moz", "webkit"];
+  j2c.vendors = [];
   return j2c;
-  /*/-statements-/*/
 })()
@@ -132,0 +173,0 @@

dist/j2c.commonjs.min.js

@@ -1,1 +0,1 @@
-module.exports=function(){function t(t,n,r){return r={},r[t]=n,r}function n(t){var n=[];return r(t,n,"",o.vendors,""),n.join("")}function r(t,n,o,i,u,e){switch(h.call(t)){case c:t.forEach(function(t){r(t,n,o,i)});break;case s:for(u in t)e=t[u],u.split("$").forEach(function(t){r(e,n,(o&&o+"-")+t,i)});break;default:t=(o&&o.replace(/_/g,"-")+":")+t+";",i.forEach(function(r){n.push("-"+r+"-"+t)}),n.push(t)}}function o(t){return new i(t)}function i(t){this.root=null!=t?t:a+b++,this.buf=[]}function u(t,n){for(var r,o=[],i=0;i<n.length;i++)for(r=0;r<t.length;r++)o.push(t[r]+n[i]);return o}function e(t,n,o,i,a,b,p){switch(h.call(t)){case s:p={};for(a in t)b=t[a],"@"==a[0]?h.call(b)==s?(n.push(a+"{"),e(b,n,o,i),n.push("}")):n.push(a+" "+b+";"):a.match(/^[-\w$]+$/)?p[a]=b:e(b,n,u(o,a.split(",")),i);for(a in p){n.push(o+"{"),r(p,n,"",i),n.push("}");break}break;case c:t.forEach(function(t){e(t,n,o,i)});break;case f:n.push(o.join(",")+"{"+t+"}")}}var s="[object Object]",f="[object String]",c="[object Array]",h={}.toString,a=".j2c_"+(1e9*Math.random()|0)+"_",b=0;return i.prototype=i,i.add=function(t){return e(t,this.buf,this.root.split(","),o.vendors),this},i.keyframes=function(n,r){return o.vendors.forEach(function(o){e(t("@-"+o+"-keyframes "+n,r),this.buf,[""],[o])},this),e(t("@keyframes "+n,r),this.buf,[""],o.vendors),this},i.font=function(t){return this.buf.push("@font-face{"),r(t,this.buf,"",[]),this.buf.push("}"),this},i.toString=function(){return this.buf.join("")},o.inline=n,o.vendors=["o","ms","moz","webkit"],o}();
+module.exports=function(){function n(n,r,t,c,i,a){c=[];for(a in r)if(s.call(r,a))for(i in n)s.call(n,i)&&c.push(e(n[i],r[a],t));return c}function e(n,e,r){return r&&e.indexOf("&")+1?e.replace("&",n):n+e}function r(n,e,t,c,i,u,f){switch(a.call(n)){case o:for(i=n.length;i--;)r(n[i],e,t,c);break;case l:t=t&&t+"-";for(i in n)if(u=n[i],i.indexOf("$")+1)for(f in i=i.split("$"))s.call(i,f)&&r(u,e,t+i[f],c);else r(u,e,t+i,c);break;default:for(e.push(n=(t&&t.replace(/_/g,"-")+":")+n+";"),i=c.length;i--;)e.push("-"+c[i]+"-"+n)}}function t(n){return n.reverse().join("\n")}function c(n,e){return r(n,e=[],"",c.vendors),t(e)}function i(t,c,f,h,p,d,w){switch(w=t,a.call(t)){case o:for(p=t.length;p--;)i(t[p],c,f,h);break;case l:w={};for(p in t)d=t[p],"@"==p[0]?p.match(/^@keyframes /)?(c.push("}"),i(d,c,"",h),c.push(p+"{"),c.push("}"),i(d,c,"",["webkit"]),c.push("@-webkit-"+p.slice(1)+"{")):p.match(/^@font-face/)?i(d,c,p,[]):a.call(d)==u?c.push(p+" "+d+";"):(c.push("}"),i(d,c,f,h),c.push(p+"{")):p.match(/^[-\w$]+$/)?w[p]=d:i(d,c,f.indexOf(",")+p.indexOf(",")+2?n(f.split(","),p.split(","),1).join(","):e(f,p,1),h);case u:for(p in w)if(s.call(w,p)){c.push("}"),r(w,c,"",h),c.push(f+"{");break}}}var a={}.toString,s={}.hasOwnProperty,l=a.call({}),o=a.call([]),u=a.call(""),f=".j2c_"+(1e9*Math.random()|0)+"_"+1*new Date+"_",h=0;return c.sheet=function(n,e){return e=[],i(n,e,"",c.vendors),t(e)},c.scoped=function(n,e){var r={},a=[];for(e in n)s.call(n,e)&&(r[e]=f+h++,i(n[e],a,r[e],c.vendors));return a=new String(t(a)),a.classes=r,a},c.prefix=function(e,r){return n(e.map(function(n){return"-"+n+"-"}).concat([""]),[r])},c.vendors=[],c}();

dist/j2c.es6.js

 export default (function () {
   var
-    OBJECT = "[object Object]",
-    STRING = "[object String]",
-    ARRAY =  "[object Array]",
     type = ({}).toString,
-    default_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_",
+    own =  ({}).hasOwnProperty,
+    OBJECT = type.call({}),
+    ARRAY =  type.call([]),
+    STRING = type.call(""),
+    scope_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_" + 1 * (new Date()) + "_",
     counter = 0;
 
-  function _O(k, v, o) {
-    o = {};
-    o[k] = v;
-    return o;
+  function _cartesian(a,b, selectorP, res, i, j) {
+    res = [];
+    for (j in b) if(own.call(b, j))
+      for (i in a) if(own.call(a, i))
+        res.push(_concat(a[i], b[j], selectorP));
+    return res;
   }
 
-  function inline(o) {
-    var buf = [];
-    _declarations(o, buf, "", j2c.vendors, "");
-    return buf.join("");
+  function _concat(a, b, selectorP) {
+    return selectorP && b.indexOf("&") + 1 ? b.replace("&", a) : a + b
   }
 
-  function _declarations(o, buf, pfx, vendors/*var*/, k, v) {
+  // Handles the property:value; pairs.
+  // Note that the sheets are built upside down and reversed before being
+  // turned into strings.
+  function _declarations(o, buf, prefix, vendors, /*var*/ k, v, kk) {
     switch (type.call(o)) {
     case ARRAY:
-      o.forEach(function (o) {
-        _declarations(o, buf, pfx, vendors);
-      });
+      for (k = o.length;k--;)
+        _declarations(o[k], buf, prefix, vendors);
       break;
     case OBJECT:
+      prefix = (prefix && prefix + "-");
       for (k in o) {
         v = o[k];
-        k.split("$").forEach(function(k){
-          _declarations(v, buf, (pfx && pfx + "-") + k, vendors);
-        });
+        if (k.indexOf("$") + 1) {
+          // "$" was found.
+          for (kk in k = k.split("$")) if (own.call(k, kk))
+            _declarations(v, buf, prefix + k[kk], vendors);
+        } else {
+          _declarations(v, buf, prefix + k, vendors);
+        }
       }
       break;
     default:
-      o = (pfx && (pfx).replace(/_/g, "-") + ":") + o + ";";
-      vendors.forEach(function (v) {
-        buf.push("-" + v + "-" + o);
-      })
-      buf.push(o)
+      // prefix is falsy when it is "", which means that we're
+      // at the top level.
+      // `o` is then treated as a `property:value` pair.
+      // otherwise, `prefix` is the property name, and
+      // `o` is the value.
+      buf.push(o = (prefix && (prefix).replace(/_/g, "-") + ":") + o + ";");
+      // vendorify
+      for (k = vendors.length; k--;)
+         buf.push("-" + vendors[k] + "-" + o);
     }
   }
 
-  
 
-  /*/-statements-/*/
-  function j2c(root) {return new Sheet(root);}
-  function Sheet(root) {
-    this.root = (root != null ? root : default_root + (counter++));
-    this.buf = []
+  function finalize(buf) {return buf.reverse().join("\n");}
+
+  function j2c(o, buf) {
+    _declarations(o, buf = [], "", j2c.vendors);
+    return finalize(buf);
   }
-  
-  Sheet.prototype = Sheet;
 
-  Sheet.add = function (statements) {
-    _add(statements, this.buf, this.root.split(","), j2c.vendors);
-    return this
-  };
 
-  function cartesian(a,b) {
-    var res = [];
-    for (var i, j = 0; j < b.length; j++)
-      for (i = 0; i< a.length; i++) 
-        res.push(a[i]+b[j]);
-    return res;
-  }
+  /*/-statements-/*/
 
-  function _add(statements, buf, pfx, vendors/*var*/, k, v, props) {
+  // Add rulesets and other CSS statements to the sheet.
+  function _add(statements, buf, prefix, vendors, /*var*/ k, v, decl) {
+    // optionally needed in the "[object String]" case
+    // where the `statements` variable actually holds
+    // declaratons. This allows to process either a 
+    // string or a declarations object with the same code.
+    decl = statements
+
     switch (type.call(statements)) {
+
+    case ARRAY:
+      for (k = statements.length;k--;)
+        _add(statements[k], buf, prefix, vendors);
+      break;
+
     case OBJECT:
-      props = {};
+      decl = {};
       for (k in statements) {
         v = statements[k];
-        if (k[0] == "@"){
-          if (type.call(v) == OBJECT) {
+        if (k[0] == "@"){ // Handle At-rules
+
+          if (k.match(/^@keyframes /)) {
+            buf.push("}");
+            _add(v, buf, "", vendors);
             buf.push(k + "{");
-            _add(v, buf, pfx, vendors);
+
+            // add a @-webkit-keyframes block too.
             buf.push("}");
-          } else {
+            _add(v, buf, "", ["webkit"]);
+            buf.push("@-webkit-" + k.slice(1) + "{");
+
+          } else if (k.match(/^@font-face/)) {
+            _add(v, buf, k, [])
+
+          } else if (type.call(v) == STRING) {
             buf.push(k + " " + v + ";");
+
+          } else { 
+            // default @-rule (usually @media)
+            buf.push("}");
+            _add(v, buf, prefix, vendors);
+            buf.push(k + "{");
           }
         } else if (k.match(/^[-\w$]+$/)) {
-          props[k] = v;
-        } else {
-          _add(v, buf, cartesian(pfx, k.split(",")), vendors);
+          // It is a declaration.
+          decl[k] = v;
+
+        } else { // A sub-selector
+          _add(v, buf,
+            /* if prefix and/or k have a coma */
+              prefix.indexOf(",") + k.indexOf(",") + 2 ?
+            /* then */
+              _cartesian(prefix.split(","), k.split(","), 1).join(",") :
+            /* else */
+              _concat(prefix, k, 1)
+            ,
+            vendors
+          );
         }
       }
-      // fake loop to detect the presence of keys in props.
-      for (k in props){
-        buf.push(pfx + "{");
-        _declarations(props, buf, "", vendors);
+      // fall through for handling declarations.
+
+    case STRING:
+      // fake loop to detect the presence of declarations.
+      // runs if decl is a non-empty string or when falling
+      // through from the `Object` case, when there are
+      // declarations.
+      for (k in decl) if (own.call(decl, k)){
         buf.push("}");
+        _declarations(decl, buf, "", vendors);
+        buf.push(prefix + "{");
         break;
       }
-      break;
-    case ARRAY:
-      statements.forEach(function (statement) {
-        _add(statement, buf, pfx, vendors);
-      })
-      break;
-    case STRING:
-        buf.push(pfx.join(",") + "{" + statements + "}");
     }
   }
 
-  Sheet.keyframes = function(name, frames) {
-    j2c.vendors.forEach(function(vendor) {
-      _add(_O("@-" + vendor + "-keyframes " + name, frames), this.buf, [""], [vendor]);
-    }, this)    
-    _add(_O("@keyframes " + name, frames), this.buf, [""], j2c.vendors);
-    return this;
-  }
+  j2c.sheet = function (statements, buf) {
+    buf = []
+    _add(statements, buf, "", j2c.vendors);
+    return finalize(buf);
+  };
 
-  Sheet.font = function(o) {
-    this.buf.push("@font-face{");
-    _declarations(o, this.buf, "", []);
-    this.buf.push("}");
-    return this
+  j2c.scoped = function(statements, k) {
+    var classes = {},
+        buf = [];
+    for (k in statements) if (own.call(statements, k)) {
+      classes[k] = scope_root + (counter++)
+      _add(statements[k], buf, classes[k], j2c.vendors);
+    }
+    buf = new String(finalize(buf));
+    buf.classes = classes
+    return buf
   }
+  /*/-statements-/*/
 
-  Sheet.toString = function () {
-    return this.buf.join("");
+  j2c.prefix = function(prefix, val) {
+    return _cartesian(
+      prefix.map(function(p){return "-"+p+"-"}).concat([""]),
+      [val]
+    );
   };
-
-  j2c.inline = inline;
-  j2c.vendors = ["o", "ms", "moz", "webkit"];
+  j2c.vendors = [];
   return j2c;
-  /*/-statements-/*/
 })()
@@ -132,0 +173,0 @@

dist/j2c.global.js

 ;var j2c = (function () {
   var
-    OBJECT = "[object Object]",
-    STRING = "[object String]",
-    ARRAY =  "[object Array]",
     type = ({}).toString,
-    default_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_",
+    own =  ({}).hasOwnProperty,
+    OBJECT = type.call({}),
+    ARRAY =  type.call([]),
+    STRING = type.call(""),
+    scope_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_" + 1 * (new Date()) + "_",
     counter = 0;
 
-  function _O(k, v, o) {
-    o = {};
-    o[k] = v;
-    return o;
+  function _cartesian(a,b, selectorP, res, i, j) {
+    res = [];
+    for (j in b) if(own.call(b, j))
+      for (i in a) if(own.call(a, i))
+        res.push(_concat(a[i], b[j], selectorP));
+    return res;
   }
 
-  function inline(o) {
-    var buf = [];
-    _declarations(o, buf, "", j2c.vendors, "");
-    return buf.join("");
+  function _concat(a, b, selectorP) {
+    return selectorP && b.indexOf("&") + 1 ? b.replace("&", a) : a + b
   }
 
-  function _declarations(o, buf, pfx, vendors/*var*/, k, v) {
+  // Handles the property:value; pairs.
+  // Note that the sheets are built upside down and reversed before being
+  // turned into strings.
+  function _declarations(o, buf, prefix, vendors, /*var*/ k, v, kk) {
     switch (type.call(o)) {
     case ARRAY:
-      o.forEach(function (o) {
-        _declarations(o, buf, pfx, vendors);
-      });
+      for (k = o.length;k--;)
+        _declarations(o[k], buf, prefix, vendors);
       break;
     case OBJECT:
+      prefix = (prefix && prefix + "-");
       for (k in o) {
         v = o[k];
-        k.split("$").forEach(function(k){
-          _declarations(v, buf, (pfx && pfx + "-") + k, vendors);
-        });
+        if (k.indexOf("$") + 1) {
+          // "$" was found.
+          for (kk in k = k.split("$")) if (own.call(k, kk))
+            _declarations(v, buf, prefix + k[kk], vendors);
+        } else {
+          _declarations(v, buf, prefix + k, vendors);
+        }
       }
       break;
     default:
-      o = (pfx && (pfx).replace(/_/g, "-") + ":") + o + ";";
-      vendors.forEach(function (v) {
-        buf.push("-" + v + "-" + o);
-      })
-      buf.push(o)
+      // prefix is falsy when it is "", which means that we're
+      // at the top level.
+      // `o` is then treated as a `property:value` pair.
+      // otherwise, `prefix` is the property name, and
+      // `o` is the value.
+      buf.push(o = (prefix && (prefix).replace(/_/g, "-") + ":") + o + ";");
+      // vendorify
+      for (k = vendors.length; k--;)
+         buf.push("-" + vendors[k] + "-" + o);
     }
   }
 
-  
 
-  /*/-statements-/*/
-  function j2c(root) {return new Sheet(root);}
-  function Sheet(root) {
-    this.root = (root != null ? root : default_root + (counter++));
-    this.buf = []
+  function finalize(buf) {return buf.reverse().join("\n");}
+
+  function j2c(o, buf) {
+    _declarations(o, buf = [], "", j2c.vendors);
+    return finalize(buf);
   }
-  
-  Sheet.prototype = Sheet;
 
-  Sheet.add = function (statements) {
-    _add(statements, this.buf, this.root.split(","), j2c.vendors);
-    return this
-  };
 
-  function cartesian(a,b) {
-    var res = [];
-    for (var i, j = 0; j < b.length; j++)
-      for (i = 0; i< a.length; i++) 
-        res.push(a[i]+b[j]);
-    return res;
-  }
+  /*/-statements-/*/
 
-  function _add(statements, buf, pfx, vendors/*var*/, k, v, props) {
+  // Add rulesets and other CSS statements to the sheet.
+  function _add(statements, buf, prefix, vendors, /*var*/ k, v, decl) {
+    // optionally needed in the "[object String]" case
+    // where the `statements` variable actually holds
+    // declaratons. This allows to process either a 
+    // string or a declarations object with the same code.
+    decl = statements
+
     switch (type.call(statements)) {
+
+    case ARRAY:
+      for (k = statements.length;k--;)
+        _add(statements[k], buf, prefix, vendors);
+      break;
+
     case OBJECT:
-      props = {};
+      decl = {};
       for (k in statements) {
         v = statements[k];
-        if (k[0] == "@"){
-          if (type.call(v) == OBJECT) {
+        if (k[0] == "@"){ // Handle At-rules
+
+          if (k.match(/^@keyframes /)) {
+            buf.push("}");
+            _add(v, buf, "", vendors);
             buf.push(k + "{");
-            _add(v, buf, pfx, vendors);
+
+            // add a @-webkit-keyframes block too.
             buf.push("}");
-          } else {
+            _add(v, buf, "", ["webkit"]);
+            buf.push("@-webkit-" + k.slice(1) + "{");
+
+          } else if (k.match(/^@font-face/)) {
+            _add(v, buf, k, [])
+
+          } else if (type.call(v) == STRING) {
             buf.push(k + " " + v + ";");
+
+          } else { 
+            // default @-rule (usually @media)
+            buf.push("}");
+            _add(v, buf, prefix, vendors);
+            buf.push(k + "{");
           }
         } else if (k.match(/^[-\w$]+$/)) {
-          props[k] = v;
-        } else {
-          _add(v, buf, cartesian(pfx, k.split(",")), vendors);
+          // It is a declaration.
+          decl[k] = v;
+
+        } else { // A sub-selector
+          _add(v, buf,
+            /* if prefix and/or k have a coma */
+              prefix.indexOf(",") + k.indexOf(",") + 2 ?
+            /* then */
+              _cartesian(prefix.split(","), k.split(","), 1).join(",") :
+            /* else */
+              _concat(prefix, k, 1)
+            ,
+            vendors
+          );
         }
       }
-      // fake loop to detect the presence of keys in props.
-      for (k in props){
-        buf.push(pfx + "{");
-        _declarations(props, buf, "", vendors);
+      // fall through for handling declarations.
+
+    case STRING:
+      // fake loop to detect the presence of declarations.
+      // runs if decl is a non-empty string or when falling
+      // through from the `Object` case, when there are
+      // declarations.
+      for (k in decl) if (own.call(decl, k)){
         buf.push("}");
+        _declarations(decl, buf, "", vendors);
+        buf.push(prefix + "{");
         break;
       }
-      break;
-    case ARRAY:
-      statements.forEach(function (statement) {
-        _add(statement, buf, pfx, vendors);
-      })
-      break;
-    case STRING:
-        buf.push(pfx.join(",") + "{" + statements + "}");
     }
   }
 
-  Sheet.keyframes = function(name, frames) {
-    j2c.vendors.forEach(function(vendor) {
-      _add(_O("@-" + vendor + "-keyframes " + name, frames), this.buf, [""], [vendor]);
-    }, this)    
-    _add(_O("@keyframes " + name, frames), this.buf, [""], j2c.vendors);
-    return this;
-  }
+  j2c.sheet = function (statements, buf) {
+    buf = []
+    _add(statements, buf, "", j2c.vendors);
+    return finalize(buf);
+  };
 
-  Sheet.font = function(o) {
-    this.buf.push("@font-face{");
-    _declarations(o, this.buf, "", []);
-    this.buf.push("}");
-    return this
+  j2c.scoped = function(statements, k) {
+    var classes = {},
+        buf = [];
+    for (k in statements) if (own.call(statements, k)) {
+      classes[k] = scope_root + (counter++)
+      _add(statements[k], buf, classes[k], j2c.vendors);
+    }
+    buf = new String(finalize(buf));
+    buf.classes = classes
+    return buf
   }
+  /*/-statements-/*/
 
-  Sheet.toString = function () {
-    return this.buf.join("");
+  j2c.prefix = function(prefix, val) {
+    return _cartesian(
+      prefix.map(function(p){return "-"+p+"-"}).concat([""]),
+      [val]
+    );
   };
-
-  j2c.inline = inline;
-  j2c.vendors = ["o", "ms", "moz", "webkit"];
+  j2c.vendors = [];
   return j2c;
-  /*/-statements-/*/
 })()
@@ -132,0 +173,0 @@

dist/j2c.global.min.js

@@ -1,1 +0,1 @@
-var j2c=function(){function n(n,t,r){return r={},r[n]=t,r}function t(n){var t=[];return r(n,t,"",o.vendors,""),t.join("")}function r(n,t,o,i,u,e){switch(h.call(n)){case c:n.forEach(function(n){r(n,t,o,i)});break;case s:for(u in n)e=n[u],u.split("$").forEach(function(n){r(e,t,(o&&o+"-")+n,i)});break;default:n=(o&&o.replace(/_/g,"-")+":")+n+";",i.forEach(function(r){t.push("-"+r+"-"+n)}),t.push(n)}}function o(n){return new i(n)}function i(n){this.root=null!=n?n:a+b++,this.buf=[]}function u(n,t){for(var r,o=[],i=0;i<t.length;i++)for(r=0;r<n.length;r++)o.push(n[r]+t[i]);return o}function e(n,t,o,i,a,b,p){switch(h.call(n)){case s:p={};for(a in n)b=n[a],"@"==a[0]?h.call(b)==s?(t.push(a+"{"),e(b,t,o,i),t.push("}")):t.push(a+" "+b+";"):a.match(/^[-\w$]+$/)?p[a]=b:e(b,t,u(o,a.split(",")),i);for(a in p){t.push(o+"{"),r(p,t,"",i),t.push("}");break}break;case c:n.forEach(function(n){e(n,t,o,i)});break;case f:t.push(o.join(",")+"{"+n+"}")}}var s="[object Object]",f="[object String]",c="[object Array]",h={}.toString,a=".j2c_"+(1e9*Math.random()|0)+"_",b=0;return i.prototype=i,i.add=function(n){return e(n,this.buf,this.root.split(","),o.vendors),this},i.keyframes=function(t,r){return o.vendors.forEach(function(o){e(n("@-"+o+"-keyframes "+t,r),this.buf,[""],[o])},this),e(n("@keyframes "+t,r),this.buf,[""],o.vendors),this},i.font=function(n){return this.buf.push("@font-face{"),r(n,this.buf,"",[]),this.buf.push("}"),this},i.toString=function(){return this.buf.join("")},o.inline=t,o.vendors=["o","ms","moz","webkit"],o}();
+var j2c=function(){function n(n,r,t,c,a,i){c=[];for(i in r)if(s.call(r,i))for(a in n)s.call(n,a)&&c.push(e(n[a],r[i],t));return c}function e(n,e,r){return r&&e.indexOf("&")+1?e.replace("&",n):n+e}function r(n,e,t,c,a,o,u){switch(i.call(n)){case f:for(a=n.length;a--;)r(n[a],e,t,c);break;case l:t=t&&t+"-";for(a in n)if(o=n[a],a.indexOf("$")+1)for(u in a=a.split("$"))s.call(a,u)&&r(o,e,t+a[u],c);else r(o,e,t+a,c);break;default:for(e.push(n=(t&&t.replace(/_/g,"-")+":")+n+";"),a=c.length;a--;)e.push("-"+c[a]+"-"+n)}}function t(n){return n.reverse().join("\n")}function c(n,e){return r(n,e=[],"",c.vendors),t(e)}function a(t,c,u,h,p,d,v){switch(v=t,i.call(t)){case f:for(p=t.length;p--;)a(t[p],c,u,h);break;case l:v={};for(p in t)d=t[p],"@"==p[0]?p.match(/^@keyframes /)?(c.push("}"),a(d,c,"",h),c.push(p+"{"),c.push("}"),a(d,c,"",["webkit"]),c.push("@-webkit-"+p.slice(1)+"{")):p.match(/^@font-face/)?a(d,c,p,[]):i.call(d)==o?c.push(p+" "+d+";"):(c.push("}"),a(d,c,u,h),c.push(p+"{")):p.match(/^[-\w$]+$/)?v[p]=d:a(d,c,u.indexOf(",")+p.indexOf(",")+2?n(u.split(","),p.split(","),1).join(","):e(u,p,1),h);case o:for(p in v)if(s.call(v,p)){c.push("}"),r(v,c,"",h),c.push(u+"{");break}}}var i={}.toString,s={}.hasOwnProperty,l=i.call({}),f=i.call([]),o=i.call(""),u=".j2c_"+(1e9*Math.random()|0)+"_"+1*new Date+"_",h=0;return c.sheet=function(n,e){return e=[],a(n,e,"",c.vendors),t(e)},c.scoped=function(n,e){var r={},i=[];for(e in n)s.call(n,e)&&(r[e]=u+h++,a(n[e],i,r[e],c.vendors));return i=new String(t(i)),i.classes=r,i},c.prefix=function(e,r){return n(e.map(function(n){return"-"+n+"-"}).concat([""]),[r])},c.vendors=[],c}();

example/pocketgrid.js

 /* 
 
 PocketGrid 1.1.0 Copyright (c) 2013 Arnaud Leray
-j2c port Copyright (c) 2013 Pierre-Yves Gérardy
+j2c port Copyright (c) 2015 Pierre-Yves Gérardy
 
@@ -6,0 +6,0 @@ Permission is hereby granted, free of charge, to any person obtaining a

example/pocketgrid.mixin.js

@@ -42,3 +42,3 @@ // If you wanted to turn PockeGrid into a mixin, you could use this:
 PocketGrid 1.1.0 Copyright (c) 2013 Arnaud Leray
-j2c port Copyright (c) 2013 Pierre-Yves Gérardy
+j2c port Copyright (c) 2015 Pierre-Yves Gérardy
 
@@ -45,0 +45,0 @@ Permission is hereby granted, free of charge, to any person obtaining a

j2c.js

 /*/-notice-/*//*
 This source file is incomplete and useless in itself.
+
+It is augmented for the various module systems by the build script.
+
+The -statements- section is discarded in the `inline` builds.
+
 See the 'dist' directory for usable files.
+
 *//*/-notice-/*/(function () {
   var
-    OBJECT = "[object Object]",
-    STRING = "[object String]",
-    ARRAY =  "[object Array]",
     type = ({}).toString,
-    default_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_",
+    own =  ({}).hasOwnProperty,
+    OBJECT = type.call({}),
+    ARRAY =  type.call([]),
+    STRING = type.call(""),
+    scope_root = ".j2c_" + (Math.random() * 1e9 | 0) + "_" + 1 * (new Date()) + "_",
     counter = 0;
 
-  function _O(k, v, o) {
-    o = {};
-    o[k] = v;
-    return o;
+  function _cartesian(a,b, selectorP, res, i, j) {
+    res = [];
+    for (j in b) if(own.call(b, j))
+      for (i in a) if(own.call(a, i))
+        res.push(_concat(a[i], b[j], selectorP));
+    return res;
   }
 
-  function inline(o) {
-    var buf = [];
-    _declarations(o, buf, "", j2c.vendors, "");
-    return buf.join("");
+  function _concat(a, b, selectorP) {
+    return selectorP && b.indexOf("&") + 1 ? b.replace("&", a) : a + b
   }
 
-  function _declarations(o, buf, pfx, vendors/*var*/, k, v) {
+  // Handles the property:value; pairs.
+  // Note that the sheets are built upside down and reversed before being
+  // turned into strings.
+  function _declarations(o, buf, prefix, vendors, /*var*/ k, v, kk) {
     switch (type.call(o)) {
     case ARRAY:
-      o.forEach(function (o) {
-        _declarations(o, buf, pfx, vendors);
-      });
+      for (k = o.length;k--;)
+        _declarations(o[k], buf, prefix, vendors);
       break;
     case OBJECT:
+      prefix = (prefix && prefix + "-");
       for (k in o) {
         v = o[k];
-        k.split("$").forEach(function(k){
-          _declarations(v, buf, (pfx && pfx + "-") + k, vendors);
-        });
+        if (k.indexOf("$") + 1) {
+          // "$" was found.
+          for (kk in k = k.split("$")) if (own.call(k, kk))
+            _declarations(v, buf, prefix + k[kk], vendors);
+        } else {
+          _declarations(v, buf, prefix + k, vendors);
+        }
       }
       break;
     default:
-      o = (pfx && (pfx).replace(/_/g, "-") + ":") + o + ";";
-      vendors.forEach(function (v) {
-        buf.push("-" + v + "-" + o);
-      })
-      buf.push(o)
+      // prefix is falsy when it is "", which means that we're
+      // at the top level.
+      // `o` is then treated as a `property:value` pair.
+      // otherwise, `prefix` is the property name, and
+      // `o` is the value.
+      buf.push(o = (prefix && (prefix).replace(/_/g, "-") + ":") + o + ";");
+      // vendorify
+      for (k = vendors.length; k--;)
+         buf.push("-" + vendors[k] + "-" + o);
     }
   }
 
-  /*/-inline-/*/
-  return {
-    inline: inline,
-    vendors:["o", "ms", "moz", "webkit"]
+
+  function finalize(buf) {return buf.reverse().join("\n");}
+
+  function j2c(o, buf) {
+    _declarations(o, buf = [], "", j2c.vendors);
+    return finalize(buf);
   }
-  /*/-inline-/*/
 
+
   /*/-statements-/*/
-  function j2c(root) {return new Sheet(root);}
-  function Sheet(root) {
-    this.root = (root != null ? root : default_root + (counter++));
-    this.buf = []
-  }
-  
-  Sheet.prototype = Sheet;
 
-  Sheet.add = function (statements) {
-    _add(statements, this.buf, this.root.split(","), j2c.vendors);
-    return this
-  };
+  // Add rulesets and other CSS statements to the sheet.
+  function _add(statements, buf, prefix, vendors, /*var*/ k, v, decl) {
+    // optionally needed in the "[object String]" case
+    // where the `statements` variable actually holds
+    // declaratons. This allows to process either a 
+    // string or a declarations object with the same code.
+    decl = statements
 
-  function cartesian(a,b) {
-    var res = [];
-    for (var i, j = 0; j < b.length; j++)
-      for (i = 0; i< a.length; i++) 
-        res.push(a[i]+b[j]);
-    return res;
-  }
+    switch (type.call(statements)) {
 
-  function _add(statements, buf, pfx, vendors/*var*/, k, v, props) {
-    switch (type.call(statements)) {
+    case ARRAY:
+      for (k = statements.length;k--;)
+        _add(statements[k], buf, prefix, vendors);
+      break;
+
     case OBJECT:
-      props = {};
+      decl = {};
       for (k in statements) {
         v = statements[k];
-        if (k[0] == "@"){
-          if (type.call(v) == OBJECT) {
+        if (k[0] == "@"){ // Handle At-rules
+
+          if (k.match(/^@keyframes /)) {
+            buf.push("}");
+            _add(v, buf, "", vendors);
             buf.push(k + "{");
-            _add(v, buf, pfx, vendors);
+
+            // add a @-webkit-keyframes block too.
             buf.push("}");
-          } else {
+            _add(v, buf, "", ["webkit"]);
+            buf.push("@-webkit-" + k.slice(1) + "{");
+
+          } else if (k.match(/^@font-face/)) {
+            _add(v, buf, k, [])
+
+          } else if (type.call(v) == STRING) {
             buf.push(k + " " + v + ";");
+
+          } else { 
+            // default @-rule (usually @media)
+            buf.push("}");
+            _add(v, buf, prefix, vendors);
+            buf.push(k + "{");
           }
         } else if (k.match(/^[-\w$]+$/)) {
-          props[k] = v;
-        } else {
-          _add(v, buf, cartesian(pfx, k.split(",")), vendors);
+          // It is a declaration.
+          decl[k] = v;
+
+        } else { // A sub-selector
+          _add(v, buf,
+            /* if prefix and/or k have a coma */
+              prefix.indexOf(",") + k.indexOf(",") + 2 ?
+            /* then */
+              _cartesian(prefix.split(","), k.split(","), 1).join(",") :
+            /* else */
+              _concat(prefix, k, 1)
+            ,
+            vendors
+          );
         }
       }
-      // fake loop to detect the presence of keys in props.
-      for (k in props){
-        buf.push(pfx + "{");
-        _declarations(props, buf, "", vendors);
+      // fall through for handling declarations.
+
+    case STRING:
+      // fake loop to detect the presence of declarations.
+      // runs if decl is a non-empty string or when falling
+      // through from the `Object` case, when there are
+      // declarations.
+      for (k in decl) if (own.call(decl, k)){
         buf.push("}");
+        _declarations(decl, buf, "", vendors);
+        buf.push(prefix + "{");
         break;
       }
-      break;
-    case ARRAY:
-      statements.forEach(function (statement) {
-        _add(statement, buf, pfx, vendors);
-      })
-      break;
-    case STRING:
-        buf.push(pfx.join(",") + "{" + statements + "}");
     }
   }
 
-  Sheet.keyframes = function(name, frames) {
-    j2c.vendors.forEach(function(vendor) {
-      _add(_O("@-" + vendor + "-keyframes " + name, frames), this.buf, [""], [vendor]);
-    }, this)    
-    _add(_O("@keyframes " + name, frames), this.buf, [""], j2c.vendors);
-    return this;
-  }
+  j2c.sheet = function (statements, buf) {
+    buf = []
+    _add(statements, buf, "", j2c.vendors);
+    return finalize(buf);
+  };
 
-  Sheet.font = function(o) {
-    this.buf.push("@font-face{");
-    _declarations(o, this.buf, "", []);
-    this.buf.push("}");
-    return this
+  j2c.scoped = function(statements, k) {
+    var classes = {},
+        buf = [];
+    for (k in statements) if (own.call(statements, k)) {
+      classes[k] = scope_root + (counter++)
+      _add(statements[k], buf, classes[k], j2c.vendors);
+    }
+    buf = new String(finalize(buf));
+    buf.classes = classes
+    return buf
   }
+  /*/-statements-/*/
 
-  Sheet.toString = function () {
-    return this.buf.join("");
+  j2c.prefix = function(prefix, val) {
+    return _cartesian(
+      prefix.map(function(p){return "-"+p+"-"}).concat([""]),
+      [val]
+    );
   };
-
-  j2c.inline = inline;
-  j2c.vendors = ["o", "ms", "moz", "webkit"];
+  j2c.vendors = [];
   return j2c;
-  /*/-statements-/*/
 })()
@@ -140,0 +182,0 @@

package.json

 {
   "name": "j2c",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A JavaScript object to CSS compiler.",
@@ -5,0 +5,0 @@ "main": "dist/j2c.commonjs.js",

README.md

 # j2c
 
-JavaScript object to CSS compiler. ~720 bytes mingzipped.
+JavaScript to CSS compiler. ~810 bytes mingzipped.
 
 Think SASS, but in JSONish syntax.
 
-Inspired by restlye.js and JSS, but smaller :-).
-
 ----
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-##Table of Contents
+**Table of Contents**
 
@@ -18,14 +16,14 @@ - [Why?](#why)
 - [Usage](#usage)
+  - [For inline decalrations](#for-inline-decalrations)
+    - [Arrays](#arrays)
+      - [Overloading properties](#overloading-properties)
+      - [Mixins](#mixins)
+    - [Vendor prefixes:](#vendor-prefixes)
   - [For building a style sheet](#for-building-a-style-sheet)
-    - [-vendor-prefixes](#-vendor-prefixes)
-    - [root selector](#root-selector)
     - [Telling selectors and properties apart](#telling-selectors-and-properties-apart)
-    - [Overloading properties](#overloading-properties)
+    - [Combining multiple selectors](#combining-multiple-selectors)
     - [At-rules](#at-rules)
-    - [Combining multiple selectors](#combining-multiple-selectors)
     - [CSS Hacks](#css-hacks)
-  - [For building inline styles](#for-building-inline-styles)
-- [API Reference](#api-reference)
-  - [`j2c` and static fields](#j2c-and-static-fields)
-  - [`Sheet` methods](#sheet-methods)
+    - [Mixins redux](#mixins-redux)
+  - [Scoped sheet](#scoped-sheet)
 - [Limitations](#limitations)
@@ -38,2 +36,3 @@ - [Selectors and properties order](#selectors-and-properties-order)
 <small>*TOC generated with [DocToc](https://github.com/thlorenz/doctoc), then tweaked a bit.*</small>
+
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -48,3 +47,2 @@
 * Use the full power of JavaScript for mixins, variables, macros and feature detection
-* Stop worrying about vendor prefixes
 * Good fit for virtual DOM frameworks like React or Mithril
@@ -55,3 +53,3 @@ * I like writing compilers :-)
 
-This is mostly intended as a client-side helper to generate styles for Virtual DOM components (React, Mithril, Mercury...).
+This is mostly intended as a client-side helper to generate styles for Virtual DOM frameworks (Mithril, React, Mercury...).
 
@@ -65,80 +63,151 @@ Whether or not this is useful as a general CSS replacement remains to be seen.
 ```Bash
+# Please send a PR if you want to see it included in other package systems.
 $ npm install j2c
 ```
 
-Please send a PR if you want to see it inclueded in other package systems.
+then
 
+```JavaScript
+var j2c = require('j2c')
+```
+
+There are also separate builds for `AMD`, `ES6` and `window.j2c` in the `dist` directory.
+
 ## Usage
 
-### For building a style sheet
+`j2c` can be used to either assemble inline declarations or full style sheets.
 
+### For inline decalrations: `j2c(declarations)`
+
+The `j2c` function walks down JS objects and builds a `property:value;` list out of it.
+
 ```JavaScript
-j2c.vendors = [] // for the sake of this demo
-                 // defaults to ["o", "ms", "moz", "webkit"].
+j2c({
+  background_color:"red",
+  border:{
+    top$left: {
+      width: "1px",
+      color: "white"
+    }
+  }
+})
+```
 
-r = j2c("ul.my_root_class")
+Outputs, as you could expect (white space added for readability):
 
-r.add({
-    "@media condition": {
-        color: "red"
-    },
-    // properties for the main ul.my_root_class elements
-    font: { 
-        size: "2em",
-        family: "sans-serif"
-    },
-    // underscores in property names are converted to dashes.
-    background_color: "#44f", 
+```CSS
+background-color: red;
+border-top-color: white;
+border-top-width: 1px;
+border-left-color: white;
+border-left-width: 1px;
+```
 
-    // sub-selector for children element, notice the mandatory initial space
-    // signifying a child element.
-    " li": { 
-        padding:{
-            left: "5px"
-            top: "10px"
-        },
-        // convenient $hortcut.
-        border: {left$right: {width: 2px}}
-    }
+Underscores are automatically turned into dashes so that property names can be left unquoted in the source.
+
+You can combine (sub)properties who share the same value using `$` as a separator. It is useful to specify vendor prefixes. Once again, it allows to leave property names unquoted.
+
+#### Arrays
+
+The order of iteration over the keys of a js object is undefined. If you want to ensure that properties occut in order (say, `border` before `border-left`), use an array:
+
+`j2c([foo,bar])` is equivalent to `j2c(foo) + j2c(bar)`. 
+
+This enables the following techniques:
+
+##### Overloading properties
+
+If you want to overload a property by using an array at the value level
+
+```JavaScript
+j2c({
+    border_color: ["#33e", "rgba(64,64,255,0.8)"],
 })
+```
 
-console.log(r.toString())
+becomes
+
+```CSS
+border-color:#33e;
+border-color:rgba(64,64,255,0.8);
 ```
 
-Output (beautified):
+Alternatively:
 
-```CSS
-@media condition {
-  ul.my_root_class {
-    color:red;
+```JavaScript
+j2c([
+  {
+      border_color: "#33e"
+  }, {
+      border_color: "rgba(64,64,255,0.8)"
   }
+])
+```
+
+and 
+
+```JavaScript
+j2c({
+    border:[
+      {color: "#33e"},
+      {color: "rgba(64,64,255,0.8)"}
+    ]
+})
+```
+
+will give the same result.
+
+##### Mixins
+
+You can mix in properties by using a function call in an array:
+
+```JavaScript
+function mixin(color) {
+  return {
+    border_color: color,
+    color: color
+  }
 }
-ul.my_root_class  li {
-  padding-left:5px;
-  padding-top:10px;
-  border-left-width:2px;
-  border-right-width:2px;
-}
-ul.my_root_class {
-  font-size:2em;
-  font-family:sans-serif;
-  background-color:#44f;
-}
+
+j2c([
+  mixin("red"),
+  {
+    font_size:"2em"
+  }
+])
 ```
 
-#### -vendor-prefixes
+```CSS
+'color:red;
+border-color:red;
+font-size:2em;'
+```
 
-If you don't truncate the vendors list as I did in the example above, you'll get each property prefixed for each vendor.
+#### Vendor prefixes:
 
+If the `j2c.vendors` array isn't empty, it is used to automatically add vendor prefixes to all properties.
+
 Most of the resulting combinations don't make any sense (`-moz-color` FTW), and they are simply ignored by browsers. That's the price to pay for the small code size.
 
-Alternatively, you can specify the prefixes by hand using the "/" operator where needed:
 
 ```JavaScript
+j2c.vendors = ["moz", "webkit"];
+j2c({transition:"all 1s"})
+```
+
+```CSS
+-moz-transition:all 1s;
+-webkit-transition:all 1s;
+transition:all 1s;
+```
+
+Alternatively, you can specify the prefixes by hand using the "$" operator where needed:
+
+```JavaScript
 j2c.vendors = []
-j2c("p").add({
+j2c({
   // Notice the trailing dollar, required for the unprefixed property.
   _o$_ms$_moz$_webkit$: {foo: "bar"},
   hello: "world"
-}).toString()
+});
 ```
@@ -159,77 +228,92 @@
 
-#### root selector
+To prefix values, you can use `j2c.prefix`:
 
-If no root selector is provided, `J2C` creates one (a unique class).
-
 ```JavaScript
-r = j2c()
-r.prefix // --> ".j2c_$token_$counter" where `$token` is unique per
-         //     j2c instance, and `$counter` is incremented to 
-         //     ensure that these classes are unique.
+j2c({
+  background_image:j2c.prefix(
+    ['moz','webkit'],
+    "linear-gradient(90deg, #f00, #ff0)"
+  )
+})
 ```
 
-#### Telling selectors and properties apart
+```CSS
+background-image: -moz-linear-gradient(90deg, #f00, #ff0);
+background-image: -webkit-linear-gradient(90deg, #f00, #ff0);
+background-image: linear-gradient(90deg, #f00, #ff0);
+```
 
-`j2c` considers that object keys matching `/^[-_0-9A-Za-z$]+$/` as properties, and everything else as (sub-)selectors. Since underscores are converted to dashes, it means that property names can be left unquoted, while (sub-)selectors have to be quoted.
+There's no support for prefixing a list multiple values (e.g. `"linear-gradient(90deg, #f00, #ff0),linear-gradient(90deg, #f00, #ff0)"`.
 
-Selectors are concatenated as is, while properties are concatenated with hyphens. `{" ul": {" li": {padding: {left:10}}}}` becomes ` ul li{padding-left:10px;}`. `{" p":{".foo":{color:"red"}}}`, is translated to ` p.foo:{color:red;}`.
+### For building a style sheet: `j2c.sheet(rules)`
 
-#### Overloading properties
-
 ```JavaScript
-r = j2c("ul.my_root_class")
+j2c.sheet({
+    "ul.my_root_class": {
+        "@media condition": {
+            color: "red"
+        },
+        // properties for the main ul.my_root_class elements
+        font: { 
+            size: "2em",
+            family: "sans-serif"
+        },
+        // underscores in property names are converted to dashes.
+        background_color: "#44f", 
 
-r.add({
-    "font-size": ["2em", "2rem"]
+        // sub-selector for children element, notice the mandatory initial space
+        // signifying a child element.
+        " li": { 
+            padding:{
+                left: "5px"
+                top: "10px"
+            },
+            // convenient $hortcut.
+            border: {left$right: {width: "2px"}}
+        }
+    }
 })
 
-console.log(r.toString())
 ```
-becomes
-```CSS
-.foo {
-  font-size:2em;
-  font-size:2rem;
-}
-```
 
-Alternatively
+Output (beautified):
 
-```JavaScript
-r = j2c("ul.my_root_class")
-
-r.add([
-    {
-        "font-size": "2em"
-    },
-    {
-        "font-size": "2rem"
-    }
-])
-
-console.log(r.toString())
-```
-becomes
 ```CSS
+@media condition {
+  ul.my_root_class {
+    color:red;
+  }
+}
+ul.my_root_class  li {
+  padding-left:5px;
+  padding-top:10px;
+  border-left-width:2px;
+  border-right-width:2px;
+}
 ul.my_root_class {
   font-size:2em;
+  font-family:sans-serif;
+  background-color:#44f;
 }
-ul.my_root_class {
-  font-size:2rem;
-}
 ```
 
-#### At-rules
+#### Telling selectors and properties apart
 
-Most At-rules are handled out of the box by `sheet.add()`. However, `@font-face` and `@keyframes` have are not covered and they are implemented respectively by `sheet.font(definitions)` and `sheet.keyframes(name, definitions)`. The latter automatically generates browser-specific `@-vendor-keyframes` blocks.
+`j2c` considers that an object key matching `/^[-_0-9A-Za-z$]+$/` is a property, and everything else is a (sub-)selector. Since underscores are converted to dashes, it means that property names can be left unquoted, while (sub-)selectors have to be quoted.
 
+Selectors are concatenated as is, while properties are concatenated with hyphens. `{" ul": {" li": {padding: {left:10}}}}` becomes ` ul li{padding-left:10px;}`. `{" p":{".foo":{color:"red"}}}`, is translated to ` p.foo:{color:red;}`.
+
+The properties at a given selector level are guaganteed to appear in the CSS output before the ones of sub-selectors and before those present in nested @-rules.
+
 #### Combining multiple selectors
 
+TODO: refactor this section to mention the SASS-like `&` placeholder (at any arbitrary position).
+
 Here's a excerpt from the `j2c` port of the [PocketGrid](https://github.com/arnaudleray/pocketgrid/blob/44aa1154a56b11a852f7252943f265028c28f056/pocketgrid.css).
 
 ```JavaScript
-j2c("").add({
+j2c.sheet({
   ".block,.blockgroup":{
     ",:before,:after":{          // Notice the initial coma.
-      "box-sizing":"border-box"
+      box_sizing:"border-box"
     }
@@ -244,3 +328,3 @@ }
 .block,.block:before,.block:after,.blockgroup,.blockgroup:before,.blockgroup:after{
-    box-sizing:border-box
+    box-sizing:border-box;
 }
@@ -251,5 +335,38 @@ ```
 
+#### At-rules
+
+`j2c` handles @-rules out of the box, including nested ones.
+
+```JavaScript
+j2c.sheet({
+  "@media screen": {
+    " p": {
+      foo:"bar",
+      "@media (orientation: landscape)": {
+        baz:"qux"
+      }
+    }
+  }
+})
+```
+
+becomes
+
+```CSS
+@media screen {
+  p {
+    foo: bar;
+  }
+  @media (orientation: landscape) {
+    p {
+      baz: qux;
+    }
+  }
+}
+```
+For `@keyframes` rules, a `@-webkit-keyframes` block is automatically created with auto-prefixed property names.
+
 #### CSS Hacks
 
-Since `sheet.add` only accepts property names that match `/^[-_0-9A-Za-z]+$/`, it is not possible to express CSS hacks using objects. You can, however, work around the issue by using arrays and strings instead.
+Since `sheet.add` only accepts property names that match `/^[-_0-9A-Za-z$]+$/`, it is not possible to express CSS hacks using objects. You can, however, work around the issue by using arrays and strings instead.
 
@@ -259,5 +376,5 @@ Here's another modified excerpt from the PocketGrid port:
 ```JavaScript
-j2c("").add({
+j2c.sheet({
   ".blockgroup": [
-    "*zoom: 1; /* hack */",
+    "*zoom: 1; /* hackety hackery */",
     {
@@ -289,98 +406,29 @@ "list-style-type":"none",
 
-### For building inline styles
+#### Mixins redux
 
-Here's an example that demonstrates most of the `j2c.inline` capabilities:
+Arrays works the same way at the selector level as they do at the property/value one. You can therefore use the [method described in the "inline" section](#mixins).
 
-```JavaScript
-j2c.vendors = []
-j2c.inline({
-  background_image: "url(bg.png)",
-  border: {
-    color: ["#33e", "rgba(64,64,255,0.8)"],
-    "top/left": {width: "1px"},
-  }
-  color: ,
-  font: {
-    size: "2em",
-    weight: 700
-  },
-  "*zoom": 1
-})
-```
+### Scoped sheet for components: `j2c.scoped(...)`
 
-Result (paired items are guaranteed to appear in order):
+`j2c.scoped` offers a [`JSS`](https://github.com/jsstyles/jss)-like functionality:
 
-```CSS
-background-image: url(bg.png);
-
-border-color: #33e;
-border-color: rgba(64,64,255,0.8);
-
-border-top-width: 1px;
-border-left-width: 1px;
-
-font-size: 2em;
-
-font-weight: 700;
-
-*zoom: 1;
-```
-
-If order is iportant, use `Arrays`:
-
 ```JavaScript
-j2c.inline([
-  "margin:0",
-  {
-    margin_left:{
-      width: "2px",
-      color: "red"
-    }
-  }
-])
-```
+var sheet = j2c.scoped({
+  foo:{color:"red"},
+  bar:{margin:0}
+});
 
-Becomes
+console.log(sheet.classes);
+// { bit: '.j2c_371971407_1431849941805_0',
+//   bat: '.j2c_371971407_1431849941805_1' }
 
-```CSS
-margin: 0;
-
-// the above is guaranteed to occur before the next two
-
-margin-left-color:red;
-margin-left-width:2px;
+// `sheet` is actually a String object, which can be used as a normal string.
+console.log(sheet+"");
+// '.j2c_371971407_1431849941805_1{bar:6;}.j2c_371971407_1431849941805_0{foo:5;}'
 ```
 
-Also, provided the vendors list isn't empty, each property ends up prefixed by each vendor.
+Unique classes are automatically generated for each scope name. The middle part of the class names ensures that class names are unique even if several instances of `j2c` are used on the page.
 
-```JavaScript
-console.log(j2c.inline({
-    float:"left";
-}));
-```
-... outputs ...
-```CSS
--o-float:left;
--ms-float:left;
--moz-float:left;
--webkit-float:left;
-float:left;
-```
+Scoped sheets can define nested selectors and use at-rules. The full `j2c.sheet()` functionality is available.
 
-## API Reference
-
-### `j2c` and static fields
-
-* `j2c([root:String]) : Sheet`: Creates a Sheet object.
-* `j2c.inline(props:(Object|Array|String)) : String`: returns a declaration list suitable for inline styles
-* `j2c.vendors = ["o", "ms", "moz", "webkit"]` (r/w): list of vendor prefixes.
-
-
-### `Sheet` methods
-
-* `sheet.add(statements:(Object|Array|String)) : Sheet`: add a series of statements to the style sheet. Returns the `Sheet` for chaining.
-* `sheet.font(definitions:(Object|Array|String)) : Sheet`: creates a `@font-face` block. Returns the `Sheet` for chaining.
-* `sheet.keyframes(name:String, statements:(Object|Array|String)) : Sheet`: creates a `@keyframes` block. Returns the `Sheet` for chaining.
-* `sheet.toString() : String`: the stylesheet in string form.
-
 ## Limitations
@@ -401,3 +449,3 @@
 
-If you need some elements to happen in order, use an array of objects.
+If you need some selectors or properties to happen in order, use an array of objects.
 
@@ -421,4 +469,6 @@ ```Javascript
 
+`j2c` puts each selector list and properties on their own lines, but doesn't indent or add other white space.
+
 For debugging purposes, I recommend that you pipe `j2c`'s  output through a [[be](https://github.com/mattbasta/crass) [au](https://github.com/beautify-web/js-beautify) [ti](https://github.com/senchalabs/cssbeautify) [fier](http://csstidy.sourceforge.net/)] of your choice.
 
 ## License: MIT

test/test.js

 var j2c, 
+    // used to normalize styles for reliable comparison.
     crass = require("crass"),
     expect = require("expect.js");
 
-["../dist/j2c.commonjs", "../dist/j2c.commonjs.min", "../dist/inline/j2c.commonjs", "../dist/inline/j2c.commonjs.min"].forEach(function(lib){
-    j2c = require(lib)
-    function check(result, expected){
-        result = crass.parse(result).optimize().toString();
-        expected = (expected instanceof Array ? expected : [expected]).map(function(s){
-            return crass.parse(s).optimize().toString();
-        });
-        expect(expected).to.contain(result);
-    }
 
+function check(result, expected){
+    result = crass.parse(result).optimize().toString();
+
+    // since you can't rely on the order of JS object keys, sometimes, several "expected"
+    // values must be provided.
+    expected = (expected instanceof Array ? expected : [expected]).map(function(s){
+        return crass.parse(s).optimize().toString();
+    });
+    expect(expected).to.contain(result);
+}
+
+
+[
+    "../dist/j2c.commonjs",
+    "../dist/j2c.commonjs.min",
+    "../dist/inline/j2c.commonjs",
+    "../dist/inline/j2c.commonjs.min"
+].forEach(function(lib){
+    var j2c = require(lib)
+
     function checkinline(result, expected){
-        result = "p{" + j2c.inline(result) + "}"
+        result = "p{" + j2c(result) + "}"
         expected = (expected instanceof Array ? expected : [expected]).map(function(s){
@@ -24,7 +36,3 @@ return "p{" + s + "}"
 
-    var vendors = j2c.vendors;
-    j2c.vendors = [];
 
-
-
       /////////////////////////////
@@ -98,3 +106,3 @@ /**/  suite("Inline, ")  /**/
 
-    test("Array of mixed values", function() {
+    test("Array of mixed values at the root", function() {
         checkinline(
@@ -106,2 +114,9 @@ ["foo:bar",{foo:"baz"}],
 
+    test("Array of mixed value and sub-property", function() {
+        checkinline(
+            {foo:["bar", {baz:"qux"}]},
+            "foo:bar;foo-baz:qux"
+        )
+    });
+
     test("Prefixes by hand", function() {
@@ -114,3 +129,3 @@ checkinline(
 
-    test("CSS Hack", function() {
+    test("CSS *Hack", function() {
         checkinline(
@@ -122,4 +137,11 @@ {"*foo":"bar"},
 
+    test("CSS _Hack", function() {
+        checkinline(
+            ["_foo:bar",{_baz:"qux"}],
+            "_foo:bar;-baz:qux;"
+        )
+    });
 
 
+
       ///////////////////////////////////////////
@@ -139,2 +161,19 @@ /**/  suite("Inline auto prefixes, ")  /**/
 
+      /////////////////////////////////
+     /**/  suite("j2c.prefix, ")  /**/
+    /////////////////////////////////
+
+    test("1 x 1", function() {
+        var prod = j2c.prefix(["o"], "foo")
+        expect(prod[0]).to.be("-o-foo")
+        expect(prod[1]).to.be("foo")
+    });
+
+    test("2 x 1", function() {
+        var prod = j2c.prefix(["o", "p"], "foo")
+        expect(prod[0]).to.be("-o-foo")
+        expect(prod[1]).to.be("-p-foo")
+        expect(prod[2]).to.be("foo")
+    });
+
 });
@@ -146,58 +185,24 @@
 ["../dist/j2c.commonjs", "../dist/j2c.commonjs.min"].forEach(function(lib){
-    j2c = require(lib)
-    function check(result, expected){
-        result = crass.parse(result).optimize().toString();
-        expected = (expected instanceof Array ? expected : [expected]).map(function(s){
-            return crass.parse(s).optimize().toString();
-        });
-        expect(expected).to.contain(result);
-    }
+    var j2c = require(lib)
 
-    function checkinline(result, expected){
-        result = "p{" + j2c.inline(result) + "}"
-        expected = (expected instanceof Array ? expected : [expected]).map(function(s){
-            return "p{" + s + "}"
-        });
-        check(result, expected)
-    }
-
     function add(klass, o){
-        return j2c(klass).add(o).toString()
+        var sheet = {}; sheet[" "+klass] = o;
+        return j2c.sheet(sheet) + "";
     }
 
-    var vendors = j2c.vendors;
-    j2c.vendors = [];
 
 
+      ////////////////////////////////
+     /**/  suite("j2c.sheet, ")  /**/
+    ////////////////////////////////
 
-      ///////////////////////////////
-     /**/  suite("Root class")  /**/
-    ///////////////////////////////
 
-
-    test("custom root class", function(){
-        var sheet = j2c("foo")
-        expect(sheet.root).to.be("foo")
+    test("direct sheet call", function(){
         check(
-            sheet.add({foo:"bar"}).toString(),
-            sheet.root + "{foo:bar}"
+            j2c.sheet({" p":{foo:5}}), 
+            "p{foo:5}"
         )
-    });
+    })
 
-    test("default root class", function(){
-        var sheet = j2c()
-        expect(sheet.root[0]).to.be(".")
-        check(
-            sheet.add({foo:"bar"}).toString(),
-            sheet.root + "{foo:bar}"
-        )
-    });
 
-    test("default root class must be unique", function(){
-        var sheet = j2c()
-        expect(j2c().root).not.to.be(j2c().root)
-    });
-
-
-
       //////////////////////////////////
@@ -282,3 +287,3 @@ /**/  suite("Definitions, ")  /**/
 
-            "p .foo{bar:baz} p {foo:bar}"
+            ["p .foo{bar:baz} p {foo:bar}", "p {foo:bar} p .foo{bar:baz}"]
         )
@@ -289,5 +294,5 @@ });
 
-      ///////////////////////////////////////////////
+      /////////////////////////////////////////////////
      /**/  suite("Selector Cartesian product, ")  /**/
-    ///////////////////////////////////////////////
+    /////////////////////////////////////////////////
 
@@ -354,5 +359,34 @@
 
-      ///////////////////////////////////////
+      ////////////////////////////////
+     /**/  suite("Ampersand, ")  /**/
+    /////////////////////////////////
+
+
+    test("composed selector: add a class to the root", function() {
+        check(
+            add("p", {
+                ".foo &":{bar:"baz"}
+            }),
+
+            ".foo p{bar:baz}"
+        )
+    });
+
+    test("2 x 2", function() {
+        check(
+            add("p", {
+                " .foo, .bar":{
+                    " .baz &, .qux &":{
+                        foo:"bar"
+                    }
+                }
+            }),
+
+            ".baz p .foo,.baz p .bar,.qux p .foo,.qux p .bar {foo:bar}"
+        )
+    });
+
+      /////////////////////////////////////////
      /**/  suite("Strings and Arrays, ")  /**/
-    ///////////////////////////////////////
+    /////////////////////////////////////////
 
@@ -367,2 +401,16 @@
 
+    test("String literal with two declarations", function() {
+        check(
+            add("p", "foo:bar;baz:qux"),
+            "p {foo:bar;baz:qux}"
+        )
+    });
+
+    test("String literal starting with an underscore", function() {
+        check(
+            add("p", "_foo:bar"),
+            "p {_foo:bar}"
+        )
+    });
+
     test("Array of String literals", function() {
@@ -409,2 +457,25 @@ check(
 
+      //////////////////////////////////////////
+     /**/  suite("Sheet auto prefixes, ")  /**/
+    //////////////////////////////////////////
+
+    before(function() {j2c.vendors = ["o", "p"]})
+    after(function() {j2c.vendors = []})
+
+    test("String literal", function() {
+        check(
+            add("p", "foo:bar"),
+            "p{-o-foo:bar;-p-foo:bar;foo:bar}"
+        )
+    });
+
+    test("Array of Strings", function() {
+        check(
+            add("p", ["foo:bar", "_baz:qux"]),
+            "p{-o-foo:bar;-p-foo:bar;foo:bar;-o-_baz:qux;-p-_baz:qux;_baz:qux}"
+        )
+    });
+
+
+
       ///////////////////////////////
@@ -468,6 +539,16 @@ /**/  suite("At rules, ")  /**/
 
+    test("nested of At rules", function() {
+        check(
+            add("p", {"@media screen":{width:1000,"@media (max-width: 12cm)":{size:5}}}),
+            [
+                '@media screen{@media (max-width:12cm){p{-o-size:5;-p-size:5;size:5}}p{-o-width:1000;-p-width:1000;width:1000}}',
+                '@media screen{p{-o-width:1000;-p-width:1000;width:1000}@media (max-width:12cm){p{-o-size:5;-p-size:5;size:5}}}'
+                ]
+        )
+    });
+
     test("@font-face", function(){
-        var sheet = j2c("p")
+        var sheet = j2c.scoped("p")
         check(
-            sheet.font({foo:"bar"}).toString(),
+            add("p", {"@font-face":{foo:"bar"}}),
             "@font-face{foo:bar}"
@@ -477,16 +558,21 @@ )
 
+    test("@font-face two fonts", function(){
+        var sheet = j2c.scoped("p")
+        check(
+            add("p", {"@font-face":[{foo:"bar"},{foo:"baz"}]}),
+            "@font-face{foo:bar}@font-face{foo:baz}"
+        )
+    });
+
     test("@keyframes", function(){
-        var sheet = j2c("p")
         check(
-            sheet.keyframes("qux", {
+            add("p", {"@keyframes qux": {
                 " from":{foo:"bar"},
                 " to":{foo:"baz"}
-            }).toString(),
+            }}),
             [
-                "@-o-keyframes qux{from{-o-foo:bar;foo:bar}to{-o-foo:baz;foo:baz}}" +
-                "@-p-keyframes qux{from{-p-foo:bar;foo:bar}to{-p-foo:baz;foo:baz}}" +
+                "@-webkit-keyframes qux{from{-webkit-foo:bar;foo:bar}to{-webkit-foo:baz;foo:baz}}" +
                 "@keyframes qux{from{-o-foo:bar;-p-foo:bar;foo:bar}to{-o-foo:baz;-p-foo:baz;foo:baz}}",
 
-                "@-o-keyframes qux{to{-o-foo:baz;foo:baz}from{-o-foo:bar;foo:bar}}" +
-                "@-p-keyframes qux{to{-p-foo:baz;foo:baz}from{-p-foo:bar;foo:bar}}" +
+                "@-webkit-keyframes qux{to{-webkit-foo:baz;foo:baz}from{-webkit-foo:bar;foo:bar}}" +
                 "@keyframes qux{to{-o-foo:baz;-p-foo:baz;foo:baz}from{-o-foo:bar;-p-foo:bar;foo:bar}}",
@@ -497,2 +583,17 @@ ]
 
+      ////////////////////////////
+     /**/  suite("Scope, ")  /**/
+    ////////////////////////////
+
+
+    test("JSS-like API", function(){
+        var css = j2c.scoped({bit:{foo:5},bat:{bar:6}});
+        expect(css.classes).not.to.be(null);
+        expect(css.classes.bit.slice(0,5)).to.be(".j2c_");
+        expect(css.indexOf(css.classes.bit+"{\nfoo:5;\n}")).not.to.be(-1);
+        expect(css.indexOf(css.classes.bat+"{\nbar:6;\n}")).not.to.be(-1);
+    });
+
+
+
 })
@@ -499,0 +600,0 @@

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

82808

increased by11.16%

Lines of code

1796

increased by21.27%

Number of lines in readme file

463

increased by12.11%

Worsened metrics

Number of package files

24

decreased by-7.69%

No dependency changes