Add selectors propType and ensure prop is properly matched when split

src/enhancers/index.ts

@@ -14,6 +14,7 @@ import * as outline from './outline'
 import * as overflow from './overflow'
 import * as position from './position'
 import * as resize from './resize'
+import * as selectors from './selectors'
 import * as spacing from './spacing'
 import * as text from './text'
 import * as transform from './transform'
@@ -37,6 +38,7 @@ export {
   overflow,
   position,
   resize,
+  selectors,
   spacing,
   text,
   transform,
@@ -60,6 +62,7 @@ export const propTypes: PropTypesMapping = {
   ...overflow.propTypes,
   ...position.propTypes,
   ...resize.propTypes,
+  ...selectors.propTypes,
   ...spacing.propTypes,
   ...text.propTypes,
   ...transform.propTypes,
@@ -85,6 +88,7 @@ export const propAliases: PropAliases = {
   ...overflow.propAliases,
   ...position.propAliases,
   ...resize.propAliases,
+  ...selectors.propAliases,
   ...spacing.propAliases,
   ...text.propAliases,
   ...transform.propAliases,
@@ -108,6 +112,7 @@ export const propValidators: PropValidators = {
   ...overflow.propValidators,
   ...position.propValidators,
   ...resize.propValidators,
+  ...selectors.propValidators,
   ...spacing.propValidators,
   ...text.propValidators,
   ...transform.propValidators,
@@ -131,6 +136,7 @@ export const propEnhancers: PropEnhancers = {
   ...overflow.propEnhancers,
   ...position.propEnhancers,
   ...resize.propEnhancers,
+  ...selectors.propEnhancers,
   ...spacing.propEnhancers,
   ...text.propEnhancers,
   ...transform.propEnhancers,

src/enhancers/selectors.ts

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types'
+import { PropValidators, PropEnhancers, PropTypesMapping, PropAliases } from '../types/enhancers'
+
+export const propTypes: PropTypesMapping = {
+  selectors: PropTypes.object
+}
+
+export const propAliases: PropAliases = {}
+
+export const propValidators: PropValidators = {}
+
+export const propEnhancers: PropEnhancers = {}

test/utils/split-box-props.ts

@@ -7,6 +7,7 @@ test('splits box props', t => {
     disabled: true
   }
   t.deepEqual(splitBoxProps(props), {
+    /* @ts-ignore We are only passing and expecting a partial object back */
     matchedProps: {
       background: 'red'
     },
@@ -15,3 +16,27 @@ test('splits box props', t => {
     }
   })
 })
+
+test('includes selectors in matchedProps', t => {
+  const props = {
+    selectors: {
+      '&:hover': {
+        backgroundColor: 'red'
+      }
+    }
+  }
+
+  const result = splitBoxProps(props)
+
+  t.deepEqual(result, {
+    /* @ts-ignore We are only passing and expecting a partial object back */
+    matchedProps: {
+      selectors: {
+        '&:hover': {
+          backgroundColor: 'red'
+        }
+      }
+    },
+    remainingProps: {}
+  })
+})