fix: custom media overrides

fixes #7

lib/__tests__/index.ts

@@ -393,7 +393,7 @@ test('flush', () => {
 })
 
 test('injectGlobal', () => {
-  const { injectGlobal, flush } = hypostyle()
+  const { injectGlobal, flush } = hypostyle({})
   injectGlobal({ html: { color: 'blue' } })
   const sheet = flush()
   assert.ok(sheet.includes('color:blue'))
@@ -495,4 +495,23 @@ test('prefix', () => {
   assert.equal(/hypo/.test(sheet), true)
 })
 
+/**
+ * @see https://github.com/sure-thing/hypostyle/issues/7
+ */
+test('issue #7', async () => {
+  const { style } = hypostyle(defaults)
+
+  const styles = style({
+    color: ['blue', 'red'],
+    [`@media (min-width: ${defaults.breakpoints[0]})`]: {
+      background: 'tomato',
+    },
+  })
+
+  assert.equal(styles, {
+    color: 'blue',
+    '@media (min-width: 400px)': { color: 'red', background: 'tomato' },
+  })
+})
+
 test.run()

lib/index.ts

@@ -156,9 +156,14 @@ function style(props: HypostyleObject, theme: Theme): CssLikeObject {
 
         props[prop] = arr
       } else {
-        // continue, nested style object
-        styles[prop] = style(mixedObject, theme)
-        continue // continue main loop
+        /*
+         * Safely merge in nested prop — there may be duplicate keys, like
+         * after shorthand expansion or a custom media query block
+         */
+        var nested = {}
+        nested[prop] = style(mixedObject, theme)
+        merge(styles, nested)
+        continue // continue, nested style object
       }
     }