archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Fix bug where config utils was not passed through to nested closures

Browse Source
This commit is contained in:
Adam Wathan 2019-04-27 16:55:21 -04:00
parent 93896615b4
commit aac25d6a7a
2 changed files with 76 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
__tests__/resolveConfig.test.js
View File

@ -899,6 +899,75 @@ test('theme values in the extend section are lazily evaluated', () => {
})
})
test('lazily evaluated values have access to the config utils', () => {
const userConfig = {
theme: {
shift: (theme, { negative }) => ({
...theme('spacing'),
...negative(theme('spacing')),
}),
extend: {
nudge: (theme, { negative }) => ({
...theme('spacing'),
...negative(theme('spacing')),
}),
},
},
}
const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
spacing: {
'1': '1px',
'2': '2px',
'3': '3px',
'4': '4px',
},
},
variants: {},
}
const result = resolveConfig([userConfig, defaultConfig])
expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
spacing: {
'1': '1px',
'2': '2px',
'3': '3px',
'4': '4px',
},
shift: {
'-1': '-1px',
'-2': '-2px',
'-3': '-3px',
'-4': '-4px',
'1': '1px',
'2': '2px',
'3': '3px',
'4': '4px',
},
nudge: {
'-1': '-1px',
'-2': '-2px',
'-3': '-3px',
'-4': '-4px',
'1': '1px',
'2': '2px',
'3': '3px',
'4': '4px',
},
},
variants: {},
})
})
test('the original theme is not mutated', () => {
const userConfig = {
theme: {

14
src/util/resolveConfig.js
View File

@ -4,7 +4,7 @@ import defaults from 'lodash/defaults'
import map from 'lodash/map'
import get from 'lodash/get'
const utils = {
const configUtils = {
negative(scale) {
return Object.keys(scale)
.filter(key => scale[key] !== '0')
@ -31,23 +31,23 @@ function mergeExtensions({ extend, ...theme }) {
}
}
return resolveThemePath => ({
...value(themeValue, resolveThemePath),
...value(extensions, resolveThemePath),
return (resolveThemePath, utils) => ({
...value(themeValue, resolveThemePath, utils),
...value(extensions, resolveThemePath, utils),
})
})
}
function resolveFunctionKeys(object) {
const resolveObjectPath = (key, defaultValue) => {
const resolveThemePath = (key, defaultValue) => {
const val = get(object, key, defaultValue)
return isFunction(val) ? val(resolveObjectPath) : val
return isFunction(val) ? val(resolveThemePath) : val
}
return Object.keys(object).reduce((resolved, key) => {
return {
...resolved,
[key]: isFunction(object[key]) ? object[key](resolveObjectPath, utils) : object[key],
[key]: isFunction(object[key]) ? object[key](resolveThemePath, configUtils) : object[key],
}
}, {})
}