styled-system - npm Package Compare versions

Comparing version 1.0.0-9 to 1.0.0-10

dist/color.js

 'use strict';
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var _require = require('./util'),
@@ -21,4 +23,9 @@ breaks = _require.breaks,
   return keys.map(function (key) {
-    var val = arr(props[key]);
+    var val = props[key];
     var prop = properties[key] || key;
+
+    if (!Array.isArray(val)) {
+      return _defineProperty({}, prop, cx(palette)(val));
+    }
+
     return val.map(cx(palette)).map(dec(prop)).map(media(bp)).reduce(merge, {});
@@ -25,0 +32,0 @@ }).reduce(merge, {});

dist/font-size.js

@@ -18,10 +18,16 @@ 'use strict';
 module.exports = function (props) {
-  var f = is(props.fontSize) ? props.fontSize : props.fontSize || props.f;
-  if (!is(f)) return null;
+  var n = is(props.fontSize) ? props.fontSize : props.fontSize || props.f;
+  if (!is(n)) return null;
 
-  var bp = breaks(props);
   var scale = idx(['theme', 'fontSizes'], props) || fontSizes;
-  var val = arr(f);
 
-  return val.map(fx(scale)).map(dec('fontSize')).map(media(bp)).reduce(merge, {});
+  if (!Array.isArray(n)) {
+    return {
+      fontSize: fx(scale)(n)
+    };
+  }
+
+  var bp = breaks(props);
+
+  return n.map(fx(scale)).map(dec('fontSize')).map(media(bp)).reduce(merge, {});
 };
@@ -28,0 +34,0 @@

dist/index.js

@@ -7,2 +7,3 @@ 'use strict';
 var color = require('./color');
+var style = require('./style');
 var responsiveStyle = require('./responsive-style');
@@ -18,2 +19,3 @@ var removeProps = require('./remove-props');
   color: color,
+  style: style,
   responsiveStyle: responsiveStyle,
@@ -20,0 +22,0 @@ removeProps: removeProps,

dist/responsive-style.js

 'use strict';
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var _require = require('./util'),
@@ -22,4 +24,8 @@ is = _require.is,
     var scale = idx(['theme', prop], props) || {};
+
+    if (!Array.isArray(n)) {
+      return _defineProperty({}, key, sx(scale)(bool(boolValue)(n)));
+    }
+
     var val = arr(n);
-
     return val.map(bool(boolValue)).map(sx(scale)).map(dec(key)).map(media(bp)).reduce(merge, {});
@@ -26,0 +32,0 @@ };

dist/space.js

@@ -5,2 +5,4 @@ 'use strict';
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var _require = require('./util'),
@@ -30,5 +32,12 @@ arr = _require.arr,
   return keys.map(function (key) {
-    var val = arr(props[key]);
+    var val = props[key];
     var p = getProperties(key);
-    return val.map(mx(sc)).map(dec(p)).map(media(bp)).reduce(merge, {});
+
+    if (!Array.isArray(val)) {
+      return p.reduce(function (a, b) {
+        return Object.assign(a, _defineProperty({}, b, mx(sc)(val)));
+      }, {});
+    }
+
+    return arr(val).map(mx(sc)).map(dec(p)).map(media(bp)).reduce(merge, {});
   }).reduce(merge, {});
@@ -35,0 +44,0 @@ };

dist/util.js

@@ -51,3 +51,3 @@ 'use strict';
   return function (d, i) {
-    return bp[i] ? _defineProperty({}, bp[i], d) : d;
+    return is(d) ? bp[i] ? _defineProperty({}, bp[i], d) : d : null;
   };
@@ -54,0 +54,0 @@ };

dist/width.js

@@ -14,9 +14,14 @@ 'use strict';
 module.exports = function (props) {
-  var w = is(props.width) ? props.width : props.width || props.w;
-  if (!is(w)) return null;
+  var n = is(props.width) ? props.width : props.width || props.w;
+  if (!is(n)) return null;
 
+  if (!Array.isArray(n)) {
+    return {
+      width: wx(n)
+    };
+  }
+
   var bp = breaks(props);
-  var val = arr(w);
 
-  return val.map(wx).map(dec('width')).map(media(bp)).reduce(merge, {});
+  return n.map(wx).map(dec('width')).map(media(bp)).reduce(merge, {});
 };
@@ -23,0 +28,0 @@

package.json

 {
   "name": "styled-system",
-  "version": "1.0.0-9",
+  "version": "1.0.0-10",
   "description": "Design system utilities for styled-components, glamorous, and other css-in-js libraries",
@@ -10,3 +10,5 @@ "main": "dist/index.js",
     "build": "NODE_ENV=production webpack -p",
-    "test": "ava"
+    "bench": "node bench",
+    "cover": "npm t && nyc report --reporter=html",
+    "test": "nyc ava"
   },
@@ -29,4 +31,7 @@ "keywords": [
     "babel-register": "^6.24.1",
+    "benchmark": "^2.1.4",
     "funcup": "^1.0.0-0",
     "grid-styled": "^2.0.0-2",
+    "microtime": "^2.1.6",
+    "nyc": "^11.0.3",
     "palx": "^1.0.2",
@@ -41,3 +46,10 @@ "react": "^15.6.0",
     "webpack-dev-server": "^2.4.5"
+  },
+  "nyc": {
+    "ignore": [
+      "test.js",
+      "docs",
+      "bench"
+    ]
   }
 }

src/color.js

@@ -11,4 +11,11 @@ const { breaks, idx, merge, arr, dec, media } = require('./util')
   return keys.map(key => {
-    const val = arr(props[key])
+    const val = props[key]
     const prop = properties[key] || key
+
+    if (!Array.isArray(val)) {
+      return {
+        [prop]: cx(palette)(val)
+      }
+    }
+
     return val
@@ -15,0 +22,0 @@ .map(cx(palette))

src/font-size.js

@@ -5,10 +5,16 @@ const { is, idx, arr, num, px, breaks, dec, media, merge } = require('./util')
 module.exports = props => {
-  const f = is(props.fontSize) ? props.fontSize : props.fontSize || props.f
-  if (!is(f)) return null
+  const n = is(props.fontSize) ? props.fontSize : props.fontSize || props.f
+  if (!is(n)) return null
 
-  const bp = breaks(props)
   const scale = idx([ 'theme', 'fontSizes' ], props) || fontSizes
-  const val = arr(f)
 
-  return val
+  if (!Array.isArray(n)) {
+    return {
+      fontSize: fx(scale)(n)
+    }
+  }
+
+  const bp = breaks(props)
+
+  return n
     .map(fx(scale))
@@ -15,0 +21,0 @@ .map(dec('fontSize'))

src/index.js

@@ -5,2 +5,3 @@ const space = require('./space')
 const color = require('./color')
+const style = require('./style')
 const responsiveStyle = require('./responsive-style')
@@ -16,2 +17,3 @@ const removeProps = require('./remove-props')
   color,
+  style,
   responsiveStyle,
@@ -18,0 +20,0 @@ removeProps,

src/responsive-style.js

@@ -10,4 +10,12 @@ const { is, idx, arr, num, px, breaks, dec, media, merge } = require('./util')
   const scale = idx([ 'theme', prop ], props) || {}
+
+  if (!Array.isArray(n)) {
+    return {
+      [key]: sx(scale)(
+        bool(boolValue)(n)
+      )
+    }
+  }
+
   const val = arr(n)
-
   return val
@@ -14,0 +22,0 @@ .map(bool(boolValue))

src/space.js

@@ -24,5 +24,12 @@ const {
   return keys.map(key => {
-    const val = arr(props[key])
+    const val = props[key]
     const p = getProperties(key)
-    return val
+
+    if (!Array.isArray(val)) {
+      return p.reduce((a, b) => Object.assign(a, {
+        [b]: mx(sc)(val)
+      }), {})
+    }
+
+    return arr(val)
       .map(mx(sc))
@@ -29,0 +36,0 @@ .map(dec(p))

src/util.js

@@ -20,3 +20,5 @@ const { breakpoints } = require('./constants')
 
-const media = bp => (d, i) => bp[i] ? ({[bp[i]]: d}) : d
+const media = bp => (d, i) => is(d)
+  ? bp[i] ? ({ [bp[i]]: d }) : d
+  : null
 
@@ -23,0 +25,0 @@ const merge = (a, b) => Object.assign({}, a, b, Object.keys(b).reduce((obj, key) =>

src/width.js

 const { is, arr, num, px, breaks, dec, media, merge } = require('./util')
 
 module.exports = props => {
-  const w = is(props.width) ? props.width : props.width || props.w
-  if (!is(w)) return null
+  const n = is(props.width) ? props.width : props.width || props.w
+  if (!is(n)) return null
 
+  if (!Array.isArray(n)) {
+    return {
+      width: wx(n)
+    }
+  }
+
   const bp = breaks(props)
-  const val = arr(w)
 
-  return val
+  return n
     .map(wx)
@@ -12,0 +17,0 @@ .map(dec('width'))

test.js

@@ -8,2 +8,3 @@ import test from 'ava'
   color,
+  style,
   responsiveStyle,
@@ -32,2 +33,3 @@ removeProps,
 
+// util
 test('util.is checks for non null values', t => {
@@ -110,5 +112,7 @@ const a = util.is(null)
   const a = util.media([])('hello')
-  const b = util.media(['hi'])('hello', 0)
+  const b = util.media([ 'hi' ])('hello', 0)
+  const c = util.media([ 'hi' ])(null, 0)
   t.is(a, 'hello')
-  t.deepEqual(b, {hi: 'hello'})
+  t.deepEqual(b, { hi: 'hello' })
+  t.is(c, null)
 })
@@ -178,2 +182,3 @@
 
+// space
 test('space returns margin declarations', t => {
@@ -308,2 +313,3 @@ const dec = space({m: 1})
 
+// width
 test('width returns percentage widths', t => {
@@ -345,2 +351,7 @@ const a = width({width: 1 / 2})
 
+test('width returns null ', t => {
+  const a = width({})
+  t.is(a, null)
+})
+
 test('width accepts shortcut prop', t => {
@@ -351,2 +362,3 @@ const a = width({w: 1 / 2})
 
+// fontSize
 test('fontSize returns scale values', t => {
@@ -401,2 +413,8 @@ const a = fontSize({fontSize: 0})
 
+test('fontSize returns null', t => {
+  const a = fontSize({})
+  t.is(a, null)
+})
+
+// color
 test('color returns color and backgroundColor styles', t => {
@@ -446,2 +464,45 @@ const a = color({ color: 'tomato' })
 
+// style
+test('style returns a function', t => {
+  const sx = style({
+    prop: 'color',
+    key: 'colors'
+  })
+  t.is(typeof sx, 'function')
+})
+
+test('style function returns a style object', t => {
+  const a = style({
+    prop: 'color',
+    key: 'colors'
+  })({ color: 'tomato' })
+  t.is(typeof a, 'object')
+  t.deepEqual(a, { color: 'tomato' })
+})
+
+test('style function returns null', t => {
+  const sx = style({
+    prop: 'color'
+  })
+  const a = sx({})
+  t.is(a, null)
+})
+
+test('style function returns scale values', t => {
+  const sx = style({
+    key: 'colors',
+    prop: 'color'
+  })
+  const a = sx({
+    color: 'blue',
+    theme: {
+      colors: {
+        blue: '#07c'
+      }
+    }
+  })
+  t.is(a.color, '#07c')
+})
+
+// responsiveStyle
 test('responsiveStyle returns a function', t => {
@@ -474,6 +535,9 @@ const sx = responsiveStyle('order')
   const direction = responsiveStyle('flex-direction', 'direction')
-  const a = direction({ direction: [ 'column', 'row' ] })
+  const a = direction({ direction: [ 'column', null, 'row' ] })
   t.deepEqual(a, {
     'flex-direction': 'column',
     '@media screen and (min-width: 40em)': {
+      'flex-direction': null
+    },
+    '@media screen and (min-width: 52em)': {
       'flex-direction': 'row',
@@ -503,2 +567,3 @@ }
 
+// theme
 test('breakpoints can be configured with a theme', t => {
@@ -512,2 +577,3 @@ const a = space({theme, m: [1, 2, 3, 4]})
 
+// removeProps
 test('removeProps removes style props', t => {
@@ -514,0 +580,0 @@ const a = removeProps({

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

40379

increased by19.74%

Number of package files

30

increased by20%

Lines of code

1168

increased by21.29%

Worsened metrics

Dev dependency count

21

increased by16.67%

No dependency changes