bss - npm Package Compare versions

Comparing version 1.2.8 to 1.2.9

bss.js

@@ -119,9 +119,6 @@ (function (global, factory) {
   function add(style, prop, value) {
-    if (!(prop in style))
-      { return style[prop] = value }
-
-    if (!style._fallback)
-      { Object.defineProperty(style, '_fallback', { configurable: true, value: Object.create(null, {}) }); }
-
-    add(style._fallback, prop, value);
+    if (prop in style)
+      { add(style, '!' + prop, value); }
+    else
+      { style[prop] = value; }
   }
@@ -171,8 +168,2 @@
   function assign(obj, obj2) {
-    if (obj2._fallback) {
-      obj._fallback
-        ? assign(obj._fallback, obj2._fallback)
-        : Object.defineProperty(obj, '_fallback', { value: obj2._fallback });
-    }
-
     for (var key in obj2) {
@@ -198,3 +189,3 @@ if (obj2.hasOwnProperty(key))
 
-  function objectToRules(style, suffix) {
+  function objectToRules(style, selector, suffix, single) {
     if ( suffix === void 0 ) suffix = '';
@@ -206,10 +197,7 @@
 
-    if (style._fallback)
-      { Object.defineProperty(base, '_fallback', { configurable: true, value: style._fallback }); }
-
     Object.keys(style).forEach(function (prop) {
       if (prop.charAt(0) === '@')
-        { rules.push(prop + '{' + objectToRules(style[prop]) + '}'); }
+        { rules.push(prop + '{' + objectToRules(style[prop], selector, suffix, single) + '}'); }
       else if (typeof style[prop] === 'object')
-        { rules = rules.concat(objectToRules(style[prop], suffix + prop)); }
+        { rules = rules.concat(objectToRules(style[prop], selector, suffix + prop, single)); }
       else
@@ -219,4 +207,8 @@ { base[prop] = style[prop]; }
 
-    if (Object.keys(base).length)
-      { rules.unshift((suffix.charAt(0) === ' ' ? '' : '.$' ) + '.$' + suffix + '{' + stylesToCss(base) + '}'); }
+    if (Object.keys(base).length) {
+      rules.unshift(
+        ((single || (suffix.charAt(0) === ' ') ? '' : '&') + '&' + suffix).replace(/&/g, selector) +
+        '{' + stylesToCss(base) + '}'
+      );
+    }
 
@@ -229,4 +221,4 @@ return rules
   function stylesToCss(style) {
-    return Object.keys(style).reduce(function (acc, prop) { return acc + propToString(prop, style[prop]); }
-    , '') + (style._fallback ? stylesToCss(style._fallback) : '')
+    return Object.keys(style).reduce(function (acc, prop) { return acc + propToString(prop.replace(/!/g, ''), style[prop]); }
+    , '')
   }
@@ -298,7 +290,7 @@
 
-    var rules = objectToRules(style)
-        , className = classPrefix + (++count);
+    var className = classPrefix + (++count)
+        , rules = objectToRules(style, '.' + className);
 
     for (var i = 0; i < rules.length; i++)
-      { insert(rules[i].replace(/\.\$/g, '.' + className)); }
+      { insert(rules[i]); }
 
@@ -316,3 +308,3 @@ classes[json] = className;
     var b = chain(bss);
-    assign(b.style, parse.apply(null, arguments));
+    assign(b.__style, parse.apply(null, arguments));
     return b
@@ -328,12 +320,17 @@ }
 
-  Object.defineProperty(bss, 'valueOf', {
-    configurable: true,
-    writable: true,
-    value: function ValueOf() {
-      return '.' + this.class
+  Object.defineProperties(bss, {
+    __style: {
+      configurable: true,
+      writable: true,
+      value: {}
+    },
+    valueOf: {
+      configurable: true,
+      writable: true,
+      value: function ValueOf() {
+        return '.' + this.class
+      }
     }
   });
 
-  bss.style = {};
-
   setProp('setDebug', setDebug);
@@ -352,5 +349,16 @@
     var newInstance = Object.create(bss, {
+      __style: {
+        value: instance.__style
+      },
       style: {
-        value: instance.style,
-        enumerable: true
+        enumerable: true,
+        get: function() {
+          var this$1 = this;
+
+          return Object.keys(this.__style).reduce(function (acc, key) {
+            if (typeof this$1.__style[key] === 'number' || typeof this$1.__style[key] === 'string')
+              { acc[key.replace(/^!/, '')] = this$1.__style[key]; }
+            return acc
+          }, {})
+        }
       }
@@ -360,3 +368,3 @@ });
     if (instance === bss)
-      { bss.style = {}; }
+      { bss.__style = {}; }
 
@@ -386,3 +394,3 @@ return newInstance
   setProp('content', function Content(arg) {
-    this.style.content = '"' + arg + '"';
+    this.__style.content = '"' + arg + '"';
     return chain(this)
@@ -396,3 +404,3 @@ });
     get: function() {
-      return this.__class || createClass(this.style)
+      return this.__class || createClass(this.__style)
     }
@@ -403,3 +411,3 @@ });
     if (value)
-      { add(this.style, '@media ' + value, parse(style)); }
+      { add(this.__style, '@media ' + value, parse(style)); }
 
@@ -420,5 +428,5 @@ return chain(this)
     if (arguments.length === 1)
-      { Object.keys(selector).forEach(function (x) { return addNest(this$1.style, x, selector[x]); }); }
+      { Object.keys(selector).forEach(function (x) { return addNest(this$1.__style, x, selector[x]); }); }
     else if (selector)
-      { addNest(this.style, selector, properties); }
+      { addNest(this.__style, selector, properties); }
 
@@ -434,3 +442,3 @@ return chain(this)
         return (x.charAt(0) === ':' || x.charAt(0) === '[' ? '' : ' ') + x
-      }).join(',.$'),
+      }).join(',&'),
       parse(properties)
@@ -442,3 +450,3 @@ );
       if (value || b)
-        { add(this.style, name + (b ? '(' + value + ')' : ''), parse(b || value)); }
+        { add(this.__style, name + (b ? '(' + value + ')' : ''), parse(b || value)); }
       return chain(this)
@@ -451,5 +459,5 @@ }); }
       if (!value && value !== 0) {
-        delete this.style[prop];
+        delete this.__style[prop];
       } else if (arguments.length > 0) {
-        add(this.style, prop, arguments.length === 1
+        add(this.__style, prop, arguments.length === 1
           ? formatValue(prop, value)
@@ -474,3 +482,3 @@ : Array.prototype.slice.call(arguments).map(function (v) { return addPx(prop, v); }).join(' ')
   function addCss(selector, style) {
-    objectToRules(parse(style)).forEach(function (c) { return insert(c.replace(/\.\$\.?\$?/g, selector)); });
+    objectToRules(parse(style), selector, '', true).forEach(insert);
   }
@@ -490,3 +498,3 @@
           var result = styling.apply(null, arguments);
-          assign(this.style, result.style);
+          assign(this.__style, result.__style);
           return chain(this)
@@ -500,3 +508,3 @@ }
         get: function() {
-          assign(this.style, parse(styling));
+          assign(this.__style, parse(styling));
           return chain(this)
@@ -550,3 +558,3 @@ }
         typeof helper[prop] === 'function'
-          ? assign(acc, helper[prop].apply(helper, tokens).style)
+          ? assign(acc, helper[prop].apply(helper, tokens).__style)
           : assign(acc, helper[prop]);
@@ -594,3 +602,3 @@ } else if (tokens.length > 0) {
 
-    return input.style || sanitize(input)
+    return input.__style || sanitize(input)
   }
@@ -597,0 +605,0 @@

bss.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.b=e()}(this,function(){"use strict";var i={ai:"alignItems",b:"bottom",bc:"backgroundColor",br:"borderRadius",bs:"boxShadow",c:"color",d:"display",f:"float",fd:"flexDirection",ff:"fontFamily",fs:"fontSize",h:"height",jc:"justifyContent",l:"left",lh:"lineHeight",ls:"letterSpacing",m:"margin",mb:"marginBottom",ml:"marginLeft",mr:"marginRight",mt:"marginTop",o:"opacity",p:"padding",pb:"paddingBottom",pl:"paddingLeft",pr:"paddingRight",pt:"paddingTop",r:"right",t:"top",ta:"textAlign",td:"textDecoration",tt:"textTransform",w:"width"},a=["float"].concat(Object.keys(function t(e){return e.hasOwnProperty("width")?e:t(Object.getPrototypeOf(e))}(document.documentElement.style)).filter(function(t){return-1===t.indexOf("-")&&"length"!==t}));var t=function(e,n){return void 0===n&&(n={}),function(t){return t in n?n[t]:n[t]=e(t)}};function f(t,e,n){if(!(e in t))return t[e]=n;t._fallback||Object.defineProperty(t,"_fallback",{configurable:!0,value:Object.create(null,{})}),f(t._fallback,e,n)}var o=Object.create(null,{}),c=Object.create(null,{}),l=/^(o|O|ms|MS|Ms|moz|Moz|webkit|Webkit|WebKit)([A-Z])/,n=t(function(t){var e=document.createElement("div");try{return e.style[t]="1px",e.style.setProperty(t,"1px"),"1px"===e.style[t].slice(-3)?"px":""}catch(t){return""}},{flex:"",boxShadow:"px",border:"px"});function u(t,e){for(var n in e._fallback&&(t._fallback?u(t._fallback,e._fallback):Object.defineProperty(t,"_fallback",{value:e._fallback})),e)e.hasOwnProperty(n)&&(t[n]=e[n])}function s(t){return t.slice("-"===t.charAt(0)?1:0).replace(/-([a-z])/g,function(t){return t[1].toUpperCase()})}function h(e,n){void 0===n&&(n="");var r={},i=[];return e._fallback&&Object.defineProperty(r,"_fallback",{configurable:!0,value:e._fallback}),Object.keys(e).forEach(function(t){"@"===t.charAt(0)?i.push(t+"{"+h(e[t])+"}"):"object"==typeof e[t]?i=i.concat(h(e[t],n+t)):r[t]=e[t]}),Object.keys(r).length&&i.unshift((" "===n.charAt(0)?"":".$")+".$"+n+"{"+p(r)+"}"),i}var r=/,(?=(?:(?:[^"]*"){2})*[^"]*$)/;function p(i){return Object.keys(i).reduce(function(t,e){return t+(r=i[n=e],(l.test(n)?"-":"")+("-"===n.charAt(0)&&"-"===n.charAt(1)?n:n.replace(/([A-Z])/g,"-$1").toLowerCase())+":"+r+";");var n,r},"")+(i._fallback?p(i._fallback):"")}function d(t,e){return e in c?c[e]:y(t,e)}function y(t,e){return e+(isNaN(e)?"":n(t))}var e=window.document,b=e&&e.createElement("style");b&&e.head.appendChild(b);var g=b&&b.sheet,m=!1,v=Object.create(null,{}),j=[],k=0,O="b"+("000"+(46656*Math.random()|0).toString(36)).slice(-3)+("000"+(46656*Math.random()|0).toString(36)).slice(-3);function x(t,e){if(j.push(t),m)return b.textContent=j.join("\n");g&&g.insertRule(t,1<arguments.length?e:g.cssRules.length)}var A=Object.create(null);function _(t,e){var n=$(_);return u(n.style,D.apply(null,arguments)),n}function w(t,e){Object.defineProperty(_,t,{configurable:!0,value:e})}function $(t){var e=Object.create(_,{style:{value:t.style,enumerable:!0}});return t===_&&(_.style={}),e}function P(t,e,n){f(t,e.split(r).map(function(t){return(":"===(t=t.trim()).charAt(0)||"["===t.charAt(0)?"":" ")+t}).join(",.$"),D(n))}function E(e){return function(t){return t||0===t?0<arguments.length&&f(this.style,e,1===arguments.length?d(e,t):Array.prototype.slice.call(arguments).map(function(t){return y(e,t)}).join(" ")):delete this.style[e],$(this)}}function C(e,t){h(D(t)).forEach(function(t){return x(t.replace(/\.\$\.?\$?/g,e))})}function S(e,n){if(1===arguments.length)return Object.keys(e).forEach(function(t){return S(t,e[t])});delete _[e],"function"==typeof n?(S[e]=n,Object.defineProperty(_,e,{configurable:!0,value:function(){var t=n.apply(null,arguments);return u(this.style,t.style),$(this)}})):(S[e]=D(n),Object.defineProperty(_,e,{configurable:!0,get:function(){return u(this.style,D(n)),$(this)}}))}function L(t){var e,n=(e=t).charAt(0)+(e.match(/([A-Z])/g)||[]).join("").toLowerCase(),r=i[n]&&i[n]!==t?t:n;return A[r]=t,r}Object.defineProperty(_,"valueOf",{configurable:!0,writable:!0,value:function(){return"."+this.class}}),_.style={},w("setDebug",function(t){m=t}),w("$keyframes",function(n){var t=Object.keys(n).reduce(function(t,e){return t+e+"{"+p(D(n[e]))+"}"},"");if(t in z)return z[t];var e=O+R++;return x("@keyframes "+(z[t]=e)+"{"+t+"}"),e}),w("$media",function(t,e){t&&f(this.style,"@media "+t,D(e));return $(this)}),w("$import",function(t){t&&x("@import "+t+";",0);return $(this)}),w("$nest",function(e,t){var n=this;1===arguments.length?Object.keys(e).forEach(function(t){return P(n.style,t,e[t])}):e&&P(this.style,e,t);return $(this)}),w("getSheet",function(){var t=j.join("");return j=[],v=Object.create(null,{}),k=0,t}),w("helper",S),w("css",function(e,t){1===arguments.length?Object.keys(e).forEach(function(t){return C(t,e[t])}):C(e,t);return $(this)}),w("classPrefix",O),a.forEach(function(t){var e,n=t.match(l);if(n){var r=(e=t.replace(l,"$2")).charAt(0).toLowerCase()+e.slice(1);if(-1===a.indexOf(r))return"flexDirection"===r&&(c.flex="-"+n[1].toLowerCase()+"-flex"),w(r,E(o[r]=t)),void w(L(r),_[r])}w(t,E(t)),w(L(t),_[t])}),w("content",function(t){return this.style.content='"'+t+'"',$(this)}),Object.defineProperty(_,"class",{set:function(t){this.__class=t},get:function(){return this.__class||function(t){var e=JSON.stringify(t);if(e in v)return v[e];for(var n=h(t),r=O+ ++k,i=0;i<n.length;i++)x(n[i].replace(/\.\$/g,"."+r));return v[e]=r}(this.style)}}),[":active",":any",":checked",":default",":disabled",":empty",":enabled",":first",":first-child",":first-of-type",":fullscreen",":focus",":hover",":indeterminate",":in-range",":invalid",":last-child",":last-of-type",":left",":link",":only-child",":only-of-type",":optional",":out-of-range",":read-only",":read-write",":required",":right",":root",":scope",":target",":valid",":visited",":dir",":lang",":not",":nth-child",":nth-last-child",":nth-last-of-type",":nth-of-type","::after","::before","::first-letter","::first-line","::selection","::backdrop","::placeholder","::marker","::spelling-error","::grammar-error"].forEach(function(n){return w("$"+s(n.replace(/:/g,"")),function(t,e){return(t||e)&&f(this.style,n+(e?"("+t+")":""),D(e||t)),$(this)})}),_.helper("$animate",function(t,e){return _.animation(_.$keyframes(e)+" "+t)});var M=t(function(t){var o,l="";return t.trim().split(/;|\n/).reduce(function(t,e){if(e=l+e.trim(),l=","===e.charAt(e.length-1)?e:"")return t;if(","===e.charAt(0))return t[o]+=e,t;var n=e.replace(/[ :]+/," ").split(" "),r=n[0],i=n.slice(1);if(!r)return t;var a="-"===r.charAt(0)&&"-"===r.charAt(1),c=a?r:s(r);return o=A[c]||c,c in S?u(t,"function"==typeof S[c]?S[c].apply(S,i).style:S[c]):0<i.length&&f(t,o,i.map(function(t){return a?t:y(o,t)}).join(" ")),t},{})}),R=0,z={};function D(t,e){var n,r,i=arguments;if("string"==typeof t)return"string"==typeof e||"number"==typeof e?((n={})[t]=e,n):M(t);if(Array.isArray(t)&&"string"==typeof t[0]){for(var a="",c=0;c<t.length;c++)a+=t[c]+(i[c+1]||"");return M(a)}return t.style||(r=t,Object.keys(r).reduce(function(t,e){var n=r[e];return(n||0===n||""===n)&&("content"===e&&'"'!==n.charAt(0)?t[e]='"'+n+'"':t[e in o?o[e]:e]=d(e,n)),t},{}))}return _});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.b=e()}(this,function(){"use strict";var i={ai:"alignItems",b:"bottom",bc:"backgroundColor",br:"borderRadius",bs:"boxShadow",c:"color",d:"display",f:"float",fd:"flexDirection",ff:"fontFamily",fs:"fontSize",h:"height",jc:"justifyContent",l:"left",lh:"lineHeight",ls:"letterSpacing",m:"margin",mb:"marginBottom",ml:"marginLeft",mr:"marginRight",mt:"marginTop",o:"opacity",p:"padding",pb:"paddingBottom",pl:"paddingLeft",pr:"paddingRight",pt:"paddingTop",r:"right",t:"top",ta:"textAlign",td:"textDecoration",tt:"textTransform",w:"width"},o=["float"].concat(Object.keys(function t(e){return e.hasOwnProperty("width")?e:t(Object.getPrototypeOf(e))}(document.documentElement.style)).filter(function(t){return-1===t.indexOf("-")&&"length"!==t}));var t=function(e,n){return void 0===n&&(n={}),function(t){return t in n?n[t]:n[t]=e(t)}};function l(t,e,n){e in t?l(t,"!"+e,n):t[e]=n}var a=Object.create(null,{}),c=Object.create(null,{}),u=/^(o|O|ms|MS|Ms|moz|Moz|webkit|Webkit|WebKit)([A-Z])/,n=t(function(t){var e=document.createElement("div");try{return e.style[t]="1px",e.style.setProperty(t,"1px"),"1px"===e.style[t].slice(-3)?"px":""}catch(t){return""}},{flex:"",boxShadow:"px",border:"px"});function f(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])}function s(t){return t.slice("-"===t.charAt(0)?1:0).replace(/-([a-z])/g,function(t){return t[1].toUpperCase()})}function h(e,n,r,i){void 0===r&&(r="");var o={},c=[];return Object.keys(e).forEach(function(t){"@"===t.charAt(0)?c.push(t+"{"+h(e[t],n,r,i)+"}"):"object"==typeof e[t]?c=c.concat(h(e[t],n,r+t,i)):o[t]=e[t]}),Object.keys(o).length&&c.unshift(((i||" "===r.charAt(0)?"":"&")+"&"+r).replace(/&/g,n)+"{"+p(o)+"}"),c}var r=/,(?=(?:(?:[^"]*"){2})*[^"]*$)/;function p(i){return Object.keys(i).reduce(function(t,e){return t+(n=e.replace(/!/g,""),r=i[e],(u.test(n)?"-":"")+("-"===n.charAt(0)&&"-"===n.charAt(1)?n:n.replace(/([A-Z])/g,"-$1").toLowerCase())+":"+r+";");var n,r},"")}function y(t,e){return e in c?c[e]:d(t,e)}function d(t,e){return e+(isNaN(e)?"":n(t))}var e=window.document,g=e&&e.createElement("style");g&&e.head.appendChild(g);var b=g&&g.sheet,m=!1,_=Object.create(null,{}),v=[],j=0,O="b"+("000"+(46656*Math.random()|0).toString(36)).slice(-3)+("000"+(46656*Math.random()|0).toString(36)).slice(-3);function x(t,e){if(v.push(t),m)return g.textContent=v.join("\n");b&&b.insertRule(t,1<arguments.length?e:b.cssRules.length)}var A=Object.create(null);function k(t,e){var n=E(k);return f(n.__style,D.apply(null,arguments)),n}function w(t,e){Object.defineProperty(k,t,{configurable:!0,value:e})}function E(t){var e=Object.create(k,{__style:{value:t.__style},style:{enumerable:!0,get:function(){var n=this;return Object.keys(this.__style).reduce(function(t,e){return"number"!=typeof n.__style[e]&&"string"!=typeof n.__style[e]||(t[e.replace(/^!/,"")]=n.__style[e]),t},{})}}});return t===k&&(k.__style={}),e}function P(t,e,n){l(t,e.split(r).map(function(t){return(":"===(t=t.trim()).charAt(0)||"["===t.charAt(0)?"":" ")+t}).join(",&"),D(n))}function $(e){return function(t){return t||0===t?0<arguments.length&&l(this.__style,e,1===arguments.length?y(e,t):Array.prototype.slice.call(arguments).map(function(t){return d(e,t)}).join(" ")):delete this.__style[e],E(this)}}function C(t,e){h(D(e),t,"",!0).forEach(x)}function S(e,n){if(1===arguments.length)return Object.keys(e).forEach(function(t){return S(t,e[t])});delete k[e],"function"==typeof n?(S[e]=n,Object.defineProperty(k,e,{configurable:!0,value:function(){var t=n.apply(null,arguments);return f(this.__style,t.__style),E(this)}})):(S[e]=D(n),Object.defineProperty(k,e,{configurable:!0,get:function(){return f(this.__style,D(n)),E(this)}}))}function L(t){var e,n=(e=t).charAt(0)+(e.match(/([A-Z])/g)||[]).join("").toLowerCase(),r=i[n]&&i[n]!==t?t:n;return A[r]=t,r}Object.defineProperties(k,{__style:{configurable:!0,writable:!0,value:{}},valueOf:{configurable:!0,writable:!0,value:function(){return"."+this.class}}}),w("setDebug",function(t){m=t}),w("$keyframes",function(n){var t=Object.keys(n).reduce(function(t,e){return t+e+"{"+p(D(n[e]))+"}"},"");if(t in z)return z[t];var e=O+R++;return x("@keyframes "+(z[t]=e)+"{"+t+"}"),e}),w("$media",function(t,e){t&&l(this.__style,"@media "+t,D(e));return E(this)}),w("$import",function(t){t&&x("@import "+t+";",0);return E(this)}),w("$nest",function(e,t){var n=this;1===arguments.length?Object.keys(e).forEach(function(t){return P(n.__style,t,e[t])}):e&&P(this.__style,e,t);return E(this)}),w("getSheet",function(){var t=v.join("");return v=[],_=Object.create(null,{}),j=0,t}),w("helper",S),w("css",function(e,t){1===arguments.length?Object.keys(e).forEach(function(t){return C(t,e[t])}):C(e,t);return E(this)}),w("classPrefix",O),o.forEach(function(t){var e,n=t.match(u);if(n){var r=(e=t.replace(u,"$2")).charAt(0).toLowerCase()+e.slice(1);if(-1===o.indexOf(r))return"flexDirection"===r&&(c.flex="-"+n[1].toLowerCase()+"-flex"),w(r,$(a[r]=t)),void w(L(r),k[r])}w(t,$(t)),w(L(t),k[t])}),w("content",function(t){return this.__style.content='"'+t+'"',E(this)}),Object.defineProperty(k,"class",{set:function(t){this.__class=t},get:function(){return this.__class||function(t){var e=JSON.stringify(t);if(e in _)return _[e];for(var n=O+ ++j,r=h(t,"."+n),i=0;i<r.length;i++)x(r[i]);return _[e]=n}(this.__style)}}),[":active",":any",":checked",":default",":disabled",":empty",":enabled",":first",":first-child",":first-of-type",":fullscreen",":focus",":hover",":indeterminate",":in-range",":invalid",":last-child",":last-of-type",":left",":link",":only-child",":only-of-type",":optional",":out-of-range",":read-only",":read-write",":required",":right",":root",":scope",":target",":valid",":visited",":dir",":lang",":not",":nth-child",":nth-last-child",":nth-last-of-type",":nth-of-type","::after","::before","::first-letter","::first-line","::selection","::backdrop","::placeholder","::marker","::spelling-error","::grammar-error"].forEach(function(n){return w("$"+s(n.replace(/:/g,"")),function(t,e){return(t||e)&&l(this.__style,n+(e?"("+t+")":""),D(e||t)),E(this)})}),k.helper("$animate",function(t,e){return k.animation(k.$keyframes(e)+" "+t)});var M=t(function(t){var a,u="";return t.trim().split(/;|\n/).reduce(function(t,e){if(e=u+e.trim(),u=","===e.charAt(e.length-1)?e:"")return t;if(","===e.charAt(0))return t[a]+=e,t;var n=e.replace(/[ :]+/," ").split(" "),r=n[0],i=n.slice(1);if(!r)return t;var o="-"===r.charAt(0)&&"-"===r.charAt(1),c=o?r:s(r);return a=A[c]||c,c in S?f(t,"function"==typeof S[c]?S[c].apply(S,i).__style:S[c]):0<i.length&&l(t,a,i.map(function(t){return o?t:d(a,t)}).join(" ")),t},{})}),R=0,z={};function D(t,e){var n,r,i=arguments;if("string"==typeof t)return"string"==typeof e||"number"==typeof e?((n={})[t]=e,n):M(t);if(Array.isArray(t)&&"string"==typeof t[0]){for(var o="",c=0;c<t.length;c++)o+=t[c]+(i[c+1]||"");return M(o)}return t.__style||(r=t,Object.keys(r).reduce(function(t,e){var n=r[e];return(n||0===n||""===n)&&("content"===e&&'"'!==n.charAt(0)?t[e]='"'+n+'"':t[e in a?a[e]:e]=y(e,n)),t},{}))}return k});
 //# sourceMappingURL=bss.min.js.map

CHANGELOG.md

 ## [Unreleased]
 
+## 1.2.9 -
+Add `&` to `$nest` as class placeholder (like sass/less)
+Fix same named props disappearing
+Clean up style output
+Fix raw browser module usage (added file extensions)
+
 ## 1.2.8 -
@@ -4,0 +10,0 @@ Remove String.raw requirement

lib/index.js

 /* eslint no-invalid-this: 0 */
-import pseudos from './pseudos'
-import popular from './popular'
+import pseudos from './pseudos.js'
+import popular from './popular.js'
 
@@ -36,3 +36,3 @@ import {
   const b = chain(bss)
-  assign(b.style, parse.apply(null, arguments))
+  assign(b.__style, parse.apply(null, arguments))
   return b
@@ -48,12 +48,17 @@ }
 
-Object.defineProperty(bss, 'valueOf', {
-  configurable: true,
-  writable: true,
-  value: function ValueOf() {
-    return '.' + this.class
+Object.defineProperties(bss, {
+  __style: {
+    configurable: true,
+    writable: true,
+    value: {}
+  },
+  valueOf: {
+    configurable: true,
+    writable: true,
+    value: function ValueOf() {
+      return '.' + this.class
+    }
   }
 })
 
-bss.style = {}
-
 setProp('setDebug', setDebug)
@@ -72,5 +77,14 @@
   const newInstance = Object.create(bss, {
+    __style: {
+      value: instance.__style
+    },
     style: {
-      value: instance.style,
-      enumerable: true
+      enumerable: true,
+      get: function() {
+        return Object.keys(this.__style).reduce((acc, key) => {
+          if (typeof this.__style[key] === 'number' || typeof this.__style[key] === 'string')
+            acc[key.replace(/^!/, '')] = this.__style[key]
+          return acc
+        }, {})
+      }
     }
@@ -80,3 +94,3 @@ })
   if (instance === bss)
-    bss.style = {}
+    bss.__style = {}
 
@@ -106,3 +120,3 @@ return newInstance
 setProp('content', function Content(arg) {
-  this.style.content = '"' + arg + '"'
+  this.__style.content = '"' + arg + '"'
   return chain(this)
@@ -116,3 +130,3 @@ })
   get: function() {
-    return this.__class || createClass(this.style)
+    return this.__class || createClass(this.__style)
   }
@@ -123,3 +137,3 @@ })
   if (value)
-    add(this.style, '@media ' + value, parse(style))
+    add(this.__style, '@media ' + value, parse(style))
 
@@ -138,5 +152,5 @@ return chain(this)
   if (arguments.length === 1)
-    Object.keys(selector).forEach(x => addNest(this.style, x, selector[x]))
+    Object.keys(selector).forEach(x => addNest(this.__style, x, selector[x]))
   else if (selector)
-    addNest(this.style, selector, properties)
+    addNest(this.__style, selector, properties)
 
@@ -152,3 +166,3 @@ return chain(this)
       return (x.charAt(0) === ':' || x.charAt(0) === '[' ? '' : ' ') + x
-    }).join(',.$'),
+    }).join(',&'),
     parse(properties)
@@ -161,3 +175,3 @@ )
     if (value || b)
-      add(this.style, name + (b ? '(' + value + ')' : ''), parse(b || value))
+      add(this.__style, name + (b ? '(' + value + ')' : ''), parse(b || value))
     return chain(this)
@@ -170,5 +184,5 @@ })
     if (!value && value !== 0) {
-      delete this.style[prop]
+      delete this.__style[prop]
     } else if (arguments.length > 0) {
-      add(this.style, prop, arguments.length === 1
+      add(this.__style, prop, arguments.length === 1
         ? formatValue(prop, value)
@@ -193,3 +207,3 @@ : Array.prototype.slice.call(arguments).map(v => addPx(prop, v)).join(' ')
 function addCss(selector, style) {
-  objectToRules(parse(style)).forEach(c => insert(c.replace(/\.\$\.?\$?/g, selector)))
+  objectToRules(parse(style), selector, '', true).forEach(insert)
 }
@@ -209,3 +223,3 @@
         const result = styling.apply(null, arguments)
-        assign(this.style, result.style)
+        assign(this.__style, result.__style)
         return chain(this)
@@ -219,3 +233,3 @@ }
       get: function() {
-        assign(this.style, parse(styling))
+        assign(this.__style, parse(styling))
         return chain(this)
@@ -268,3 +282,3 @@ }
       typeof helper[prop] === 'function'
-        ? assign(acc, helper[prop](...tokens).style)
+        ? assign(acc, helper[prop](...tokens).__style)
         : assign(acc, helper[prop])
@@ -310,5 +324,5 @@ } else if (tokens.length > 0) {
 
-  return input.style || sanitize(input)
+  return input.__style || sanitize(input)
 }
 
 export default bss

lib/keyframes.js

@@ -1,2 +0,2 @@
-import { insert, classPrefix } from './sheet'
+import { insert, classPrefix } from './sheet.js'
 
@@ -8,3 +8,3 @@ let count = 0
   const content = Object.keys(props).reduce((acc, key) =>
-    acc + key + '{' + props[key].style || props[key] + '}'
+    acc + key + '{' + props[key].__style || props[key] + '}'
   , '')
@@ -11,0 +11,0 @@

lib/sheet.js

 import {
   objectToRules
-} from './utils'
+} from './utils.js'
 
@@ -48,7 +48,7 @@ const document = window.document
 
-  const rules = objectToRules(style)
-      , className = classPrefix + (++count)
+  const className = classPrefix + (++count)
+      , rules = objectToRules(style, '.' + className)
 
   for (let i = 0; i < rules.length; i++)
-    insert(rules[i].replace(/\.\$/g, '.' + className))
+    insert(rules[i])
 
@@ -55,0 +55,0 @@ classes[json] = className

lib/utils.js

@@ -17,9 +17,6 @@ export const cssProperties = ['float'].concat(Object.keys(
 export function add(style, prop, value) {
-  if (!(prop in style))
-    return style[prop] = value
-
-  if (!style._fallback)
-    Object.defineProperty(style, '_fallback', { configurable: true, value: Object.create(null, {}) })
-
-  add(style._fallback, prop, value)
+  if (prop in style)
+    add(style, '!' + prop, value)
+  else
+    style[prop] = value
 }
@@ -69,8 +66,2 @@
 export function assign(obj, obj2) {
-  if (obj2._fallback) {
-    obj._fallback
-      ? assign(obj._fallback, obj2._fallback)
-      : Object.defineProperty(obj, '_fallback', { value: obj2._fallback })
-  }
-
   for (const key in obj2) {
@@ -96,3 +87,3 @@ if (obj2.hasOwnProperty(key))
 
-export function objectToRules(style, suffix = '') {
+export function objectToRules(style, selector, suffix = '', single) {
   const base = {}
@@ -102,10 +93,7 @@
 
-  if (style._fallback)
-    Object.defineProperty(base, '_fallback', { configurable: true, value: style._fallback })
-
   Object.keys(style).forEach(prop => {
     if (prop.charAt(0) === '@')
-      rules.push(prop + '{' + objectToRules(style[prop]) + '}')
+      rules.push(prop + '{' + objectToRules(style[prop], selector, suffix, single) + '}')
     else if (typeof style[prop] === 'object')
-      rules = rules.concat(objectToRules(style[prop], suffix + prop))
+      rules = rules.concat(objectToRules(style[prop], selector, suffix + prop, single))
     else
@@ -115,4 +103,8 @@ base[prop] = style[prop]
 
-  if (Object.keys(base).length)
-    rules.unshift((suffix.charAt(0) === ' ' ? '' : '.$' ) + '.$' + suffix + '{' + stylesToCss(base) + '}')
+  if (Object.keys(base).length) {
+    rules.unshift(
+      ((single || (suffix.charAt(0) === ' ') ? '' : '&') + '&' + suffix).replace(/&/g, selector) +
+      '{' + stylesToCss(base) + '}'
+    )
+  }
 
@@ -126,4 +118,4 @@ return rules
   return Object.keys(style).reduce((acc, prop) =>
-    acc + propToString(prop, style[prop])
-  , '') + (style._fallback ? stylesToCss(style._fallback) : '')
+    acc + propToString(prop.replace(/!/g, ''), style[prop])
+  , '')
 }
@@ -130,0 +122,0 @@

package.json

 {
   "name": "bss",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "Better Style Sheets",
@@ -5,0 +5,0 @@ "main": "bss.js",

README.md

@@ -243,4 +243,7 @@ [![version](https://img.shields.io/npm/v/bss.svg)]() [![gzipped](http://img.badgesize.io/porsager/bss/master/bss.js.svg?compression=gzip&label=gzipped)]() [![license](https://img.shields.io/github/license/porsager/wright.svg)]()
 b.color('red').$nest(':hover li', b.color('blue'))
+b.color('red').$nest('> &', b.margin(10))
 ```
 
+`&` is a placeholder for the generated class like in `sass/less`.
+
 ## `.$media` @media queries
@@ -290,2 +293,12 @@
 
+## `.setDebug`
+
+Since chrome dev tools doesn't allow changing styles applied using CSSOM you can activate debugging mode which doesn't apply the styles using CSSOM.
+
+```
+b.setDebug(true)
+```
+
+The only caveat here is that animations and applied styles can result in small quicks like blinking fonts and styles.
+
 ## Browser support
@@ -292,0 +305,0 @@ `bss` is tested and works in ie9+ and the other major browsers.

tests/index.js

@@ -31,2 +31,3 @@ const o = require('ospec')
     style: {
+      color: '',
       animation: '',
@@ -78,2 +79,10 @@ display: '',
 
+  o('common style class reuse', function() {
+    const cls = b`foo: bar;`.class
+        , cls2 = b`foo: bar;`.class
+
+    o(cls).equals(cls2)
+    o(b.getSheet()).equals(`.${cls}.${cls}{foo:bar;}`)
+  })
+
   o('values can have colons', function() {
@@ -91,2 +100,18 @@ const cls = b`
 
+  o('same named props', function() {
+    const cls1 = b`
+      c blue
+      bc white
+    `.class
+    const cls2 = b`
+      c blue
+      bc white
+      c white
+    `.class
+    o(b.getSheet()).equals([
+      `.${cls1}.${cls1}{color:blue;background-color:white;}`,
+      `.${cls2}.${cls2}{color:blue;background-color:white;color:white;}`
+    ].join(''))
+  })
+
   o('same named properties string', function() {
@@ -105,2 +130,6 @@ const cls = b`
 
+  o('same named properties style', function() {
+    o(b.d('-webkit-flex').d('flex').style).deepEquals({display:'flex'})
+  })
+
   o('empty content string is set to ""', function() {
@@ -136,2 +165,7 @@ const cls = b.$before(b.content('')).$after(b({ content: '' })).class
 
+  o('nest with ampersand', function() {
+    const cls = b.$nest({ 'th &' : b('background blue') }).class
+    o(b.getSheet()).equals(`.${cls} th .${cls}{background:blue;}`)
+  })
+
   o('add px', function() {
@@ -138,0 +172,0 @@ o(b`w 1`.style).deepEquals({ width: '1px' })

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

114366

increased by1.44%

Lines of code

1525

increased by3.53%

Number of lines in readme file

314

increased by4.32%

No dependency changes