emotion - npm Package Compare versions

Comparing version 5.2.0 to 5.2.1

dist/DO-NOT-USE.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.emotion=e.emotion||{})}(this,function(e){function t(e){return e[e.length-1]}function n(e){if(e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}function r(){var e=document.createElement("style");return e.type="text/css",e.setAttribute("data-emotion",""),e.appendChild(document.createTextNode("")),(document.head||document.getElementsByTagName("head")[0]).appendChild(e),e}function i(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.speedy,n=void 0===t?!E&&!b:t,r=e.maxLength,i=void 0===r?x&&S?4e3:65e3:r;this.isSpeedy=n,this.sheet=void 0,this.tags=[],this.maxLength=i,this.ctr=0}function o(e){var t=e.join(",");return u(t,t.length).toString(36)}function s(){for(var e="",t=arguments.length,n=Array(t),r=0;r<t;r++)n[r]=arguments[r];for(var i=0;i<n.length;i++)e+=JSON.stringify(n[i]);return u(e,e.length).toString(36)}function u(e,t){for(var n=1540483477,r=t^e.length,i=e.length,o=0;i>=4;){var s=c(e,o);s=f(s,n),s=f(s^=s>>>24,n),r=f(r,n),r^=s,o+=4,i-=4}switch(i){case 3:r^=a(e,o),r=f(r^=e.charCodeAt(o+2)<<16,n);break;case 2:r=f(r^=a(e,o),n);break;case 1:r=f(r^=e.charCodeAt(o),n)}return r^=r>>>13,r=f(r,n),(r^=r>>>15)>>>0}function c(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)+(e.charCodeAt(t++)<<16)+(e.charCodeAt(t)<<24)}function a(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)}function f(e,t){return(65535&(e|=0))*(t|=0)+(((e>>>16)*t&65535)<<16)|0}function h(t,n){var r=o([t].concat(n)),i="vars-"+r;if(e.inserted[r])return i;var s=n.map(function(e,n){return"--"+t+"-"+n+": "+e}).join("; ");return w.insert("."+i+" {"+s+"}"),e.inserted[r]=!0,i}function d(t){var n=o(t);e.inserted[n]||(e.inserted[n]=!0,t.forEach(function(e){return w.insert(e)}))}function l(t){var n=s(t),r="css-"+n,i="."+r;return e.inserted[n]?r:(p(i,t).forEach(function(e){return w.insert(e)}),e.inserted[n]=!0,r)}function p(e,t,n){var r=[],i=[];for(var o in t){(function(o){var s=t[o],u=void 0===s?"undefined":C(s);"number"===u||"string"===u?r.push(m(o,s)):Array.isArray(s)?s.forEach(function(e){r.push(m(o,e))}):/^:/.test(o)?p(e+o,s,n).forEach(function(e){return i.push(e)}):/^@media/.test(o)?p(e,s,o).forEach(function(e){return i.push(e)}):p(e+" "+o,s,n).forEach(function(e){return i.push(e)})})(o)}return i.unshift(y(e,r,n)),i}function m(e,t){return g(e)+":"+v(e,t)}function y(e,t,n){var r=e+"{"+t.join(";")+"}";return n?n+"{"+r+"}":r}function g(e){return(""+e).replace(/[A-Z]|^ms/g,"-$&").toLowerCase()}function v(e,t){return"number"!=typeof t||A[e]?t:t+"px"}var x="undefined"!=typeof window,E="development"===process.env.NODE_ENV||!process.env.NODE_ENV,b="test"===process.env.NODE_ENV,S=function(){if(x){var e=document.createElement("div");return e.innerHTML="\x3c!--[if lt IE 10]><i></i><![endif]--\x3e",1===e.getElementsByTagName("i").length}}();Object.assign(i.prototype,{getSheet:function(){return n(t(this.tags))},inject:function(){var e=this;if(this.injected)throw new Error("already injected!");x?this.tags[0]=r():this.sheet={cssRules:[],insertRule:function(t){e.sheet.cssRules.push({cssText:t})}},this.injected=!0},speedy:function(e){if(0!==this.ctr)throw new Error("cannot change speedy now");this.isSpeedy=!!e},_insert:function(e){try{var t=this.getSheet();t.insertRule(e,-1!==e.indexOf("@import")?0:t.cssRules.length)}catch(t){E&&console.warn("illegal rule",e)}},insert:function(e){if(x)if(this.isSpeedy&&this.getSheet().insertRule)this._insert(e);else if(-1!==e.indexOf("@import")){var n=t(this.tags);n.insertBefore(document.createTextNode(e),n.firstChild)}else t(this.tags).appendChild(document.createTextNode(e));else this.sheet.insertRule(e,-1!==e.indexOf("@import")?0:this.sheet.cssRules.length);return this.ctr++,x&&this.ctr%this.maxLength==0&&this.tags.push(r()),this.ctr-1},delete:function(e){return this.replace(e,"")},flush:function(){x?(this.tags.forEach(function(e){return e.parentNode.removeChild(e)}),this.tags=[],this.sheet=null,this.ctr=0):this.sheet.cssRules=[],this.injected=!1},rules:function(){if(!x)return this.sheet.cssRules;var e=[];return this.tags.forEach(function(t){return e.splice.apply(e,[e.length,0].concat(Array.from(n(t).cssRules)))}),e}});var C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},w=new i;w.inject(),e.inserted={};var j=d,A={animationIterationCount:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridColumn:1,fontWeight:1,lineClamp:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,fillOpacity:1,stopOpacity:1,strokeDashoffset:1,strokeOpacity:1,strokeWidth:1};e.sheet=w,e.flush=function(){w.flush(),e.inserted={},w.inject()},e.css=function(t,n,r){Array.isArray(t)||(t=[t]);var i=t.map(function(e){return"string"==typeof e?e:l(e)}).join(" ").trim();if(r){var s=r.apply(void 0,n),u=o(s);return e.inserted[u]||(e.inserted[u]=!0,s.map(function(e){return e.replace(new RegExp(t[0],"gm"),t[0]+"-"+u)}).forEach(function(e){return w.insert(e)})),t[0]+"-"+u+" "+i}return i+(n&&n.length>0?" "+h(t[0],n):"")},e.injectGlobal=d,e.fontFace=j,e.keyframes=function(t,n){var r=o(n),i=t+"-"+r;return e.inserted[r]||(e.inserted[r]=!0,n.forEach(function(e){w.insert("@keyframes "+i+" "+e)})),i},e.hydrate=function(t){t.forEach(function(t){return e.inserted[t]=!0})},e.objStyle=l,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.emotion=e.emotion||{})}(this,function(e){function t(e){return e[e.length-1]}function n(e){if(e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}function r(){var e=document.createElement("style");return e.type="text/css",e.setAttribute("data-emotion",""),e.appendChild(document.createTextNode("")),(document.head||document.getElementsByTagName("head")[0]).appendChild(e),e}function i(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.speedy,n=void 0===t?!S&&!C:t,r=e.maxLength,i=void 0===r?b&&w?4e3:65e3:r;this.isSpeedy=n,this.sheet=void 0,this.tags=[],this.maxLength=i,this.ctr=0}function o(e){var t=e.join(",");return u(t,t.length).toString(36)}function s(){for(var e="",t=arguments.length,n=Array(t),r=0;r<t;r++)n[r]=arguments[r];for(var i=0;i<n.length;i++)e+=JSON.stringify(n[i]);return u(e,e.length).toString(36)}function u(e,t){for(var n=1540483477,r=t^e.length,i=e.length,o=0;i>=4;){var s=c(e,o);s=f(s,n),s=f(s^=s>>>24,n),r=f(r,n),r^=s,o+=4,i-=4}switch(i){case 3:r^=a(e,o),r=f(r^=e.charCodeAt(o+2)<<16,n);break;case 2:r=f(r^=a(e,o),n);break;case 1:r=f(r^=e.charCodeAt(o),n)}return r^=r>>>13,r=f(r,n),(r^=r>>>15)>>>0}function c(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)+(e.charCodeAt(t++)<<16)+(e.charCodeAt(t)<<24)}function a(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)}function f(e,t){return(65535&(e|=0))*(t|=0)+(((e>>>16)*t&65535)<<16)|0}function h(t,n){var r=o([t].concat(n)),i="vars-"+r;if(e.inserted[r])return i;var s="";return x(n,function(e,n){s&&(s+="; "),s+="--"+t+"-"+n+": "+e}),E.insert("."+i+" {"+s+"}"),e.inserted[r]=!0,i}function d(t){var n=o(t);e.inserted[n]||(e.inserted[n]=!0,x(t,function(e){return E.insert(e)}))}function l(t){var n=s(t),r="css-"+n,i="."+r;if(e.inserted[n])return r;var o=p(i,t);return x(o,function(e){return E.insert(e)}),e.inserted[n]=!0,r}function p(e,t,n){var r=[],i=[];for(var o in t)!function(o){var s=t[o],u=void 0===s?"undefined":A(s);"number"===u||"string"===u?r.push(y(o,s)):Array.isArray(s)?x(s,function(e){return r.push(y(o,e))}):58===o.charCodeAt(0)?x(p(e+o,s,n),function(e){return i.push(e)}):-1!==o.indexOf("@media")?x(p(e,s,o),function(e){return i.push(e)}):x(p(e+" "+o,s,n),function(e){return i.push(e)})}(o);return i.unshift(g(e,r,n)),i}function y(e,t){return m(e)+":"+v(e,t)}function g(e,t,n){var r=e+"{"+t.join(";")+"}";return n?n+"{"+r+"}":r}function m(e){return(""+e).replace(/[A-Z]|^ms/g,"-$&").toLowerCase()}function v(e,t){return"number"!=typeof t||void 0!==O[e]?t:t+"px"}var x=function(e,t){for(var n=0,r=e.length;n<r;n++)t(e[n],n,e)},b="undefined"!=typeof window,S="development"===process.env.NODE_ENV||!process.env.NODE_ENV,C="test"===process.env.NODE_ENV,w=function(){if(b){var e=document.createElement("div");return e.innerHTML="\x3c!--[if lt IE 10]><i></i><![endif]--\x3e",1===e.getElementsByTagName("i").length}}();Object.assign(i.prototype,{getSheet:function(){return n(t(this.tags))},inject:function(){var e=this;if(this.injected)throw new Error("already injected!");b?this.tags[0]=r():this.sheet={cssRules:[],insertRule:function(t){e.sheet.cssRules.push({cssText:t})}},this.injected=!0},speedy:function(e){if(0!==this.ctr)throw new Error("cannot change speedy now");this.isSpeedy=!!e},_insert:function(e){try{var t=this.getSheet();t.insertRule(e,-1!==e.indexOf("@import")?0:t.cssRules.length)}catch(t){S&&console.warn("illegal rule",e)}},insert:function(e){if(b)if(this.isSpeedy&&this.getSheet().insertRule)this._insert(e);else if(-1!==e.indexOf("@import")){var n=t(this.tags);n.insertBefore(document.createTextNode(e),n.firstChild)}else t(this.tags).appendChild(document.createTextNode(e));else this.sheet.insertRule(e,-1!==e.indexOf("@import")?0:this.sheet.cssRules.length);return this.ctr++,b&&this.ctr%this.maxLength==0&&this.tags.push(r()),this.ctr-1},delete:function(e){return this.replace(e,"")},flush:function(){b?(this.tags.forEach(function(e){return e.parentNode.removeChild(e)}),this.tags=[],this.sheet=null,this.ctr=0):this.sheet.cssRules=[],this.injected=!1},rules:function(){if(!b)return this.sheet.cssRules;var e=[];return this.tags.forEach(function(t){return e.splice.apply(e,[e.length,0].concat(Array.from(n(t).cssRules)))}),e}});var A="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},E=new i;E.inject(),e.inserted={};var N=d,O={animationIterationCount:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridColumn:1,fontWeight:1,lineClamp:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,fillOpacity:1,stopOpacity:1,strokeDashoffset:1,strokeOpacity:1,strokeWidth:1};e.sheet=E,e.flush=function(){E.flush(),e.inserted={},E.inject()},e.css=function(t,n,r){Array.isArray(t)||(t=[t]);var i="";if(x(t,function(e){i&&(i+=" "),i+="string"==typeof e?e:l(e)}),r){var s=r.apply(void 0,n),u=o(s);if(!e.inserted[u]){e.inserted[u]=!0;var c=new RegExp(t[0],"gm");x(s,function(e){E.insert(e.replace(c,t[0]+"-"+u))})}return t[0]+"-"+u+" "+i}return i+(n&&n.length>0?" "+h(t[0],n):"")},e.injectGlobal=d,e.fontFace=N,e.keyframes=function(t,n){var r=o(n),i=t+"-"+r;return e.inserted[r]||(e.inserted[r]=!0,x(n,function(e){return E.insert("@keyframes "+i+" "+e)})),i},e.hydrate=function(t){x(t,function(t){return e.inserted[t]=!0})},e.objStyle=l,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=DO-NOT-USE.min.js.map

lib/babel.js

@@ -93,3 +93,3 @@ 'use strict';
             state.insertStaticRules(rules);
-          } else {
+          } else if (rules.length !== 0) {
             var inlineContentExpr = t.functionExpression(t.identifier('createEmotionStyledRules'), vars.map(function (x, i) {
@@ -132,3 +132,3 @@ return t.identifier('x' + i);
               }
-            } else {
+            } else if (rules.length !== 0) {
               var expressions = path.node.quasi.expressions.map(function (x, i) {
@@ -135,0 +135,0 @@ return t.identifier('x' + i);

lib/index.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _foreach = require('@arr/foreach');
+
+var _foreach2 = _interopRequireDefault(_foreach);
+
 var _sheet = require('./sheet');
@@ -20,2 +24,4 @@
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var sheet = exports.sheet = new _sheet.StyleSheet();
@@ -32,5 +38,7 @@ sheet.inject();
   }
-  var src = vars.map(function (val, i) {
-    return '--' + cls + '-' + i + ': ' + val;
-  }).join('; ');
+  var src = '';
+  (0, _foreach2.default)(vars, function (val, i) {
+    src && (src += '; ');
+    src += '--' + cls + '-' + i + ': ' + val;
+  });
   sheet.insert('.' + varCls + ' {' + src + '}');
@@ -53,5 +61,7 @@ inserted[hash] = true;
 
-  var computedClassName = classes.map(function (cls) {
-    return typeof cls === 'string' ? cls : objStyle(cls);
-  }).join(' ').trim();
+  var computedClassName = '';
+  (0, _foreach2.default)(classes, function (cls) {
+    computedClassName && (computedClassName += ' ');
+    computedClassName += typeof cls === 'string' ? cls : objStyle(cls);
+  });
 
@@ -65,6 +75,5 @@ if (content) {
       inserted[hash] = true;
-      src.map(function (r) {
-        return r.replace(new RegExp(classes[0], 'gm'), classes[0] + '-' + hash);
-      }).forEach(function (r) {
-        return sheet.insert(r);
+      var rgx = new RegExp(classes[0], 'gm');
+      (0, _foreach2.default)(src, function (r) {
+        sheet.insert(r.replace(rgx, classes[0] + '-' + hash));
       });
@@ -82,3 +91,3 @@ }
     inserted[hash] = true;
-    src.forEach(function (r) {
+    (0, _foreach2.default)(src, function (r) {
       return sheet.insert(r);
@@ -96,4 +105,4 @@ });
     inserted[hash] = true;
-    src.forEach(function (r) {
-      sheet.insert('@keyframes ' + animationName + ' ' + r);
+    (0, _foreach2.default)(src, function (r) {
+      return sheet.insert('@keyframes ' + animationName + ' ' + r);
     });
@@ -105,3 +114,3 @@ }
 function hydrate(ids) {
-  ids.forEach(function (id) {
+  (0, _foreach2.default)(ids, function (id) {
     return inserted[id] = true;
@@ -121,3 +130,3 @@ });
   var rules = deconstruct(selector, style);
-  rules.forEach(function (rule) {
+  (0, _foreach2.default)(rules, function (rule) {
     return sheet.insert(rule);
@@ -141,23 +150,18 @@ });
       decs.push(createDec(key, value));
-      return 'continue';
     } else if (Array.isArray(value)) {
-      value.forEach(function (val) {
-        decs.push(createDec(key, val));
+      (0, _foreach2.default)(value, function (val) {
+        return decs.push(createDec(key, val));
       });
-      return 'continue';
-    } else if (/^:/.test(key)) {
-      deconstruct(selector + key, value, media).forEach(function (r) {
+    } else if (key.charCodeAt(0) === 58) {
+      (0, _foreach2.default)(deconstruct(selector + key, value, media), function (r) {
         return rules.push(r);
       });
-      return 'continue';
-    } else if (/^@media/.test(key)) {
-      deconstruct(selector, value, key).forEach(function (r) {
+    } else if (key.indexOf('@media') !== -1) {
+      (0, _foreach2.default)(deconstruct(selector, value, key), function (r) {
         return rules.push(r);
       });
-      return 'continue';
     } else {
-      deconstruct(selector + ' ' + key, value, media).forEach(function (r) {
+      (0, _foreach2.default)(deconstruct(selector + ' ' + key, value, media), function (r) {
         return rules.push(r);
       });
-      return 'continue';
     }
@@ -167,5 +171,3 @@ };
   for (var key in styles) {
-    var _ret = _loop(key);
-
-    if (_ret === 'continue') continue;
+    _loop(key);
   }
@@ -194,3 +196,3 @@
 function addPx(prop, value) {
-  if (typeof value !== 'number' || unitlessProps[prop]) return value;
+  if (typeof value !== 'number' || unitlessProps[prop] !== undefined) return value;
   return value + 'px';
@@ -197,0 +199,0 @@ }

lib/parser.js

@@ -75,3 +75,3 @@ 'use strict';
       decl.value = decl.value.replace(/xxx(\d+)xxx/gm, function (match, p1) {
-        return 'var(--' + options.name + '-' + options.hash + '-' + p1 + ')';
+        return 'var(--' + options.name + '-' + options.hash + '-' + (p1 - composes) + ')';
       });
@@ -81,2 +81,8 @@ });
 
+  root.walkRules(function (rule) {
+    if (rule.nodes.length === 0) {
+      rule.remove();
+    }
+  });
+
   (0, _autoprefix2.default)(root);
@@ -83,0 +89,0 @@ return {

lib/react.js

@@ -67,3 +67,3 @@ 'use strict';
 
-      var className = (0, _index.css)(cls.map(getValue), vars.map(getValue), content);
+      var className = (0, _index.css)((0, _map2.default)(cls, getValue), (0, _map2.default)(vars, getValue), content);
 
@@ -90,2 +90,4 @@ return (0, _react.createElement)(tag, (0, _utils.omit)(Object.assign({}, mergedProps, {
 
+var _theming = require('theming');
+
 var _propTypes = require('prop-types');
@@ -95,4 +97,6 @@
 
-var _theming = require('theming');
+var _map = require('@arr/map');
 
+var _map2 = _interopRequireDefault(_map);
+
 var _index = require('./index');
@@ -99,0 +103,0 @@

lib/server.js

@@ -6,4 +6,18 @@ 'use strict';
 
+var _foreach = require('@arr/foreach');
+
+var _foreach2 = _interopRequireDefault(_foreach);
+
+var _filter = require('@arr/filter.mutate');
+
+var _filter2 = _interopRequireDefault(_filter);
+
 var _index = require('./index');
 
+var _utils = require('./utils');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var RGX = /css(?:[a-zA-Z0-9-]*)-([a-zA-Z0-9]+)/gm;
+
 function extractCritical(html) {
@@ -13,30 +27,26 @@ // parse out ids from html
   var o = { html: html, ids: [], css: '', rules: [] };
-  var regex = /css(?:[a-zA-Z0-9-]*)-([a-zA-Z0-9]+)/gm;
   var match = void 0;
   var ids = {};
-  while ((match = regex.exec(html)) !== null) {
-    if (!ids[match[1] + '']) {
-      ids[match[1] + ''] = true;
+  while ((match = RGX.exec(html)) !== null) {
+    if (!ids[match[1]]) {
+      ids[match[1]] = true;
     }
   }
 
-  o.rules = _index.sheet.sheet.cssRules.filter(function (x) {
-    var regex = /css(?:[a-zA-Z0-9-]*)-([a-zA-Z0-9]+)/gm;
-    var match = regex.exec(x.cssText);
-    if (match && ids[match[1] + '']) {
-      return true;
-    }
-    if (!match) {
-      return true;
-    }
-    return false;
+  o.rules = (0, _filter2.default)(_index.sheet.sheet.cssRules.slice(), function (x) {
+    var match = RGX.exec(x.cssText);
+    return match == null || ids[match[1]] || false;
   });
-  o.ids = Object.keys(_index.inserted).filter(function (id) {
-    return !!ids[id + ''];
+
+  o.ids = (0, _filter2.default)((0, _utils.keys)(_index.inserted), function (id) {
+    return !!ids[id];
   });
-  o.css = o.rules.map(function (x) {
-    return x.cssText;
-  }).join('');
 
+  var css = '';
+  (0, _foreach2.default)(o.rules, function (x) {
+    return css += x.cssText;
+  });
+  o.css = css;
+
   return o;
 }

lib/utils.js

@@ -5,6 +5,8 @@ "use strict";
 exports.omit = omit;
+exports.keys = keys;
 function omit(obj, keys) {
   var target = {};
-  for (var i in obj) {
-    if (keys.indexOf(i) >= 0) continue;
+  var i = void 0;
+  for (i in obj) {
+    if (keys.indexOf(i) !== -1) continue;
     if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
@@ -14,2 +16,11 @@ target[i] = obj[i];
   return target;
+}
+
+function keys(obj) {
+  var k = void 0;
+  var out = [];
+  for (k in obj) {
+    out.push(k);
+  }
+  return out;
 }

package.json

 {
   "name": "emotion",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "high performance css-in-js",
@@ -32,2 +32,5 @@ "main": "lib/index.js",
   "dependencies": {
+    "@arr/filter.mutate": "^1.0.0",
+    "@arr/foreach": "^1.0.0",
+    "@arr/map": "^1.0.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
@@ -34,0 +37,0 @@ "styled-components": "2.0.0",

README.md

@@ -7,7 +7,4 @@ <h1 align="center" style="color: #343a40">
 </h1>
-<p align="center" style="font-size: 1.2rem;">high performance js for your css</p>
+<p align="center" style="font-size: 1.2rem;">The Next Generation of CSS-in-JS</p>
 
-
-
-
 [![npm version](https://badge.fury.io/js/emotion.svg)](https://badge.fury.io/js/emotion)
@@ -18,5 +15,13 @@ [![Build Status](https://travis-ci.org/tkh44/emotion.svg?branch=master)](https://travis-ci.org/tkh44/emotion)
 ![size](http://img.badgesize.io/https://unpkg.com/emotion/dist/DO-NOT-USE.min.js?label=size)
+[![slack](https://emotion.now.sh/badge.svg)](https://slack.emotion.sh/)
 
+emotion is a high performance, lightweight css-in-js library. 
+The core idea comes from Sunil Pai’s [glam](https://github.com/threepointone/glam) library and its philosophy is laid out [here](https://gist.github.com/threepointone/0ef30b196682a69327c407124f33d69a). 
+The basic idea is simple.
+You shouldn’t have to sacrifice runtime performance for good developer experience when writing CSS. emotion 
+minimizes the runtime cost of css-in-js dramatically by parsing your styles with PostCSS during compilation instead of at runtime. 
 
-- [Install](#install)
+-- [Introduction Article](https://medium.com/@tkh44/emotion-ad1c45c6d28b)
+
+- [Install](https://github.com/tkh44/emotion/tree/master/docs/install.md)
 - Demos
@@ -26,479 +31,18 @@ - [emotion website](https://github.com/tkh44/emotion/tree/master/example) [[Demo Here](https://emotion.sh)]
   - **open a PR and add yours!**
- 
+
 - [Benchmarks](https://github.com/tkh44/emotion/tree/master/docs/benchmarks.md)
 
-- [Extract Mode](#extract-mode)
-- [Inline Mode](#inline-mode)
-- [API](#api)
-  - [css](#css)
-  - [composes property](#composes-property)
-  - [keyframes](#keyframes)
-  - [fontFace](#fontface)
+- [Extract Mode](https://github.com/tkh44/emotion/tree/master/docs/extract-mode.md)
+- [Inline Mode](https://github.com/tkh44/emotion/tree/master/docs/inline-mode.md)
 
-- [Server-Side Rendering](#server-side-rendering)
-  - [extractCritical](#extractCritical)
-  - [hydrate](#hydrate)
-  
-- Vue
-  - [styled](#vue-styled)
+- API
+  - [css](https://github.com/tkh44/emotion/tree/master/docs/css.md)
+  - [styled](https://github.com/tkh44/emotion/tree/master/docs/styled.md)
+  - [css prop](https://github.com/tkh44/emotion/tree/master/docs/css-prop.md)
+  - [composes property](https://github.com/tkh44/emotion/tree/master/docs/composes.md)
+  - [keyframes](https://github.com/tkh44/emotion/tree/master/docs/keyframes.md)
+  - [fontFace](https://github.com/tkh44/emotion/tree/master/docs/font-face.md)
+  - [injectGlobal](https://github.com/tkh44/emotion/tree/master/docs/inject-global.md)
+  - [vue styled](https://github.com/tkh44/emotion/tree/master/docs/vue-styled.md)
 
-
-## Install
-
-```bash
-npm install -S emotion
-```
-
-
-**.babelrc**
-```json
-{
-  "plugins": [
-    "emotion/babel"
-  ]
-}
-```
-
-## Extract Mode
-
-The default settings enable css extraction. 
-
-- Extract mode requires css variables to function. If you need ie11 support use **inline mode**.
-- If you have a client side rendered app that does not need ie11 support use **extract mode**.
-- If you are SSR rendering we highly suggest using **inline mode** with `extractCritical`.
-
-This js file, `h1.js`
-
-```jsx harmony
-import styled from 'emotion/react'
-
-const H1 = styled('h1')`
-  color: #ffd43b;
-`
-```
-
-During babel compilation emotion will create `h1.emotion.css` and add `import './h1.emotion.css'` to the top of `h1.js`
-
-```css
-.css-H1-duiy4a {
-  color: blue
-}
-```
-
-`h1.js` after babel compilation
-
-```jsx
-import './h1.emotion.css'
-import styled from 'emotion/react'
-
-const H1 = styled('h1', 'css-H1-duiy4a')
-```
-
-**Browser Support** no ie11 support (css vars)
-
-## Inline Mode
-
-- ~~Only extracts styles **without** dynamic values.~~ (we're working on this) 
-- No css var requirement
-- Same speed as default mode in benchmarks
-- Works with SSR
-
-Configure babel
-
-**.babelrc**
-```json
-{
-  "plugins": [
-    ["emotion/babel", { "inline": true }]
-  ]
-}
-```
-
-This js file, `h1.js`
-
-```jsx
-import styled from 'emotion/react'
-
-const H1 = styled('h1')`
-  color: ${props => props.color};
-`
-```
-
-`h1.js` after babel compilation
-
-```jsx
-import './h1.emotion.css'
-import styled from 'emotion/react'
-
-const H1 = styled('h1', 'css-H1-duiy4a', [props => props.color], function createEmotionStyles(x0) {
-  return [`.css-H1-duiy4a { color:${x0} }`]
-})
-```
-
-**Browser Support** anything React supports
-
-## API
-
-### css
-
-`css` takes in styles and returns a class name. It is the foundation of emotion.
-
-```jsx
-import { css } from 'emotion'
-
-const flex = css`
-  display: flex;
-`
-const justifyCenter = css`
-  composes: ${flex};
-  justifyContent: center;
-`
-
-<div className={justifyCenter}>
- Centered Content
-</div>
-```
-
-#### Objects as Styles
-
-`css` can also take an object or array of objects as a parameter. 
-This allows you to use your existing object styles in the emotion ecosystem. 
-Another great benefit is that you can now use [polished](https://polished.js.org/) with emotion.
-
-*Object styles cannot be optimized as well as template literal styles at this time. Object styles are also not autoprefixed.*
-
-```jsx harmony
-import { css } from 'emotion'
-import { lighten, modularScale } from 'polished'
-
-const cssA = {
-  color: lighten(0.2, '#000'),
-  "font-size": modularScale(1),
-  [hiDPI(1.5)]: {
-    "font-size": modularScale(1.25)
-  }
-}
-
-const cssB = css`
-  composes: ${cssA}
-  height: 64px;
-`
-
-const H1 = styled('h1')`
-  composes: ${cssB}
-  font-size: ${modularScale(4)};
-`
-
-const H2 = styled(H1)`font-size:32px;`
-
-<H2 scale={2} className={'legacy__class'}>
-  hello world
-</H2>
-```
-
-### styled
-
-```jsx
-import styled from 'emotion/react'
-
-const H1 = styled('h1')`
-  color: blue;
-  font-size: 48px;
-  transform: scale(${props => props.scale});
-`
-
-function Greeting ({ name }) {
-  return <H1 scale={2}>Hello {name}</H1> // blue, 48px, and scaled 2x text
-}
-
-
-// You can also pass components in
-
-const H2 = styled(H1)`
-  font-size: ${fontSize * 2/3}px;
-  color: red;
-`
-
-function Greeting ({ name }) {
-  return <H2>Hello {name}</H2> // red, 32px, and scaled 2x text
-}
-
-// this works too
-
-const H3 = styled.h3`
-  font-size: ${fontSize * 1/3}px;
-  color: red;
-`
-
-function Greeting ({ name }) {
-  return <H3>Hello {name}</H3> // red, 16px text
-}
-
-// You can also pass refs down using innerRef
-const H1 = styled('h1')`
-  color: red;
-`
-
-function Greeting ({ name }) {
-  // will turn into to <h1 className="generated-className" ref={() => console.log('hello!')}>Hello {name}</h1>
-  return <H1 innerRef={() => console.log('hello!')}>Hello {name}</H1> 
-}
-
-```
-
-#### Objects as styles
-
-`styled` can also take objects or a function that returns an object. This API was inspired by [glamorous](https://github.com/paypal/glamorous).
-
-*The same caveats to using objects with css apply to this.*
-
-```jsx
-import styled from 'emotion/react'
-
-const H1 = styled.h1({
-  fontSize: 20
-}, (props) => ({ color: props.color }))
-
-const H2 = styled('h2')('some-other-class', {
-  fontSize: '40px'
-})
-
-```
-
-### css prop
-
-```jsx
-// To use the css prop you have to import css just like importing React for jsx
-import { css } from 'emotion'
-
-
-function SomeComponent (props) {
-  // Create styles as if you're calling css and the class will be applied to the component
-  return (<div css={`
-    color: blue;
-    font-size: ${props.fontSize}px;
-
-    &:hover {
-      color: green;
-    }
-
-    & .some-class {
-      font-size: 20px;
-    }
-  `}>
-    This will be blue until hovered.
-    <div className="some-class">
-      This font size will be 20px
-    </div>
-  </div>)
-}
-
-```
-
-### composes property
-
-The composes property is based on [css modules' composes property](https://github.com/css-modules/css-modules#composition).
-
-```jsx
-import { fragment, css } from 'emotion'
-import styled from 'emotion/react'
-
-// Define a class
-const flexCenter = css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-// You can use compose them with the composes property
-const flexCenterClass = css`
-  composes: ${flexCenter};
-  flex-direction: column;
-`
-
-// You can also use them in styled.* and the css prop
-const FlexCenterComponent = styled.div`
-  composes: ${flexCenter};
-`
-
-
-const flexWrap = css`
-  flex-wrap: wrap;
-`
-
-// You can compose with use multiple classes
-const ColumnCenteredComponent = styled.div`
-  composes: ${flexCenter} ${flexWrap};
-`
-
-// You can also use composes with regular classes or classes from a css module
-const CssModuleComponent = styled.h1`
-  composes: ${'some-class'} ${styles.header};
-`
-
-// composes MUST be the first rule, e.g. this doesn't work
-const cls = css`
-  font-size: 20px;
-  composes: ${flexCenter}
-`
-
-// composes also does not work in nested selectors, e.g. this doesn't work
-const cls = css`
-  & .flex {
-      composes: ${flexCenter}
-  }
-`
-
-```
-
-### keyframes
-
-```jsx
-import { keyframes } from 'emotion'
-import styled from 'emotion'
-
-// This returns a animation
-const bounce = keyframes`
-  from {
-    transform: scale(1.01);
-  }
-  to {
-    transform: scale(0.99);
-  }
-`
-
-// You can use them in styled components or anything else
-const AnimatedDiv = styled.div`
-  animation: ${bounce} 0.2s infinite ease-in-out alternate;
-`
-
-
-```
-
-### fontFace
-
-```jsx
-import { fontFace } from 'emotion'
-
-fontFace`
-  font-family: 'Patrick Hand SC';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-`
-
-```
-
-
-### Server-Side Rendering
-
-Server-Side Rendering in emotion currently only works in **inline mode**. It's similar to [glamor's api](https://github.com/threepointone/glamor/blob/master/docs/server.md). For an example of emotion and next.js checkout the [with-emotion example in the next.js repo](https://github.com/zeit/next.js/tree/master/examples/with-emotion).
-
-#### extractCritical
-This returns an object with the properties `html`, `ids` and `css`. It removes unused rules that were created with emotion(it still includes rules that were inserted with `injectGlobal`).
-
-```jsx
-import { renderToString } from 'react-dom/server'
-import { extractCritical } from 'emotion/server'
-import App from './App'
-
-
-const { html, ids, css } = extractCritical(renderToString(<App/>))
-
-```
-
-#### hydrate
-`hydrate` should be called on the client with the `ids` that `extractCritical` returns. If you don't call it then emotion will reinsert all the rules.
-
-```jsx
-import { hydrate } from 'emotion'
-
-hydrate(ids)
-
-```
-
-
-
-### vue styled
-
-```html
-<template>
-  <div id="app">
-    <styled-div>This should have a blue background.</styled-div>
-    <styled-component></styled-component>
-  </div>
-</template>
-
-<script>
-import BoringComponent from './components/BoringComponent'
-// Import styled from emotion/vue instead of emotion/react
-import styled from 'emotion/vue'
-
-// You can use styled.* just like with React
-const StyledDiv = styled.div`
-  background: blue;
-`
-
-// You can also pass components in
-const StyledComponent = styled(BoringComponent)`
-  display: flex;
-  justify-content: center;
-`
-
-export default {
-  name: 'app',
-  components: {
-    'styled-div': StyledDiv,
-    'styled-component': StyledComponent
-  }
-}
-</script>
-```
-
-### Usage with CSS Modules
-
-emotion works well with CSS Modules but it requires a bit of configuration.
-
-1. In your webpack config add the exclude option with this regex `/emotion\.css$/` to your loader for css so that emotion's static css isn't imported as a CSS Module.
-2. Add another object to your `modules.use` with your css loaders but with CSS Modules disabled and set the test field to the same regex as above `/emotion\.css$/`.
-
-
-- [Example webpack config](example/webpack.config.js)
-- [Example usage of CSS Modules with emotion](example/src/markdown/index.js)
-
-### attr
-
-The [attr](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) CSS function is supported in
-a basic capacity. 
-
-```css
-/* get value from `width` prop */
-width: attr(width vw);
-
-/* specify type or unit to apply to value */
-width: attr(width vw);
-
-/* fallback value if props.width is falsey */
-width: attr(width vw, 50);
-```
-
-```jsx
-const H1 = styled.h1`
-  font-size: attr(fontSize px);
-  margin: attr(margin rem, 4);
-  font-family: sans-serif;
-  color: attr(color, ${colors.pink[5]});
-  @media (min-width: 680px) {
-    color: attr(desktopColor);
-  }
-`
-
-const Title = ({ title, scale }) => {
-  return (
-    <H1 fontSize={16 * scale} desktopColor={colors.gray[5]}>
-      {title}
-    </H1>
-  )
-}
-```
+- [Usage with CSS Modules](https://github.com/tkh44/emotion/tree/master/docs/css-modules.md)

src/babel.js

@@ -214,3 +214,3 @@ import fs from 'fs'
             state.insertStaticRules(rules)
-          } else {
+          } else if (rules.length !== 0) {
             const inlineContentExpr = t.functionExpression(
@@ -283,3 +283,3 @@ t.identifier('createEmotionStyledRules'),
               }
-            } else {
+            } else if (rules.length !== 0) {
               const expressions = path.node.quasi.expressions.map((x, i) =>
@@ -286,0 +286,0 @@ t.identifier(`x${i}`)

src/index.js

 // @flow
+import forEach from '@arr/foreach'
 import { StyleSheet } from './sheet'
@@ -20,5 +21,7 @@ import { hashArray, hashObject } from './hash'
   }
-  let src = vars
-    .map((val: inputVar, i: number) => `--${cls}-${i}: ${val}`)
-    .join('; ')
+  let src = ''
+  forEach(vars, (val: inputVar, i: number) => {
+    src && (src += '; ')
+    src += `--${cls}-${i}: ${val}`
+  })
   sheet.insert(`.${varCls} {${src}}`)
@@ -41,6 +44,7 @@ inserted[hash] = true
 
-  const computedClassName = classes
-    .map((cls): string => typeof cls === 'string' ? cls : objStyle(cls))
-    .join(' ')
-    .trim()
+  let computedClassName = ''
+  forEach(classes, (cls): string => {
+    computedClassName && (computedClassName += ' ')
+    computedClassName += typeof cls === 'string' ? cls : objStyle(cls)
+  })
 
@@ -54,7 +58,6 @@ if (content) {
       inserted[hash] = true
-      src
-        .map(r =>
-          r.replace(new RegExp(classes[0], 'gm'), `${classes[0]}-${hash}`)
-        )
-        .forEach(r => sheet.insert(r))
+      const rgx = new RegExp(classes[0], 'gm')
+      forEach(src, r => {
+        sheet.insert(r.replace(rgx, `${classes[0]}-${hash}`))
+      })
     }
@@ -74,3 +77,3 @@ return `${classes[0]}-${hash} ${computedClassName}`
     inserted[hash] = true
-    src.forEach(r => sheet.insert(r))
+    forEach(src, r => sheet.insert(r))
   }
@@ -86,5 +89,3 @@ }
     inserted[hash] = true
-    src.forEach(r => {
-      sheet.insert(`@keyframes ${animationName} ${r}`)
-    })
+    forEach(src, r => sheet.insert(`@keyframes ${animationName} ${r}`))
   }
@@ -95,3 +96,3 @@ return animationName
 export function hydrate (ids: string[]) {
-  ids.forEach(id => (inserted[id] = true))
+  forEach(ids, id => (inserted[id] = true))
 }
@@ -109,3 +110,3 @@
   const rules = deconstruct(selector, style)
-  rules.forEach(rule => sheet.insert(rule))
+  forEach(rules, rule => sheet.insert(rule))
 
@@ -127,19 +128,10 @@ inserted[hash] = true
       decs.push(createDec(key, value))
-      continue
     } else if (Array.isArray(value)) {
-      value.forEach(val => {
-        decs.push(createDec(key, val))
-      })
-      continue
-    } else if (/^:/.test(key)) {
-      deconstruct(selector + key, value, media).forEach(r => rules.push(r))
-      continue
-    } else if (/^@media/.test(key)) {
-      deconstruct(selector, value, key).forEach(r => rules.push(r))
-      continue
+      forEach(value, val => decs.push(createDec(key, val)))
+    } else if (key.charCodeAt(0) === 58) {
+      forEach(deconstruct(selector + key, value, media), r => rules.push(r))
+    } else if (key.indexOf('@media') !== -1) {
+      forEach(deconstruct(selector, value, key), r => rules.push(r))
     } else {
-      deconstruct(selector + ' ' + key, value, media).forEach(r =>
-        rules.push(r)
-      )
-      continue
+      forEach(deconstruct(selector + ' ' + key, value, media), r => rules.push(r))
     }
@@ -169,3 +161,3 @@ }
 function addPx (prop, value) {
-  if (typeof value !== 'number' || unitlessProps[prop]) return value
+  if (typeof value !== 'number' || unitlessProps[prop] !== undefined) return value
   return value + 'px'
@@ -172,0 +164,0 @@ }

src/parser.js

@@ -62,3 +62,5 @@ // @flow
         const composeMatches = decl.value.match(/xxx(\d+)xxx/gm)
-        const numOfComposes: number = !composeMatches ? 0 : composeMatches.length
+        const numOfComposes: number = !composeMatches
+          ? 0
+          : composeMatches.length
         composes += numOfComposes
@@ -78,5 +80,5 @@ vars += numOfComposes
   if (!options.inlineMode && vars === options.matches && !hasCssFunction) {
-    root.walkDecls((decl) => {
+    root.walkDecls(decl => {
       decl.value = decl.value.replace(/xxx(\d+)xxx/gm, (match, p1) => {
-        return `var(--${options.name}-${options.hash}-${p1})`
+        return `var(--${options.name}-${options.hash}-${p1 - composes})`
       })
@@ -86,2 +88,8 @@ })
 
+  root.walkRules(rule => {
+    if (rule.nodes.length === 0) {
+      rule.remove()
+    }
+  })
+
   autoprefix(root)
@@ -93,3 +101,3 @@ return {
       (!!vars && vars !== composes) ||
-        !!(options.inlineMode && options.matches),
+      !!(options.inlineMode && options.matches),
     composes,
@@ -96,0 +104,0 @@ hasCssFunction

src/react.js

 import { Component, createElement as h } from 'react'
+import { createTheming } from 'theming'
 import PropTypes from 'prop-types'
-import { createTheming } from 'theming'
+import map from '@arr/map'
 import { css } from './index'
@@ -51,3 +52,3 @@ import { omit } from './utils'
 
-      const className = css(cls.map(getValue), vars.map(getValue), content)
+      const className = css(map(cls, getValue), map(vars, getValue), content)
 
@@ -54,0 +55,0 @@ return h(

src/server.js

@@ -0,3 +1,8 @@
+import forEach from '@arr/foreach'
+import filter from '@arr/filter.mutate'
 import { sheet, inserted } from './index'
+import { keys } from './utils'
 
+const RGX = /css(?:[a-zA-Z0-9-]*)-([a-zA-Z0-9]+)/gm
+
 export function extractCritical (html) {
@@ -7,26 +12,22 @@ // parse out ids from html
   let o = { html, ids: [], css: '', rules: [] }
-  let regex = /css(?:[a-zA-Z0-9-]*)-([a-zA-Z0-9]+)/gm
   let match
   let ids = {}
-  while ((match = regex.exec(html)) !== null) {
-    if (!ids[match[1] + '']) {
-      ids[match[1] + ''] = true
+  while ((match = RGX.exec(html)) !== null) {
+    if (!ids[match[1]]) {
+      ids[match[1]] = true
     }
   }
 
-  o.rules = sheet.sheet.cssRules.filter(x => {
-    let regex = /css(?:[a-zA-Z0-9-]*)-([a-zA-Z0-9]+)/gm
-    let match = regex.exec(x.cssText)
-    if (match && ids[match[1] + '']) {
-      return true
-    }
-    if (!match) {
-      return true
-    }
-    return false
+  o.rules = filter(sheet.sheet.cssRules.slice(), x => {
+    let match = RGX.exec(x.cssText)
+    return match == null || ids[match[1]] || false
   })
-  o.ids = Object.keys(inserted).filter(id => !!ids[id + ''])
-  o.css = o.rules.map(x => x.cssText).join('')
 
+  o.ids = filter(keys(inserted), id => !!ids[id])
+
+  let css = ''
+  forEach(o.rules, x => css += x.cssText)
+  o.css = css
+
   return o
 }

src/utils.js

@@ -7,4 +7,5 @@ // @flow
   let target: { [string]: any } = {}
-  for (let i in obj) {
-    if (keys.indexOf(i) >= 0) continue
+  let i: string
+  for (i in obj) {
+    if (keys.indexOf(i) !== -1) continue
     if (!Object.prototype.hasOwnProperty.call(obj, i)) continue
@@ -15,1 +16,12 @@ target[i] = obj[i]
 }
+
+export function keys (
+  obj: { [string]: any }
+) {
+  let k: string
+  let out: Array<string> = []
+  for (k in obj) {
+    out.push(k);
+  }
+  return out
+}

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

130952

increased by7.93%

Number of package files

43

increased by16.22%

Lines of code

2937

increased by17.72%

Worsened metrics

Dependency count

7

increased by75%

Number of lines in readme file

46

decreased by-90.84%

Number of low supply chain risk alerts

10

increased by400%

Dependency changes

• + Added@arr/filter.mutate@^1.0.0

• + Added@arr/foreach@^1.0.0

• + Added@arr/map@^1.0.0

• + Added@arr/filter.mutate@1.0.2(transitive)

• + Added@arr/foreach@1.0.1(transitive)

• + Added@arr/map@1.0.1(transitive)