Skip to content

Commit fcd0f36

Browse files
committed
Pass theme to closures as function instead of object
1 parent 8699f39 commit fcd0f36

File tree

2 files changed

+69
-10
lines changed

2 files changed

+69
-10
lines changed

__tests__/resolveConfig.test.js

Lines changed: 65 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -322,8 +322,8 @@ test('functions in the default theme section are lazily evaluated', () => {
322322
magenta: 'magenta',
323323
yellow: 'yellow',
324324
},
325-
backgroundColors: ({ colors }) => colors,
326-
textColors: ({ colors }) => colors,
325+
backgroundColors: theme => theme('colors'),
326+
textColors: theme => theme('colors'),
327327
},
328328
variants: {
329329
backgroundColors: ['responsive', 'hover', 'focus'],
@@ -369,12 +369,12 @@ test('functions in the user theme section are lazily evaluated', () => {
369369
green: 'green',
370370
blue: 'blue',
371371
},
372-
backgroundColors: ({ colors }) => ({
373-
...colors,
372+
backgroundColors: theme => ({
373+
...theme('colors'),
374374
customBackground: '#bada55',
375375
}),
376-
textColors: ({ colors }) => ({
377-
...colors,
376+
textColors: theme => ({
377+
...theme('colors'),
378378
customText: '#facade',
379379
}),
380380
},
@@ -461,7 +461,7 @@ test('theme values in the extend section extend the existing theme', () => {
461461
'50': '.5',
462462
'100': '1',
463463
},
464-
backgroundColors: ({ colors }) => colors,
464+
backgroundColors: theme => theme('colors'),
465465
},
466466
variants: {
467467
backgroundColors: ['responsive', 'hover', 'focus'],
@@ -510,7 +510,7 @@ test('theme values in the extend section extend the user theme', () => {
510510
'20': '.2',
511511
'40': '.4',
512512
},
513-
height: theme => theme.width,
513+
height: theme => theme('width'),
514514
extend: {
515515
opacity: {
516516
'60': '.6',
@@ -618,7 +618,7 @@ test('theme values in the extend section can extend values that are depended on
618618
magenta: 'magenta',
619619
yellow: 'yellow',
620620
},
621-
backgroundColors: ({ colors }) => colors,
621+
backgroundColors: theme => theme('colors'),
622622
},
623623
variants: {
624624
backgroundColors: ['responsive', 'hover', 'focus'],
@@ -701,3 +701,59 @@ test('theme values in the extend section are not deeply merged', () => {
701701
},
702702
})
703703
})
704+
705+
test('the theme function can use a default value if the key is missing', () => {
706+
const userConfig = {
707+
theme: {
708+
colors: {
709+
red: 'red',
710+
green: 'green',
711+
blue: 'blue',
712+
},
713+
},
714+
}
715+
716+
const defaultConfig = {
717+
prefix: '-',
718+
important: false,
719+
separator: ':',
720+
theme: {
721+
colors: {
722+
cyan: 'cyan',
723+
magenta: 'magenta',
724+
yellow: 'yellow',
725+
},
726+
borderColor: theme => ({
727+
default: theme('colors.gray', 'currentColor'),
728+
...theme('colors'),
729+
}),
730+
},
731+
variants: {
732+
borderColor: ['responsive', 'hover', 'focus'],
733+
},
734+
}
735+
736+
const result = resolveConfig([userConfig, defaultConfig])
737+
738+
expect(result).toEqual({
739+
prefix: '-',
740+
important: false,
741+
separator: ':',
742+
theme: {
743+
colors: {
744+
red: 'red',
745+
green: 'green',
746+
blue: 'blue',
747+
},
748+
borderColor: {
749+
default: 'currentColor',
750+
red: 'red',
751+
green: 'green',
752+
blue: 'blue',
753+
},
754+
},
755+
variants: {
756+
borderColor: ['responsive', 'hover', 'focus'],
757+
},
758+
})
759+
})

src/util/resolveConfig.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import mergeWith from 'lodash/mergeWith'
22
import isFunction from 'lodash/isFunction'
33
import defaults from 'lodash/defaults'
44
import map from 'lodash/map'
5+
import get from 'lodash/get'
56

67
function resolveFunctionKeys(object) {
8+
const getKey = (key, defaultValue) => get(object, key, defaultValue)
9+
710
return Object.keys(object).reduce((resolved, key) => {
811
return {
912
...resolved,
10-
[key]: isFunction(object[key]) ? object[key](object) : object[key],
13+
[key]: isFunction(object[key]) ? object[key](getKey) : object[key],
1114
}
1215
}, {})
1316
}

0 commit comments

Comments
 (0)