Add props utilities

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

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"
+  }
+}

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
+}

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',
+  })
+})