bss - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

bss.js

@@ -7,40 +7,2 @@ (function (global, factory) {
 
-  var popular = {
-    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'
-  };
-
-  var shorts = Object.create(null);
-
   var cssProperties = ['float'].concat(Object.keys(
@@ -64,27 +26,2 @@ findWidth(document.documentElement.style)
 
-  var stringToObject = memoize(function (string) {
-    var last = ''
-      , prev;
-
-    return string.trim().replace(/;/g, '\n').split('\n').reduce(function (acc, line) {
-      line = last + line.trim();
-      last = line.slice(-1) === ',' ? line : '';
-      if (last)
-        { return acc }
-
-      if (line.charAt(0) === ',') {
-        acc[prev] += line;
-        return acc
-      }
-
-      var tokens = line.split(/[:\s]/);
-      if (tokens.length > 1) {
-        var key = hyphenToCamelCase(tokens.shift().trim());
-        prev = shorts[key] || key;
-        add(acc, prev, tokens.filter(function (a) { return a; }).reduce(function (acc, t) { return acc + addPx(prev, t.trim()) + ' '; }, '').trim());
-      }
-      return acc
-    }, {})
-  });
-
   function add(style, prop, value) {
@@ -105,18 +42,2 @@ if (!(prop in style))
 
-  function parse(input, value) {
-    var obj;
-
-    if (typeof input === 'string') {
-      if (typeof value === 'string' || typeof value === 'number')
-        { return (( obj = {}, obj[input] = value, obj )) }
-
-      return stringToObject(input)
-    } else if (Array.isArray(input) && Array.isArray(input.raw)) {
-      arguments[0] = { raw: input };
-      return stringToObject(String.raw.apply(null, arguments))
-    }
-
-    return input.style || sanitize(input)
-  }
-
   var appendPx = memoize(function (prop) {
@@ -170,3 +91,3 @@ var el = document.createElement('div');
   function hyphenToCamelCase(hyphen) {
-    return hyphen.slice(hyphen.charAt(0) === '-' ? 1 : 0).replace(/-([a-z])/g, function(match) {
+    return hyphen.slice(hyphen.charAt(0) === '-' && hyphen.charAt(1) !== '-' ? 1 : 0).replace(/-([a-z])/g, function(match) {
       return match[1].toUpperCase()
@@ -184,10 +105,2 @@ })
 
-  function short(prop) {
-    var acronym = initials(prop)
-        , short = popular[acronym] && popular[acronym] !== prop ? prop : acronym;
-
-    shorts[short] = prop;
-    return short
-  }
-
   function objectToRules(style, suffix) {
@@ -213,3 +126,3 @@ if ( suffix === void 0 ) suffix = '';
     if (Object.keys(base).length)
-      { rules.unshift(selectorBlock((suffix.charAt(0) === ' ' ? '' : '.$' ) + '.$' + suffix, base)); }
+      { rules.unshift((suffix.charAt(0) === ' ' ? '' : '.$' ) + '.$' + suffix + '{' + stylesToCss(base) + '}'); }
 
@@ -219,8 +132,2 @@ return rules
 
-  function selectorBlock(selector, style) {
-    return selector + '{'
-      + stylesToCss((typeof style === 'string' ? stringToObject(style) : style))
-      + '}'
-  }
-
   var selectorSplit = /,(?=(?:(?:[^"]*"){2})*[^"]*$)/;
@@ -305,3 +212,3 @@
   function keyframes(props) {
-    var content = Object.keys(props).reduce(function (acc, key) { return acc + selectorBlock(key, props[key].style || props[key]); }
+    var content = Object.keys(props).reduce(function (acc, key) { return acc + key + '{' + props[key].style || props[key] + '}'; }
     , '');
@@ -376,5 +283,44 @@
 
+  var popular = {
+    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'
+  };
+
+  var shorts = Object.create(null);
+
   function bss(input, value) {
-    assign(bss.style, parse.apply(null, arguments));
-    return chain(bss)
+    var b = chain(bss);
+    assign(b.style, parse.apply(null, arguments));
+    return b
   }
@@ -498,3 +444,3 @@
 
-    insert(selectorBlock(selector, parse(style)), 0);
+    insert(selector + '{' + parse(style) + '}', 0);
   }
@@ -507,4 +453,5 @@
     delete bss[name]; // Needed to avoid weird get calls in chrome
-    typeof styling === 'object'
-      ?
+
+    if (typeof styling === 'object') {
+      helper[name] = parse(styling);
       Object.defineProperty(bss, name, {
@@ -516,4 +463,5 @@ configurable: true,
         }
-      })
-      :
+      });
+    } else {
+      helper[name] = styling;
       Object.defineProperty(bss, name, {
@@ -527,2 +475,3 @@ configurable: true,
       });
+    }
   }
@@ -533,2 +482,58 @@
 
+  function short(prop) {
+    var acronym = initials(prop)
+        , short = popular[acronym] && popular[acronym] !== prop ? prop : acronym;
+
+    shorts[short] = prop;
+    return short
+  }
+
+  var stringToObject = memoize(function (string) {
+    var last = ''
+      , prev;
+
+    return string.trim().split(/;|\n/).reduce(function (acc, line) {
+      line = last + line.trim();
+      last = line.charAt(line.length - 1) === ',' ? line : '';
+      if (last)
+        { return acc }
+
+      if (line.charAt(0) === ',') {
+        acc[prev] += line;
+        return acc
+      }
+
+      var tokens = line.split(/[:\s]/)
+          , key = hyphenToCamelCase(tokens.shift().trim());
+
+      prev = shorts[key] || key;
+
+      if (key in helper) {
+        typeof helper[key] === 'function'
+          ? assign(acc, helper[key].apply(helper, tokens.filter(function (a) { return a; }).map(function (a) { return a.trim(); })).style)
+          : assign(acc, helper[key]);
+      } else if (tokens.length > 0) {
+        add(acc, prev, tokens.filter(function (a) { return a; }).reduce(function (acc, t) { return acc + addPx(prev, t.trim()) + ' '; }, '').trim());
+      }
+
+      return acc
+    }, {})
+  });
+
+  function parse(input, value) {
+    var obj;
+
+    if (typeof input === 'string') {
+      if (typeof value === 'string' || typeof value === 'number')
+        { return (( obj = {}, obj[input] = value, obj )) }
+
+      return stringToObject(input)
+    } else if (Array.isArray(input) && Array.isArray(input.raw)) {
+      arguments[0] = { raw: input };
+      return stringToObject(String.raw.apply(null, arguments))
+    }
+
+    return input.style || sanitize(input)
+  }
+
   return bss;
@@ -535,0 +540,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"},c=Object.create(null),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)}},o=t(function(t){var i,a="";return t.trim().replace(/;/g,"\n").split("\n").reduce(function(t,e){if(e=a+e.trim(),a=","===e.slice(-1)?e:"")return t;if(","===e.charAt(0))return t[i]+=e,t;var n=e.split(/[:\s]/);if(1<n.length){var r=p(n.shift().trim());l(t,i=c[r]||r,n.filter(function(t){return t}).reduce(function(t,e){return t+v(i,e.trim())+" "},"").trim())}return t},{})});function l(t,e,n){if(!(e in t))return t[e]=n;t._fallback||Object.defineProperty(t,"_fallback",{configurable:!0,value:Object.create(null,{})}),l(t._fallback,e,n)}var f=Object.create(null,{}),u=Object.create(null,{}),s=/^(o|O|ms|MS|Ms|moz|Moz|webkit|Webkit|WebKit)([A-Z])/;function h(t,e){var n,r;return"string"==typeof t?"string"==typeof e||"number"==typeof e?((n={})[t]=e,n):o(t):Array.isArray(t)&&Array.isArray(t.raw)?(t={raw:t},o(String.raw.apply(null,arguments))):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 f?f[e]:e]=m(e,n)),t},{}))}var 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:""});function d(t,e){for(var n in e._fallback&&(t._fallback?d(t._fallback,e._fallback):Object.defineProperty(t,"_fallback",{value:e._fallback})),e)e.hasOwnProperty(n)&&(t[n]=e[n])}function p(t){return t.slice("-"===t.charAt(0)?1:0).replace(/-([a-z])/g,function(t){return t[1].toUpperCase()})}function y(t){var e,n=(e=t).charAt(0)+(e.match(/([A-Z])/g)||[]).join("").toLowerCase(),r=i[n]&&i[n]!==t?t:n;return c[r]=t,r}function b(t,e){return t+"{"+function t(i){return Object.keys(i).reduce(function(t,e){return t+(r=i[n=e],(s.test(n)?"-":"")+n.replace(/([A-Z])/g,"-$1").toLowerCase()+":"+r+";");var n,r},"")+(i._fallback?t(i._fallback):"")}("string"==typeof e?o(e):e)+"}"}var g=/,(?=(?:(?:[^"]*"){2})*[^"]*$)/;function m(t,e){return e in u?u[e]:v(t,e)}function v(t,e){return e+(isNaN(e)?"":n(t))}var e=window.document,r=e&&e.createElement("style");r&&e.head.appendChild(r);var j=r&&r.sheet,k=!1,O=Object.create(null,{}),x=[],w=0,_="b"+("000"+(46656*Math.random()|0).toString(36)).slice(-3)+("000"+(46656*Math.random()|0).toString(36)).slice(-3);function A(t,e){if(x.push(t),k)return r.textContent=x.join("\n");j&&j.insertRule(t,1<arguments.length?e:j.cssRules.length)}function P(t){var e=JSON.stringify(t);if(e in O)return O[e];for(var n=function e(n,r){void 0===r&&(r="");var i={},a=[];return n._fallback&&Object.defineProperty(i,"_fallback",{configurable:!0,value:n._fallback}),Object.keys(n).forEach(function(t){"@"===t.charAt(0)?a.push(t+"{"+e(n[t])+"}"):"object"==typeof n[t]?a=a.concat(e(n[t],r+t)):i[t]=n[t]}),Object.keys(i).length&&a.unshift(b((" "===r.charAt(0)?"":".$")+".$"+r,i)),a}(t),r=_+ ++w,i=0;i<n.length;i++)A(n[i].replace(/\.\$/g,"."+r));return O[e]=r}var $=0,E={};function C(t,e){return d(C.style,h.apply(null,arguments)),L(C)}function S(t,e){Object.defineProperty(C,t,{configurable:!0,value:e})}function L(t){var e=Object.create(C,{style:{value:t.style,enumerable:!0}});return t===C&&(C.style={}),e}function M(e){return function(t){return t||0===t?0<arguments.length&&l(this.style,e,1===arguments.length?m(e,t):Array.prototype.slice.call(arguments).map(function(t){return v(e,t)}).join(" ")):delete this.style[e],L(this)}}return Object.defineProperty(C,"valueOf",{configurable:!0,writable:!0,value:function(){return"."+this.class}}),C.style={},S("setDebug",function(t){k=t}),S("$keyframes",function(n){var t=Object.keys(n).reduce(function(t,e){return t+b(e,n[e].style||n[e])},"");if(t in E)return E[t];var e=_+ ++$;return A("@keyframes "+(E[t]=e)+"{"+t+"}"),e}),S("getSheet",function(){var t=x.join("");return x=[],O=Object.create(null,{}),t}),S("helper",function e(n,r){if(1===arguments.length)return Object.keys(n).forEach(function(t){return e(t,n[t])});delete C[n];"object"==typeof r?Object.defineProperty(C,n,{configurable:!0,get:function(){return d(this.style,h(r)),L(this)}}):Object.defineProperty(C,n,{configurable:!0,value:function(){var t=r.apply(null,arguments);return d(this.style,t.style),L(this)}})}),S("css",function e(n,t){if(1===arguments.length)return Object.keys(n).forEach(function(t){return e(t,n[t])});A(b(n,h(t)),0)}),S("classPrefix",_),a.forEach(function(t){var e,n=t.match(s);if(n){var r=(e=t.replace(s,"$2")).charAt(0).toLowerCase()+e.slice(1);if(-1===a.indexOf(r))return"flexDirection"===r&&(u.flex="-"+n[1].toLowerCase()+"-flex"),S(r,M(f[r]=t)),void S(y(r),C[r])}S(t,M(t)),S(y(t),C[t])}),S("content",function(t){return this.style.content='"'+t+'"',L(this)}),Object.defineProperty(C,"class",{set:function(t){this.__class=t},get:function(){return this.__class||P(this.style)}}),S("$media",function(t,e){return t&&l(this.style,"@media "+t,h(e)),L(this)}),S("$nest",function(e,n){var r=this;return 1===arguments.length?Object.keys(e).forEach(function(t){return r.$nest(t,e[t])}):e&&e.split(g).map(function(t){return t.trim()}).forEach(function(t){return l(r.style,(":"===t.charAt(0)?"":" ")+t,h(n))}),L(this)}),[":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 S("$"+p(n.replace(/:/g,"")),function(t,e){return(t||e)&&l(this.style,n+(e?"("+t+")":""),h(e||t)),L(this)})}),C.helper("$animate",function(t,e){return C.animation(C.$keyframes(e)+" "+t)}),C});
+!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=["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 c(t,e,n){if(!(e in t))return t[e]=n;t._fallback||Object.defineProperty(t,"_fallback",{configurable:!0,value:Object.create(null,{})}),c(t._fallback,e,n)}var a=Object.create(null,{}),o=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:""});function f(t,e){for(var n in e._fallback&&(t._fallback?f(t._fallback,e._fallback):Object.defineProperty(t,"_fallback",{value:e._fallback})),e)e.hasOwnProperty(n)&&(t[n]=e[n])}function u(t){return t.slice("-"===t.charAt(0)&&"-"!==t.charAt(1)?1:0).replace(/-([a-z])/g,function(t){return t[1].toUpperCase()})}function s(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+"{"+s(e[t])+"}"):"object"==typeof e[t]?i=i.concat(s(e[t],n+t)):r[t]=e[t]}),Object.keys(r).length&&i.unshift((" "===n.charAt(0)?"":".$")+".$"+n+"{"+function t(i){return Object.keys(i).reduce(function(t,e){return t+(r=i[n=e],(l.test(n)?"-":"")+n.replace(/([A-Z])/g,"-$1").toLowerCase()+":"+r+";");var n,r},"")+(i._fallback?t(i._fallback):"")}(r)+"}"),i}var h=/,(?=(?:(?:[^"]*"){2})*[^"]*$)/;function p(t,e){return e in o?o[e]:y(t,e)}function y(t,e){return e+(isNaN(e)?"":n(t))}var e=window.document,r=e&&e.createElement("style");r&&e.head.appendChild(r);var d=r&&r.sheet,b=!1,g=Object.create(null,{}),m=[],v=0,j="b"+("000"+(46656*Math.random()|0).toString(36)).slice(-3)+("000"+(46656*Math.random()|0).toString(36)).slice(-3);function k(t,e){if(m.push(t),b)return r.textContent=m.join("\n");d&&d.insertRule(t,1<arguments.length?e:d.cssRules.length)}var O=0,x={};var A={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"},w=Object.create(null);function _(t,e){var n=$(_);return f(n.style,M.apply(null,arguments)),n}function P(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 E(e){return function(t){return t||0===t?0<arguments.length&&c(this.style,e,1===arguments.length?p(e,t):Array.prototype.slice.call(arguments).map(function(t){return y(e,t)}).join(" ")):delete this.style[e],$(this)}}function C(e,n){if(1===arguments.length)return Object.keys(e).forEach(function(t){return C(t,e[t])});delete _[e],"object"==typeof n?(C[e]=M(n),Object.defineProperty(_,e,{configurable:!0,get:function(){return f(this.style,M(n)),$(this)}})):(C[e]=n,Object.defineProperty(_,e,{configurable:!0,value:function(){var t=n.apply(null,arguments);return f(this.style,t.style),$(this)}}))}function S(t){var e,n=(e=t).charAt(0)+(e.match(/([A-Z])/g)||[]).join("").toLowerCase(),r=A[n]&&A[n]!==t?t:n;return w[r]=t,r}Object.defineProperty(_,"valueOf",{configurable:!0,writable:!0,value:function(){return"."+this.class}}),_.style={},P("setDebug",function(t){b=t}),P("$keyframes",function(n){var t=Object.keys(n).reduce(function(t,e){return t+e+"{"+n[e].style||n[e]+"}"},"");if(t in x)return x[t];var e=j+ ++O;return k("@keyframes "+(x[t]=e)+"{"+t+"}"),e}),P("getSheet",function(){var t=m.join("");return m=[],g=Object.create(null,{}),t}),P("helper",C),P("css",function e(n,t){if(1===arguments.length)return Object.keys(n).forEach(function(t){return e(t,n[t])});k(n+"{"+M(t)+"}",0)}),P("classPrefix",j),i.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===i.indexOf(r))return"flexDirection"===r&&(o.flex="-"+n[1].toLowerCase()+"-flex"),P(r,E(a[r]=t)),void P(S(r),_[r])}P(t,E(t)),P(S(t),_[t])}),P("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 g)return g[e];for(var n=s(t),r=j+ ++v,i=0;i<n.length;i++)k(n[i].replace(/\.\$/g,"."+r));return g[e]=r}(this.style)}}),P("$media",function(t,e){return t&&c(this.style,"@media "+t,M(e)),$(this)}),P("$nest",function(e,n){var r=this;return 1===arguments.length?Object.keys(e).forEach(function(t){return r.$nest(t,e[t])}):e&&e.split(h).map(function(t){return t.trim()}).forEach(function(t){return c(r.style,(":"===t.charAt(0)?"":" ")+t,M(n))}),$(this)}),[":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 P("$"+u(n.replace(/:/g,"")),function(t,e){return(t||e)&&c(this.style,n+(e?"("+t+")":""),M(e||t)),$(this)})}),_.helper("$animate",function(t,e){return _.animation(_.$keyframes(e)+" "+t)});var L=t(function(t){var i,a="";return t.trim().split(/;|\n/).reduce(function(t,e){if(e=a+e.trim(),a=","===e.charAt(e.length-1)?e:"")return t;if(","===e.charAt(0))return t[i]+=e,t;var n=e.split(/[:\s]/),r=u(n.shift().trim());return i=w[r]||r,r in C?f(t,"function"==typeof C[r]?C[r].apply(C,n.filter(function(t){return t}).map(function(t){return t.trim()})).style:C[r]):0<n.length&&c(t,i,n.filter(function(t){return t}).reduce(function(t,e){return t+y(i,e.trim())+" "},"").trim()),t},{})});function M(t,e){var n,r;return"string"==typeof t?"string"==typeof e||"number"==typeof e?((n={})[t]=e,n):L(t):Array.isArray(t)&&Array.isArray(t.raw)?(t={raw:t},L(String.raw.apply(null,arguments))):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]=p(e,n)),t},{}))}return _});
 //# sourceMappingURL=bss.min.js.map

CHANGELOG.md

 ## [Unreleased]
 
+## 1.2.1 -
+Support helpers in strings
+Fix support for css variables
+
 ## 1.2.0 -
@@ -4,0 +8,0 @@ Fix missing pseudo/nest objects on instance reuse

lib/index.js

 import keyframes from './keyframes'
 import pseudos from './pseudos'
+import popular from './popular'
 
@@ -17,3 +18,2 @@ import {
   selectorSplit,
-  selectorBlock,
   cssProperties,
@@ -23,12 +23,16 @@ vendorRegex,
   vendorMap,
+  sanitize,
+  initials,
+  memoize,
   assign,
   addPx,
-  short,
-  parse,
   add
 } from './utils'
 
+const shorts = Object.create(null)
+
 function bss(input, value) {
-  assign(bss.style, parse.apply(null, arguments))
-  return chain(bss)
+  const b = chain(bss)
+  assign(b.style, parse.apply(null, arguments))
+  return b
 }
@@ -151,3 +155,3 @@
 
-  insert(selectorBlock(selector, parse(style)), 0)
+  insert(selector + '{' + parse(style) + '}', 0)
 }
@@ -160,4 +164,5 @@
   delete bss[name] // Needed to avoid weird get calls in chrome
-  typeof styling === 'object'
-    ?
+
+  if (typeof styling === 'object') {
+    helper[name] = parse(styling)
     Object.defineProperty(bss, name, {
@@ -170,3 +175,4 @@ configurable: true,
     })
-    :
+  } else {
+    helper[name] = styling
     Object.defineProperty(bss, name, {
@@ -180,2 +186,3 @@ configurable: true,
     })
+  }
 }
@@ -187,2 +194,56 @@
 
+function short(prop) {
+  const acronym = initials(prop)
+      , short = popular[acronym] && popular[acronym] !== prop ? prop : acronym
+
+  shorts[short] = prop
+  return short
+}
+
+const stringToObject = memoize(string => {
+  let last = ''
+    , prev
+
+  return string.trim().split(/;|\n/).reduce((acc, line) => {
+    line = last + line.trim()
+    last = line.charAt(line.length - 1) === ',' ? line : ''
+    if (last)
+      return acc
+
+    if (line.charAt(0) === ',') {
+      acc[prev] += line
+      return acc
+    }
+
+    const tokens = line.split(/[:\s]/)
+        , key = hyphenToCamelCase(tokens.shift().trim())
+
+    prev = shorts[key] || key
+
+    if (key in helper) {
+      typeof helper[key] === 'function'
+        ? assign(acc, helper[key](...tokens.filter(a => a).map(a => a.trim())).style)
+        : assign(acc, helper[key])
+    } else if (tokens.length > 0) {
+      add(acc, prev, tokens.filter(a => a).reduce((acc, t) => acc + addPx(prev, t.trim()) + ' ', '').trim())
+    }
+
+    return acc
+  }, {})
+})
+
+function parse(input, value) {
+  if (typeof input === 'string') {
+    if (typeof value === 'string' || typeof value === 'number')
+      return ({ [input] : value })
+
+    return stringToObject(input)
+  } else if (Array.isArray(input) && Array.isArray(input.raw)) {
+    arguments[0] = { raw: input }
+    return stringToObject(String.raw.apply(null, arguments))
+  }
+
+  return input.style || sanitize(input)
+}
+
 export default bss

lib/keyframes.js

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

lib/utils.js

@@ -1,5 +0,1 @@
-import popular from './popular'
-
-const shorts = Object.create(null)
-
 export const cssProperties = ['float'].concat(Object.keys(
@@ -15,3 +11,3 @@ findWidth(document.documentElement.style)
 
-const memoize = (fn, cache = {}) => item =>
+export const memoize = (fn, cache = {}) => item =>
   item in cache
@@ -21,27 +17,2 @@ ? cache[item]
 
-const stringToObject = memoize(string => {
-  let last = ''
-    , prev
-
-  return string.trim().replace(/;/g, '\n').split('\n').reduce((acc, line) => {
-    line = last + line.trim()
-    last = line.slice(-1) === ',' ? line : ''
-    if (last)
-      return acc
-
-    if (line.charAt(0) === ',') {
-      acc[prev] += line
-      return acc
-    }
-
-    const tokens = line.split(/[:\s]/)
-    if (tokens.length > 1) {
-      const key = hyphenToCamelCase(tokens.shift().trim())
-      prev = shorts[key] || key
-      add(acc, prev, tokens.filter(a => a).reduce((acc, t) => acc + addPx(prev, t.trim()) + ' ', '').trim())
-    }
-    return acc
-  }, {})
-})
-
 export function add(style, prop, value) {
@@ -62,16 +33,2 @@ if (!(prop in style))
 
-export function parse(input, value) {
-  if (typeof input === 'string') {
-    if (typeof value === 'string' || typeof value === 'number')
-      return ({ [input] : value })
-
-    return stringToObject(input)
-  } else if (Array.isArray(input) && Array.isArray(input.raw)) {
-    arguments[0] = { raw: input }
-    return stringToObject(String.raw.apply(null, arguments))
-  }
-
-  return input.style || sanitize(input)
-}
-
 const appendPx = memoize(prop => {
@@ -95,3 +52,3 @@ const el = document.createElement('div')
 
-function sanitize(styles) {
+export function sanitize(styles) {
   return Object.keys(styles).reduce((acc, key) => {
@@ -126,3 +83,3 @@ const value = styles[key]
 export function hyphenToCamelCase(hyphen) {
-  return hyphen.slice(hyphen.charAt(0) === '-' ? 1 : 0).replace(/-([a-z])/g, function(match) {
+  return hyphen.slice(hyphen.charAt(0) === '-' && hyphen.charAt(1) !== '-' ? 1 : 0).replace(/-([a-z])/g, function(match) {
     return match[1].toUpperCase()
@@ -140,10 +97,2 @@ })
 
-export function short(prop) {
-  const acronym = initials(prop)
-      , short = popular[acronym] && popular[acronym] !== prop ? prop : acronym
-
-  shorts[short] = prop
-  return short
-}
-
 export function objectToRules(style, suffix = '') {
@@ -167,3 +116,3 @@ const base = {}
   if (Object.keys(base).length)
-    rules.unshift(selectorBlock((suffix.charAt(0) === ' ' ? '' : '.$' ) + '.$' + suffix, base))
+    rules.unshift((suffix.charAt(0) === ' ' ? '' : '.$' ) + '.$' + suffix + '{' + stylesToCss(base) + '}')
 
@@ -173,8 +122,2 @@ return rules
 
-export function selectorBlock(selector, style) {
-  return selector + '{'
-    + stylesToCss((typeof style === 'string' ? stringToObject(style) : style))
-    + '}'
-}
-
 export const selectorSplit = /,(?=(?:(?:[^"]*"){2})*[^"]*$)/
@@ -181,0 +124,0 @@

package.json

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

tests/index.js

@@ -59,4 +59,4 @@ const o = require('ospec')
   o('multiline input', function() {
-    o(b('t s(1)\n,r(0)').style).deepEquals({ t: 's(1),r(0)' })
-    o(b('t s(1),\nr(0)').style).deepEquals({ t: 's(1),r(0)' })
+    o(b('transform scale(1)\n,rotate(0)').style).deepEquals({ transform: 'scale(1),rotate(0)' })
+    o(b('transform scale(1),\nrotate(0)').style).deepEquals({ transform: 'scale(1),rotate(0)' })
   })
@@ -108,2 +108,7 @@
 
+  o('allows css variables', function() {
+    const cls = b('--primary white').class
+    o(b.getSheet()).equals(`.${cls}.${cls}{--primary:white;}`)
+  })
+
   o('single class for less specificity when using $nest', function() {
@@ -163,2 +168,13 @@ const cls = b.$nest('li', b('-webkit-overflow-scrolling touch')).class
     })
+
+    o('helpers in strings', function() {
+      b.helper({
+        size: (w, h) => b(`width ${w};height ${h}`),
+        pointer: b('cursor pointer')
+      })
+      o(b`
+        size 20 20
+        pointer
+      `.style).deepEquals({ width: '20px', height: '20px', cursor: 'pointer' })
+    })
   })
@@ -165,0 +181,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

105793

increased by1.63%

Lines of code

1334

increased by1.29%

No dependency changes