emotion - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/emotion.es.js

@@ -8,3 +8,3 @@ import React from 'react';
   var cls = ref[0];
-  var vars = ref[1];
+  var vars = ref[1]; if ( vars === void 0 ) vars = [];
 
@@ -25,3 +25,3 @@ return (function (superclass) {
         cls,
-        vars.map(function (v) { return (typeof v === 'function' ? v(this$1.props) : v); })
+        vars.map(function (v) { return (v && typeof v === 'function' ? v(this$1.props) : v); })
       );
@@ -28,0 +28,0 @@

dist/emotion.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("glam")):"function"==typeof define&&define.amd?define(["exports","react","glam"],t):t(e.emotion=e.emotion||{},e.React,e.glam)}(this,function(e,t,o){function n(e,n){var i=n[0],p=n[1];return function(t){function n(){t.apply(this,arguments)}return t&&(n.__proto__=t),n.prototype=Object.create(t&&t.prototype),n.prototype.constructor=n,n.prototype.render=function(){var t=this,n=o(i,p.map(function(e){return"function"==typeof e?e(t.props):e}));return r(e,Object.assign({},this.props,{className:(this.props.className||"")+" "+n}))},n}(t.Component)}t="default"in t?t.default:t,o="default"in o?o.default:o;var r=t.createElement;e.emotion=n,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("glam")):"function"==typeof define&&define.amd?define(["exports","react","glam"],t):t(e.emotion=e.emotion||{},e.React,e.glam)}(this,function(e,t,o){function n(e,n){var i=n[0],p=n[1];return void 0===p&&(p=[]),function(t){function n(){t.apply(this,arguments)}return t&&(n.__proto__=t),n.prototype=Object.create(t&&t.prototype),n.prototype.constructor=n,n.prototype.render=function(){var t=this,n=o(i,p.map(function(e){return e&&"function"==typeof e?e(t.props):e}));return r(e,Object.assign({},this.props,{className:(this.props.className||"")+" "+n}))},n}(t.Component)}t="default"in t?t.default:t,o="default"in o?o.default:o;var r=t.createElement;e.emotion=n,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=emotion.umd.js.map

dist/glam.js

@@ -1,2 +0,2 @@
-function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}function e(t,e){var p=e[0],u=e[1];return function(e){function r(){e.apply(this,arguments)}return e&&(r.__proto__=e),r.prototype=Object.create(e&&e.prototype),r.prototype.constructor=r,r.prototype.render=function(){var e=this,r=o(p,u.map(function(t){return"function"==typeof t?t(e.props):t}));return n(t,Object.assign({},this.props,{className:(this.props.className||"")+" "+r}))},r}(r.Component)}Object.defineProperty(exports,"__esModule",{value:!0});var r=t(require("react")),o=t(require("glam")),n=r.createElement;exports.emotion=e;
+function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}function e(t,e){var p=e[0],u=e[1];return void 0===u&&(u=[]),function(e){function r(){e.apply(this,arguments)}return e&&(r.__proto__=e),r.prototype=Object.create(e&&e.prototype),r.prototype.constructor=r,r.prototype.render=function(){var e=this,r=o(p,u.map(function(t){return t&&"function"==typeof t?t(e.props):t}));return n(t,Object.assign({},this.props,{className:(this.props.className||"")+" "+r}))},r}(r.Component)}Object.defineProperty(exports,"__esModule",{value:!0});var r=t(require("react")),o=t(require("glam")),n=r.createElement;exports.emotion=e;
 //# sourceMappingURL=glam.js.map

package.json

 {
   "name": "emotion",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "👩‍🎤 Glam + React",
@@ -5,0 +5,0 @@ "jsnext:main": "dist/emotion.es.js",

src/__tests__/react.js

@@ -6,3 +6,3 @@ /* eslint-disable jsx-quotes,no-useless-escape,no-template-curly-in-string */
 import css, {fragment} from 'glam'
-import { emotion } from '../react'
+import {emotion} from '../react'
 import plugin from '../babel'
@@ -86,3 +86,3 @@
 
-    const H2 = emotion(H1)`font-size: ${({ scale }) => fontSize * scale}`
+    const H2 = emotion(H1)`font-size: ${({scale}) => fontSize * scale}`
 
@@ -99,2 +99,41 @@ const tree = renderer
   })
+
+  test('function in expression', () => {
+    const fontSize = 20
+    const Content = emotion('div')`
+      font-size: ${fontSize}px;
+    `
+
+    const flexColumn = Component => {
+      const NewComponent = emotion(Component)`
+        flex-direction: column;
+      `
+      NewComponent.displayName = `flexColumn${Component.displayName}`
+
+      return NewComponent
+    }
+
+    const ColumnContent = flexColumn(Content)
+
+    const tree = renderer
+      .create(
+        <ColumnContent>
+          <div
+            css={`height: 100px; width: 100px; background-color: #20c997; margin: 8ch;`}
+          />
+          <div
+            css={`height: 100px; width: 100px; background-color: #20c997; margin: 8ch;`}
+          />
+          <div
+            css={`height: 100px; width: 100px; background-color: #20c997; margin: 8ch;`}
+          />
+          <div
+            css={`height: 100px; width: 100px; background-color: #20c997; margin: 8ch;`}
+          />
+        </ColumnContent>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
 })

src/react.js

@@ -6,3 +6,3 @@ import React from 'react'
 
-export function emotion (tag, [cls, vars]) {
+export function emotion (tag, [cls, vars = []]) {
   return class Target extends React.Component {
@@ -12,3 +12,3 @@ render () {
         cls,
-        vars.map(v => (typeof v === 'function' ? v(this.props) : v))
+        vars.map(v => (v && typeof v === 'function' ? v(this.props) : v))
       )
@@ -15,0 +15,0 @@

No alert changes

Improved metrics

Total package byte prevSize

28496

6.26%

Lines of code

469

8.06%

No dependency changes