Add support for nested selector composition

src/enhance-props.ts

@@ -27,7 +27,7 @@ export default function enhanceProps(
   let className: string = props.className || ''
 
   for (const [property, value] of propsMap) {
-    const isSelectorOrChildProp = property === SELECTORS_PROP || parentProperty === SELECTORS_PROP
+    const isSelectorOrChildProp = property === SELECTORS_PROP || parentProperty.length > 0
     // Only attempt to process objects for the `selectors` prop or the individual selectors below it
     if (isObject(value) && isSelectorOrChildProp) {
       const prop = property === 'selectors' ? '' : property

src/index.tsx

@@ -7,7 +7,8 @@ export { default as splitProps } from './utils/split-props'
 export { default as splitBoxProps } from './utils/split-box-props'
 export { setClassNamePrefix } from './get-class-name'
 export { configureSafeHref } from './utils/safeHref'
-export { BoxProps, BoxOwnProps, EnhancerProps, PropsOf, PolymorphicBoxProps, BoxComponent } from './types/box-types'
+export { CssProps, BoxCssProps, EnhancerProps, SelectorMap } from './types/enhancers'
+export { BoxProps, BoxOwnProps, PropsOf, PolymorphicBoxProps, BoxComponent } from './types/box-types'
 export {
   KeyframesPercentageKey,
   KeyframesPositionalKey,

src/types/box-types.ts

@@ -1,8 +1,6 @@
 import React from 'react'
 import { EnhancerProps } from './enhancers'
 
-export { EnhancerProps }
-
 /**
  * @template T Object
  * @template K Union of keys (not necessarily present in T)
@@ -48,6 +46,6 @@ export type PolymorphicBoxProps<
 /**
  * Convenience type for defining your own components that extend Box and pass-through props
  */
-export type BoxComponent<P = {}, D extends React.ElementType = React.ElementType> = <
-  E extends React.ElementType = D
->(props: PolymorphicBoxProps<E, P>) => JSX.Element
+export type BoxComponent<P = {}, D extends React.ElementType = React.ElementType> = <E extends React.ElementType = D>(
+  props: PolymorphicBoxProps<E, P>
+) => JSX.Element

src/types/enhancers.ts

@@ -197,9 +197,11 @@ export type EnhancerProps = BoxCssProps<CssProps> & {
    *   Hello world
    * </Box>
    */
-  selectors?: {
-    [selector: string]: BoxCssProps<CssProps>
-  }
+  selectors?: SelectorMap
+}
+
+export type SelectorMap = {
+  [selector: string]: BoxCssProps<CssProps> | SelectorMap
 }
 
 export type PropEnhancerValueType = string | number

test/enhance-props.ts

@@ -85,3 +85,88 @@ test.serial('preserves style prop', t => {
 
   t.deepEqual(enhancedProps, expected)
 })
+
+test.serial('converts styles in selectors to class name', t => {
+  const { className, enhancedProps } = enhanceProps({
+    selectors: {
+      '&:hover': {
+        backgroundColor: 'blue'
+      }
+    }
+  })
+
+  t.deepEqual(className, 'ub-bg-clr_nfznl2')
+  t.deepEqual(enhancedProps, {})
+})
+
+test.serial('injects selector styles', t => {
+  enhanceProps({
+    selectors: {
+      '&:hover': {
+        backgroundColor: 'blue'
+      }
+    }
+  })
+
+  t.deepEqual(
+    styles.getAll(),
+    `
+.ub-bg-clr_nfznl2:hover {
+  background-color: blue;
+}`
+  )
+})
+
+test.serial('converts styles in nested selectors to class name', t => {
+  const { className, enhancedProps } = enhanceProps({
+    selectors: {
+      '&[data-active]': {
+        selectors: {
+          '&:hover': {
+            backgroundColor: 'blue'
+          }
+        }
+      }
+    }
+  })
+
+  t.deepEqual(className, 'ub-bg-clr_nfznl2')
+  t.deepEqual(enhancedProps, {})
+})
+
+test.serial("selectors can be nested without 'selectors' key", t => {
+  const { className, enhancedProps } = enhanceProps({
+    selectors: {
+      '&[data-active]': {
+        '&:hover': {
+          backgroundColor: 'blue'
+        }
+      }
+    }
+  })
+
+  t.deepEqual(className, 'ub-bg-clr_nfznl2')
+  t.deepEqual(enhancedProps, {})
+})
+
+test.serial('injects nested selector styles', t => {
+  enhanceProps({
+    selectors: {
+      '&[data-active]': {
+        selectors: {
+          '&:hover': {
+            backgroundColor: 'blue'
+          }
+        }
+      }
+    }
+  })
+
+  t.deepEqual(
+    styles.getAll(),
+    `
+.ub-bg-clr_nfznl2[data-active]:hover {
+  background-color: blue;
+}`
+  )
+})

tools/story.tsx

@@ -266,6 +266,20 @@ storiesOf('Box', module)
           <Box className="child" backgroundColor="yellow" width={200} height={100} />
           <Box className="child" backgroundColor="green" width={200} height={100} />
         </Box>
+        Nested selector - blue background when <Box is="code">data-active=true</Box>, red background on hover
+        <Box
+          data-active={true}
+          height={100}
+          width={200}
+          selectors={{
+            '[data-active=true]': {
+              backgroundColor: 'blue',
+              '&:hover': {
+                backgroundColor: 'red'
+              }
+            }
+          }}
+        />
       </Box>
     )
   })