fix: fix grid responsive values

Author: gregberge

packages/shared/core/Col.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { pr, pl } from '@smooth-ui/system'
+import { pr, pl, merge } from '@smooth-ui/system'
 import { css } from './styled-engine'
 import { gridGutter, gridColumns, breakpoints } from './theming/index'
 import { mediaMinWidth } from './utils/index'
@@ -74,20 +74,21 @@ function getStyleFromProps(p) {
   const { gutter = gridGutter(p) } = p
   const bk = breakpoints(p)
   const breakpointsKeys = Object.keys(bk)
-  const style = {
+  let style = {
     boxSizing: 'border-box',
-    ...pr({ pr: gutter })(p),
-    ...pl({ pl: gutter })(p),
     flexBasis: 0,
     flexGrow: 1,
     maxWidth: '100%',
   }
 
+  style = merge(style, pl({ pl: gutter })(p))
+  style = merge(style, pr({ pr: gutter })(p))
+
   let index = -1
   // eslint-disable-next-line no-plusplus
   while (++index < breakpointsKeys.length) {
     const breakpoint = breakpointsKeys[index]
-    Object.assign(style, getBreakPointStyle(breakpoint, bk[breakpoint], p))
+    style = merge(style, getBreakPointStyle(breakpoint, bk[breakpoint], p))
   }
 
   return style

packages/shared/core/utils/misc.js

@@ -1,5 +1,6 @@
 export const is = n => n !== undefined && n !== null
 export const num = n => typeof n === 'number' && !Number.isNaN(n)
+export const string = n => typeof n === 'string'
 export const func = n => typeof n === 'function'
 
 export const get = (obj, ...paths) =>

packages/shared/core/utils/unit.js

@@ -1,7 +1,18 @@
-import { num } from './misc'
+import { num, string } from './misc'
 
 export const unit = unit => value => (num(value) ? `${value}${unit}` : value)
-export const negative = value => (num(value) ? -value : `-${value}`)
+export const negative = value => {
+  if (!value) return value
+  if (num(value)) return -value
+  if (string(value)) return `-${value}`
+  const obj = {}
+  const keys = Object.keys(value)
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    obj[key] = negative(value[key])
+  }
+  return obj
+}
 
 export const px = unit('px')
 

packages/system/src/index.js

@@ -2,3 +2,4 @@ export * from './style'
 export * from './styles/index'
 export * from './cx'
 export { universalSystem as default } from './universalSystem'
+export { merge } from './util'