Repository: styled-system/styled-system (js)

Issue:
add utility to filter relevant props for collectives
when using a utility like `color` or `space` it often forces you to spread all your props on a dom element instead of getting every single possibility

```
MyComponent = (props) => (
	<MyStyledComponent {...props}>
		...
	</MyStyledComponent>
)
```

```
MyComponent = ({m,mt,mb,mr,ml,my,mx,p,...etc}) => (
	<MyStyledComponent
	m={m}
	mt={mt}
	mb={mb}
	mr={mr}
	...
	>
		...
	</MyStyledComponent>
)
```

Something like this could solve the issue

```
MyComponent = (props) => (
	<MyStyledComponent
	{...getSpaceProps(props)}
	>
		...
	</MyStyledComponent>
)
```



Pull request:
Add Props utility package
Fixes #707

Patch:
diff --git a/docs/packages.md b/docs/packages.md
index ceccbdd..20ab5a5 100644
--- a/docs/packages.md
+++ b/docs/packages.md
@@ -27,3 +27,4 @@ The Styled System ecosystem also includes these optional packages
 | [`@styled-system/prop-types`](https://github.com/styled-system/styled-system/tree/master/packages/prop-types)                   | Prop type definitions for components built with Styled System                     |
 | [`@styled-system/theme-get`](https://github.com/styled-system/styled-system/tree/master/packages/theme-get)                     | Utility to safely access values from a theme                                      |
 | [`@styled-system/edit`](https://github.com/styled-system/styled-system/tree/master/packages/edit)                               | Debugging components for live editing Styled System theme objects                 |
+[`@styled-system/props`](https://github.com/styled-system/styled-system/tree/master/packages/props) | Utilities for working with Styled System Props
diff --git a/packages/props/README.md b/packages/props/README.md
new file mode 100644
index 0000000..4d734a2
--- /dev/null
+++ b/packages/props/README.md
@@ -0,0 +1,26 @@
+
+# @styled-system/props
+
+Utilities for using Styled System props
+
+```sh
+npm i @styled-system/props
+```
+
+```js
+import { pick, omit } from '@styled-system/props'
+
+const attr = omit({
+  id: 'keep-this',
+  color: 'primary',
+})
+// { id: 'keep-this' }
+
+const props = pick({
+  className: 'hello',
+  color: 'secondary',
+})
+// { color: 'secondary' }
+```
+
+MIT License
diff --git a/packages/props/package.json b/packages/props/package.json
new file mode 100644
index 0000000..cee6840
--- /dev/null
+++ b/packages/props/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@styled-system/props",
+  "version": "5.1.2",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "author": "Brent Jackson",
+  "license": "MIT",
+  "dependencies": {
+    "styled-system": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/props/src/index.js b/packages/props/src/index.js
new file mode 100644
index 0000000..86867b6
--- /dev/null
+++ b/packages/props/src/index.js
@@ -0,0 +1,52 @@
+import {
+  compose,
+  space,
+  typography,
+  color,
+  layout,
+  flexbox,
+  border,
+  background,
+  position,
+  grid,
+  shadow,
+  buttonStyle,
+  textStyle,
+  colorStyle
+} from 'styled-system'
+
+const all = compose(
+  space,
+  typography,
+  color,
+  layout,
+  flexbox,
+  border,
+  background,
+  position,
+  grid,
+  shadow,
+  buttonStyle,
+  textStyle,
+  colorStyle
+)
+
+const regex = new RegExp(`^(${all.propNames.join('|')})$`)
+
+export const omit = props => {
+  const next = {}
+  for (let key in props) {
+    if (regex.test(key)) continue
+    next[key] = props[key]
+  }
+  return next
+}
+
+export const pick = props => {
+  const next = {}
+  for (let key in props) {
+    if (!regex.test(key)) continue
+    next[key] = props[key]
+  }
+  return next
+}


Test patch:
diff --git a/packages/props/test/index.js b/packages/props/test/index.js
new file mode 100644
index 0000000..6cef611
--- /dev/null
+++ b/packages/props/test/index.js
@@ -0,0 +1,26 @@
+import { pick, omit } from '../src'
+
+const props = {
+  id: 'hi',
+  className: 'beep',
+  p: 3,
+  bg: 'tomato',
+  color: 'white',
+}
+
+test('omits styled-system props', () => {
+  const attr = omit(props)
+  expect(attr).toEqual({
+    id: 'hi',
+    className: 'beep',
+  })
+})
+
+test('picks styled-system props', () => {
+  const sx = pick(props)
+  expect(sx).toEqual({
+    p: 3,
+    bg: 'tomato',
+    color: 'white',
+  })
+})