styled-system - npm Package Compare versions

Comparing version 1.0.0-5 to 1.0.0-6

dist/color.js

@@ -6,3 +6,3 @@ 'use strict';
     idx = _require.idx,
-    joinObj = _require.joinObj,
+    merge = _require.merge,
     arr = _require.arr,
@@ -24,4 +24,4 @@ dec = _require.dec,
     var prop = properties[key] || key;
-    return val.map(cx(palette)).map(dec(prop)).map(media(bp)).reduce(joinObj, {});
-  }).reduce(joinObj, {});
+    return val.map(cx(palette)).map(dec(prop)).map(media(bp)).reduce(merge, {});
+  }).reduce(merge, {});
 };
@@ -28,0 +28,0 @@

dist/font-size.js

@@ -12,3 +12,3 @@ 'use strict';
     media = _require.media,
-    joinObj = _require.joinObj;
+    merge = _require.merge;
 
@@ -26,3 +26,3 @@ var _require2 = require('./constants'),
 
-  return val.map(fx(scale)).map(dec('fontSize')).map(media(bp)).reduce(joinObj, {});
+  return val.map(fx(scale)).map(dec('fontSize')).map(media(bp)).reduce(merge, {});
 };
@@ -29,0 +29,0 @@

dist/index.js

@@ -7,2 +7,3 @@ 'use strict';
 var color = require('./color');
+var removeProps = require('./remove-props');
 var util = require('./util');
@@ -16,4 +17,5 @@ var constants = require('./constants');
   color: color,
+  removeProps: removeProps,
   util: util,
   constants: constants
 };

dist/space.js

@@ -14,3 +14,3 @@ 'use strict';
     media = _require.media,
-    joinObj = _require.joinObj;
+    merge = _require.merge;
 
@@ -32,4 +32,4 @@ var _require2 = require('./constants'),
     var p = getProperties(key);
-    return val.map(mx(sc)).map(dec(p)).map(media(bp)).reduce(joinObj, {});
-  }).reduce(joinObj, {});
+    return val.map(mx(sc)).map(dec(p)).map(media(bp)).reduce(merge, {});
+  }).reduce(merge, {});
 };
@@ -36,0 +36,0 @@

dist/util.js

@@ -36,2 +36,3 @@ 'use strict';
 };
+
 var breaks = function breaks(props) {
@@ -48,2 +49,3 @@ return [null].concat(_toConsumableArray((idx(['theme', 'breakpoints'], props) || breakpoints).map(mq)));
 };
+
 var media = function media(bp) {
@@ -54,5 +56,6 @@ return function (d, i) {
 };
-var joinObj = function joinObj(acc, obj) {
-  return Object.assign(acc, Object.keys(obj).reduce(function (result, key) {
-    return Object.assign(result, _defineProperty({}, key, _typeof(acc[key]) === 'object' && _typeof(obj[key]) === 'object' ? [acc[key], obj[key]].reduce(joinObj, {}) : obj[key]));
+
+var merge = function merge(a, b) {
+  return Object.assign({}, a, b, Object.keys(b).reduce(function (obj, key) {
+    return Object.assign(obj, _defineProperty({}, key, _typeof(a[key]) === 'object' ? merge(a[key], b[key]) : b[key]));
   }, {}));
@@ -71,4 +74,4 @@ };
   dec: dec,
-  joinObj: joinObj,
+  merge: merge,
   mq: mq
 };

dist/width.js

@@ -11,3 +11,3 @@ 'use strict';
     media = _require.media,
-    joinObj = _require.joinObj;
+    merge = _require.merge;
 
@@ -21,3 +21,3 @@ module.exports = function (props) {
 
-  return val.map(wx).map(dec('width')).map(media(bp)).reduce(joinObj, {});
+  return val.map(wx).map(dec('width')).map(media(bp)).reduce(merge, {});
 };
@@ -24,0 +24,0 @@

package.json

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

README.md

@@ -153,2 +153,33 @@ # styled-system
 
+## Remove Props
+
+Styled-components attempts to remove invalid HTML attributes from props,
+but does not remove `width`, `fontSize`, or `color`.
+When using styled-system with other CSS-in-JS libraries,
+it can also be helpful to remove style props.
+To ensure style props are not passed to the element, a `removeProps`
+utility can be used.
+
+```jsx
+import React from 'react'
+import styled from 'styled-components'
+import {
+  width,
+  fontSize,
+  space,
+  removeProps
+} from 'styled-system'
+
+const BaseComponent = props => {
+  const next = removeProps(props)
+  return <div {...next} />
+}
+
+const Component = styled(BaseComponent)([],
+  width,
+  fontSize,
+  space
+)
+```
+
 ## Breakpoints
@@ -208,3 +239,7 @@
     12, 16, 18, 24, 36, 72
-  ]
+  ],
+  colors: {
+    black: '#111',
+    blue: '#07c',
+  }
 }
@@ -217,2 +252,3 @@
       my={[ 2, 3 ]}
+      color='blue'
     />
@@ -225,7 +261,7 @@ </ThemeProvider>
 
+- [grid-styled](https://github.com/jxnblk/grid-styled)
 - [styled-components](https://github.com/styled-components/styled-components)
 - [glamorous](https://github.com/paypal/glamorous)
-- [grid-styled](https://github.com/jxnblk/grid-styled)
 
 MIT License
 

src/color.js

@@ -1,2 +0,2 @@
-const { breaks, idx, joinObj, arr, dec, media } = require('./util')
+const { breaks, idx, merge, arr, dec, media } = require('./util')
 
@@ -17,4 +17,4 @@ const REG = /^color|bg$/
       .map(media(bp))
-      .reduce(joinObj, {})
-  }).reduce(joinObj, {})
+      .reduce(merge, {})
+  }).reduce(merge, {})
 }
@@ -21,0 +21,0 @@

src/font-size.js

@@ -1,2 +0,2 @@
-const { is, idx, arr, num, px, breaks, dec, media, joinObj } = require('./util')
+const { is, idx, arr, num, px, breaks, dec, media, merge } = require('./util')
 const { fontSizes } = require('./constants')
@@ -16,5 +16,5 @@
     .map(media(bp))
-    .reduce(joinObj, {})
+    .reduce(merge, {})
 }
 
 const fx = scale => n => num(n) ? px(scale[n] || n) : n

src/index.js

@@ -5,2 +5,3 @@ const space = require('./space')
 const color = require('./color')
+const removeProps = require('./remove-props')
 const util = require('./util')
@@ -14,4 +15,5 @@ const constants = require('./constants')
   color,
+  removeProps,
   util,
   constants
 }

src/space.js

@@ -10,3 +10,3 @@ const {
   media,
-  joinObj
+  merge
 } = require('./util')
@@ -29,4 +29,4 @@ const { scale } = require('./constants')
       .map(media(bp))
-      .reduce(joinObj, {})
-  }).reduce(joinObj, {})
+      .reduce(merge, {})
+  }).reduce(merge, {})
 }
@@ -33,0 +33,0 @@

src/util.js

@@ -11,21 +11,19 @@ const { breakpoints } = require('./constants')
 const mq = n => `@media screen and (min-width: ${n}em)`
-const breaks = props => [ null, ...(idx([ 'theme', 'breakpoints' ], props) || breakpoints).map(mq) ]
 
+const breaks = props => [
+  null,
+  ...(idx([ 'theme', 'breakpoints' ], props) || breakpoints).map(mq)
+]
+
 const dec = props => val => arr(props)
   .reduce((acc, prop) => (acc[prop] = val, acc), {})
+
 const media = bp => (d, i) => bp[i] ? ({[bp[i]]: d}) : d
-const joinObj = (acc, obj) =>
-  Object.assign(
-    acc,
-    Object.keys(obj).reduce(
-      (result, key) =>
-        Object.assign(result, {
-          [key]: typeof acc[key] === 'object' && typeof obj[key] === 'object'
-            ? [acc[key], obj[key]].reduce(joinObj, {})
-            : obj[key],
-        }),
-      {}
-    )
-  );
 
+const merge = (a, b) => Object.assign({}, a, b, Object.keys(b).reduce((obj, key) =>
+  Object.assign(obj, {
+    [key]: typeof a[key] === 'object' ? merge(a[key], b[key]) : b[key]
+  }),
+  {}))
+
 module.exports = {
@@ -41,4 +39,4 @@ is,
   dec,
-  joinObj,
+  merge,
   mq
 }

src/width.js

@@ -1,2 +0,2 @@
-const { is, arr, num, px, breaks, dec, media, joinObj } = require('./util')
+const { is, arr, num, px, breaks, dec, media, merge } = require('./util')
 
@@ -14,3 +14,3 @@ module.exports = props => {
     .map(media(bp))
-    .reduce(joinObj, {})
+    .reduce(merge, {})
 }
@@ -17,0 +17,0 @@

test.js

@@ -7,2 +7,3 @@ import test from 'ava'
   color,
+  removeProps,
   util
@@ -116,2 +117,57 @@ } from './src'
 
+test('util.merge reduces objects', t => {
+  const a = [
+    {
+      a: 'hello',
+      b: {
+        beep: 'boop'
+      }
+    },
+    {
+      b: {
+        hello: 'hi'
+      }
+    }
+  ].reduce(util.merge, {})
+  t.deepEqual(a, {
+    a: 'hello',
+    b: {
+      beep: 'boop',
+      hello: 'hi'
+    }
+  })
+})
+
+test('util.merge merges objects', t => {
+  const a = util.merge({
+    a: 'hello',
+    b: {
+      beep: 'boop'
+    },
+    c: {
+      d: 2,
+      e: 'f'
+    }
+  }, {
+    b: {
+      hello: 'hi'
+    },
+    c: {
+      g: 3
+    }
+  })
+  t.deepEqual(a, {
+    a: 'hello',
+    b: {
+      beep: 'boop',
+      hello: 'hi'
+    },
+    c: {
+      d: 2,
+      e: 'f',
+      g: 3
+    }
+  })
+})
+
 test('space returns margin declarations', t => {
@@ -364,1 +420,32 @@ const dec = space({m: 1})
 })
+
+test('removeProps removes style props', t => {
+  const a = removeProps({
+    name: 'hello',
+    type: 'text',
+    value: 'Hi',
+    m: 1,
+    mt: 2,
+    mr: 3,
+    mb: 4,
+    mx: 5,
+    my: 6,
+    p: 1,
+    pt: 2,
+    pr: 3,
+    pb: 4,
+    px: 5,
+    py: 6,
+    w: 1/2,
+    width: 1/4,
+    f: 4,
+    fontSize: 5,
+    color: 'tomato',
+    bg: 'lime'
+  })
+  t.deepEqual(a, {
+    name: 'hello',
+    type: 'text',
+    value: 'Hi',
+  })
+})

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

29383

increased by8.21%

Number of package files

23

increased by9.52%

Lines of code

833

increased by14.42%

Number of lines in readme file

264

increased by15.79%

No dependency changes