styled-system - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/border-radius.js

@@ -7,3 +7,4 @@ 'use strict';
   prop: 'borderRadius',
-  key: 'radii'
+  key: 'radii',
+  numberToPx: true
 });

dist/border-width.js

@@ -36,7 +36,9 @@ 'use strict';
       prop: 'borderWidth',
-      cssProperty: getWidthProp(dir)
+      cssProperty: getWidthProp(dir),
+      numberToPx: true
     })(props);
   }) : [style({
     key: 'borderWidths',
-    prop: 'borderWidth'
+    prop: 'borderWidth',
+    numberToPx: true
   })(props)];
@@ -43,0 +45,0 @@

dist/prop-types.js

@@ -52,3 +52,3 @@ 'use strict';
 var alignItems = {
-  alignItems: responsive
+  align: responsive
 };
@@ -55,0 +55,0 @@

dist/pseudo-style.js

@@ -6,3 +6,4 @@ 'use strict';
 var _require = require('./util'),
-    get = _require.get;
+    get = _require.get,
+    px = _require.px;
 
@@ -14,6 +15,11 @@ module.exports = function (pseudoclass, prop) {
       var style = props[prop || pseudoclass];
+      var numberToPx = keys.numberToPx || {};
       for (var key in style) {
-        if (!keys[key]) continue;
+        var toPx = numberToPx[key];
+
+        if (!keys[key] && !toPx) continue;
         var themeKey = [keys[key], style[key]].join('.');
         style[key] = get(props.theme, themeKey, style[key]);
+
+        if (toPx) style[key] = px(style[key]);
       }
@@ -20,0 +26,0 @@

dist/responsive-style.js

@@ -31,3 +31,4 @@ 'use strict';
         boolValue = _ref.boolValue,
-        key = _ref.key;
+        key = _ref.key,
+        numberToPx = _ref.numberToPx;
 
@@ -40,9 +41,12 @@ prop = prop || cssProperty;
     var scale = get(props, ['theme', key || prop].join('.'), {});
+    var sx = function sx(val) {
+      return get(scale, '' + val, numberToPx ? px(val) : val);
+    };
 
     if (!Array.isArray(n)) {
-      return _defineProperty({}, cssProperty, sx(scale)(bool(boolValue)(n)));
+      return _defineProperty({}, cssProperty, sx(bool(boolValue)(n)));
     }
 
     var val = arr(n);
-    return val.map(bool(boolValue)).map(sx(scale)).map(dec(cssProperty)).map(media(bp)).reduce(merge, {});
+    return val.map(bool(boolValue)).map(sx).map(dec(cssProperty)).map(media(bp)).reduce(merge, {});
   };
@@ -55,7 +59,2 @@ };
   };
-};
-var sx = function sx(scale) {
-  return function (n) {
-    return is(n) ? scale[n] || n : n;
-  };
 };

dist/style.js

@@ -7,3 +7,4 @@ 'use strict';
     get = _require.get,
-    is = _require.is;
+    is = _require.is,
+    px = _require.px;
 
@@ -13,3 +14,4 @@ module.exports = function (_ref) {
       prop = _ref.prop,
-      cssProperty = _ref.cssProperty;
+      cssProperty = _ref.cssProperty,
+      numberToPx = _ref.numberToPx;
   return function (props) {
@@ -19,5 +21,6 @@ var n = props[prop];
     var val = get(props, ['theme', key, n].join('.'), n);
+    var value = numberToPx ? px(val) : val;
 
-    return _defineProperty({}, cssProperty || prop, val);
+    return _defineProperty({}, cssProperty || prop, value);
   };
 };

package.json

 {
   "name": "styled-system",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Design system utilities for styled-components, glamorous, and other css-in-js libraries",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/border-radius.js

@@ -5,3 +5,4 @@ const style = require('./style')
   prop: 'borderRadius',
-  key: 'radii'
+  key: 'radii',
+  numberToPx: true
 })

src/border-width.js

@@ -22,3 +22,4 @@ const style = require('./style')
       prop: 'borderWidth',
-      cssProperty: getWidthProp(dir)
+      cssProperty: getWidthProp(dir),
+      numberToPx: true
     })(props))
@@ -28,3 +29,4 @@ : [
         key: 'borderWidths',
-        prop: 'borderWidth'
+        prop: 'borderWidth',
+        numberToPx: true
       })(props)
@@ -31,0 +33,0 @@ ]

src/prop-types.js

@@ -60,3 +60,3 @@ const PropTypes = require('prop-types')
 const alignItems = {
-  alignItems: responsive
+  align: responsive
 }
@@ -63,0 +63,0 @@

src/pseudo-style.js

@@ -1,9 +0,14 @@
-const { get } = require('./util')
+const { get, px } = require('./util')
 
 module.exports = (pseudoclass, prop) => (keys = {}) => props => {
   const style = props[prop || pseudoclass]
+  const numberToPx = keys.numberToPx || {}
   for (let key in style) {
-    if (!keys[key]) continue
+    const toPx = numberToPx[key]
+
+    if (!keys[key] && !toPx) continue
     const themeKey = [ keys[key], style[key] ].join('.')
     style[key] = get(props.theme, themeKey, style[key])
+
+    if (toPx) style[key] = px(style[key])
   }
@@ -10,0 +15,0 @@

src/responsive-style.js

@@ -6,3 +6,9 @@ const { get, is, arr, num, px, breaks, dec, media, merge } = require('./util')
   const [ arg, _prop, _bool ] = args
-  let { cssProperty, prop, boolValue, key } = typeof arg === 'string'
+  let {
+    cssProperty,
+    prop,
+    boolValue,
+    key,
+    numberToPx
+  } = typeof arg === 'string'
     ? { cssProperty: arg, prop: _prop, boolValue: _bool }
@@ -17,6 +23,7 @@ : arg
   const scale = get(props, [ 'theme', key || prop ].join('.'), {})
+  const sx = val => get(scale, '' + val, numberToPx ? px(val) : val)
 
   if (!Array.isArray(n)) {
     return {
-      [cssProperty]: sx(scale)(
+      [cssProperty]: sx(
         bool(boolValue)(n)
@@ -30,3 +37,3 @@ )
     .map(bool(boolValue))
-    .map(sx(scale))
+    .map(sx)
     .map(dec(cssProperty))
@@ -38,2 +45,1 @@ .map(media(bp))
 const bool = val => n => n === true ? val : n
-const sx = scale => n => is(n) ? scale[n] || n : n

src/style.js

@@ -1,2 +0,2 @@
-const { get, is } = require('./util')
+const { get, is, px } = require('./util')
 
@@ -6,3 +6,4 @@ module.exports = ({
   prop,         // react prop
-  cssProperty   // css property
+  cssProperty,  // css property
+  numberToPx
 }) => props => {
@@ -12,4 +13,5 @@ const n = props[prop]
   const val = get(props, [ 'theme', key, n ].join('.'), n)
+  const value = numberToPx ? px(val) : val
 
-  return { [cssProperty || prop]: val }
+  return { [cssProperty || prop]: value }
 }

test.js

@@ -41,2 +41,3 @@ import test from 'ava'
   fontSizes: [12, 16, 18, 24, 36, 72],
+  radii: [ 2, 4 ],
   colors: {
@@ -547,2 +548,25 @@ blue: '#07c',
 
+test('style function returns pixels for number values', t => {
+  const sx = style({
+    prop: 'borderRadius',
+    numberToPx: true
+  })
+  const a = sx({
+    borderRadius: 4,
+    theme: {}
+  })
+  t.is(a.borderRadius, '4px')
+})
+
+test('style function returns unitless number values', t => {
+  const sx = style({
+    prop: 'borderRadius'
+  })
+  const a = sx({
+    borderRadius: 4,
+    theme: {}
+  })
+  t.is(a.borderRadius, 4)
+})
+
 // responsiveStyle
@@ -607,3 +631,3 @@ test('responsiveStyle returns a function', t => {
 
-test('responsiveStyle accepts and object argument', t => {
+test('responsiveStyle accepts an object argument', t => {
   const direction = responsiveStyle({
@@ -622,2 +646,81 @@ cssProperty: 'flexDirection',
 
+test('responsiveStyle returns pixel values for numbers', t => {
+  const radius = responsiveStyle({
+    cssProperty: 'borderRadius',
+    prop: 'radius',
+    numberToPx: true
+  })
+  const a = radius({ radius: 4 })
+  t.deepEqual(a, {
+    borderRadius: '4px'
+  })
+})
+
+test('responsiveStyle returns pixel values for number arrays', t => {
+  const radius = responsiveStyle({
+    cssProperty: 'borderRadius',
+    prop: 'radius',
+    numberToPx: true
+  })
+  const a = radius({ radius: [ 4, 5, 6 ] })
+  t.deepEqual(a, {
+    borderRadius: '4px',
+    '@media screen and (min-width: 40em)': {
+      borderRadius: '5px'
+    },
+    '@media screen and (min-width: 52em)': {
+      borderRadius: '6px'
+    }
+  })
+})
+
+test('responsiveStyle returns unitless numbers', t => {
+  const radius = responsiveStyle({
+    cssProperty: 'borderRadius',
+    prop: 'radius'
+  })
+  const a = radius({ radius: 4 })
+  t.deepEqual(a, {
+    borderRadius: 4
+  })
+})
+
+test('responsiveStyle returns a theme value', t => {
+  const sx = responsiveStyle({
+    cssProperty: 'borderColor',
+    key: 'colors',
+  })
+  const a = sx({
+    theme,
+    borderColor: [
+      'blue',
+      'green'
+    ]
+  })
+  t.deepEqual(a, {
+    borderColor: theme.colors.blue,
+    '@media screen and (min-width: 32em)': {
+      borderColor: theme.colors.green
+    }
+  })
+})
+
+test('responsiveStyle returns a theme number value in px', t => {
+  const sx = responsiveStyle({
+    cssProperty: 'borderRadius',
+    key: 'radii',
+    numberToPx: true
+  })
+  const a = sx({
+    theme,
+    borderRadius: [ 0, 1 ]
+  })
+  t.deepEqual(a, {
+    borderRadius: theme.radii[0],
+    '@media screen and (min-width: 32em)': {
+      borderRadius: theme.radii[1],
+    }
+  })
+})
+
 test('psuedoStyle returns a function', t => {
@@ -661,2 +764,20 @@ const hover = pseudoStyle('hover')
 
+test('pseudoStyle returns number pixel values', t => {
+  const hoverStyle = pseudoStyle('hover')({
+    numberToPx: {
+      borderRadius: true
+    }
+  })
+  const a = hoverStyle({
+    hover: {
+      borderRadius: 4
+    }
+  })
+  t.deepEqual(a, {
+    '&:hover': {
+      borderRadius: '4px'
+    }
+  })
+})
+
 // theme
@@ -805,2 +926,15 @@ test('breakpoints can be configured with a theme', t => {
 
+test('borderRadius returns a pixel value', t => {
+  const a = borderRadius({ borderRadius: 4 })
+  t.deepEqual(a, { borderRadius: '4px' })
+})
+
+test('borderRadius returns a pixel value from theme', t => {
+  const a = borderRadius({
+    theme,
+    borderRadius: 0
+  })
+  t.deepEqual(a, { borderRadius: '2px' })
+})
+
 test('borderColor returns borderColor', t => {
@@ -829,2 +963,10 @@ const a = borderColor({ borderColor: 'blue' })
 
+test('borderWidth returns a pixel value', t => {
+  const a = borderWidth({ borderWidth: 2 })
+  t.deepEqual(a, {
+    borderWidth: '2px',
+    borderStyle: 'solid'
+  })
+})
+
 test('borderWidth returns null', t => {
@@ -831,0 +973,0 @@ const a = borderWidth({})

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

81905

increased by4.56%

Lines of code

2442

increased by6.73%

No dependency changes