fix(system): space nested values

styled-components · Aug 9, 2019 · 4119e8c · 4119e8c
1 parent 348803c
commit 4119e8c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/packages/system/src/style.test.js b/packages/system/src/style.test.js
@@ -10,6 +10,9 @@ describe('#style', () => {
     it('reads from theme', () => {
       const scope = themeGetter({ key: 'scope' })
       expect(scope('value')({ theme: { scope: { value: 'foo' } } })).toBe('foo')
+      expect(
+        scope('a.b.c')({ theme: { scope: { a: { b: { c: 'd' } } } } }),
+      ).toBe('d')
     })
 
     it('uses defaultVariants', () => {

diff --git a/packages/system/src/styles/space.js b/packages/system/src/styles/space.js
@@ -1,5 +1,5 @@
 import { style, themeGetter, compose } from '../style'
-import { is, string, negative } from '../util'
+import { is, string, negative, get } from '../util'
 import { getPx } from './basics'
 
 function toNegative(value) {
@@ -18,7 +18,7 @@ export const getSpace = themeGetter({
     if (string(rawValue)) {
       const neg = rawValue.startsWith('-')
       const absoluteValue = neg ? rawValue.substr(1) : rawValue
-      const variantValue = variants[absoluteValue]
+      const variantValue = get(variants, absoluteValue)
       const value = is(variantValue) ? variantValue : absoluteValue
       return neg ? toNegative(value) : value
     }

diff --git a/packages/system/src/util.test.js b/packages/system/src/util.test.js
@@ -142,6 +142,9 @@ describe('util', () => {
     it('gets a value from the theme', () => {
       expect(getThemeValue({}, 'foo')).toBe(undefined)
       expect(getThemeValue({ theme: { foo: 'bar' } }, 'foo')).toBe('bar')
+      expect(getThemeValue({ theme: { a: { b: { c: 'd' } } } }, 'a.b.c')).toBe(
+        'd',
+      )
       expect(getThemeValue({ theme: { foo: 'bar' } }, 'x')).toBe(undefined)
     })
 

diff --git a/packages/system/tests/styled-components/th.test.js b/packages/system/tests/styled-components/th.test.js
@@ -144,7 +144,9 @@ describe('#th', () => {
           [-2, '-8px'],
           ['16rpx', '1rem'],
           ['-16rpx', '-1rem'],
+          ['button.md', '100px'],
         ],
+        theme: { space: { 1: '4px', 2: '8px', button: { md: '100px' } } },
       },
     ],
     [