fix: properly handle multiple values in "border-radius"

Fixes #28
styled-components · Jun 22, 2019 · 23a3aa0 · 23a3aa0
1 parent 0a55e20
commit 23a3aa0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/packages/core/src/propGetters.js b/packages/core/src/propGetters.js
@@ -64,7 +64,7 @@ export const propGetters = {
   'border-left-color': getColor,
 
   // getRadius
-  'border-radius': getNumber(getRadius),
+  'border-radius': getMultiValues(getNumber(getRadius)),
 
   // getBorder
   border: getNumberBorder,

diff --git a/packages/core/src/propGetters.test.js b/packages/core/src/propGetters.test.js
@@ -0,0 +1,16 @@
+import { propGetters } from './propGetters'
+
+describe('#propGetters', () => {
+  describe('border-radius', () => {
+    it('handles several values', () => {
+      expect(propGetters['border-radius']('10')({})).toBe('10px')
+      expect(propGetters['border-radius']('1 2')({})).toBe('1px 2px')
+      expect(
+        propGetters['border-radius']('md')({ theme: { radii: { md: 10 } } }),
+      ).toBe('10px')
+      expect(
+        propGetters['border-radius']('md md')({ theme: { radii: { md: 10 } } }),
+      ).toBe('10px 10px')
+    })
+  })
+})