feat(border): allow strings to be expanded

Author: gregberge

packages/system/src/styles/borders.test.ts

@@ -1,5 +1,13 @@
 import { borders } from './borders'
 
+describe('#border', () => {
+  it('expands border', () => {
+    expect(borders({ border: 1 })).toEqual({ border: '1px solid' })
+    expect(borders({ border: '1' })).toEqual({ border: '1px solid' })
+    expect(borders({ border: '3px' })).toEqual({ border: '3px' })
+  })
+})
+
 describe('#divideY', () => {
   it('works as expected', () => {
     expect(borders({ divideY: 1 })).toEqual({

packages/system/src/styles/borders.ts

@@ -1,5 +1,4 @@
 import * as CSS from 'csstype'
-import { num } from '@xstyled/util'
 import { style, themeGetter, compose } from '../style'
 import { px } from '../unit'
 import { getColor, ThemeColor, Color } from './colors'
@@ -14,7 +13,10 @@ export type ThemeBorder<T extends ITheme = Theme> = ThemeNamespaceValue<
 export const getBorder = themeGetter<ThemeBorder>({
   name: 'border',
   key: 'borders',
-  transform: (n: number | string) => (num(n) && n > 0 ? `${px(n)} solid` : n),
+  transform: (value: number | string) => {
+    const num = Number(value)
+    return num > 0 ? `${px(num)} solid` : value
+  },
 })
 
 export type ThemeBorderWidth<T extends ITheme = Theme> = ThemeNamespaceValue<