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

Merge pull request #655 from tailwindcss/extend-theme

Browse Source 
Add first class support for extending the default theme
This commit is contained in:
Adam Wathan 2019-02-14 14:33:31 -05:00 committed by GitHub
commit 86fe81b1bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 293 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
__tests__/resolveConfig.test.js
View File

@ -430,3 +430,274 @@ test('functions in the user theme section are lazily evaluated', () => {
},
})
})
test('theme values in the extend section extend the existing theme', () => {
const userConfig = {
theme: {
extend: {
opacity: {
'25': '25',
'75': '.75',
},
backgroundColors: {
customBackground: '#bada55',
},
},
},
}
const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
},
opacity: {
'0': '0',
'50': '.5',
'100': '1',
},
backgroundColors: ({ colors }) => colors,
},
variants: {
backgroundColors: ['responsive', 'hover', 'focus'],
opacity: ['responsive', 'hover', 'focus'],
},
}
const result = resolveConfig([userConfig, defaultConfig])
expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
},
opacity: {
'0': '0',
'50': '.5',
'100': '1',
'25': '25',
'75': '.75',
},
backgroundColors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
customBackground: '#bada55',
},
},
variants: {
backgroundColors: ['responsive', 'hover', 'focus'],
opacity: ['responsive', 'hover', 'focus'],
},
})
})
test('theme values in the extend section extend the user theme', () => {
const userConfig = {
theme: {
opacity: {
'0': '0',
'20': '.2',
'40': '.4',
},
height: theme => theme.width,
extend: {
opacity: {
'60': '.6',
'80': '.8',
'100': '1',
},
height: {
customHeight: '500vh',
},
},
},
}
const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
opacity: {
'0': '0',
'50': '.5',
'100': '1',
},
height: {
'0': 0,
full: '100%',
},
width: {
'0': 0,
'1': '.25rem',
'2': '.5rem',
'3': '.75rem',
'4': '1rem',
},
},
variants: {
opacity: ['responsive', 'hover', 'focus'],
height: ['responsive'],
width: ['responsive'],
},
}
const result = resolveConfig([userConfig, defaultConfig])
expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
opacity: {
'0': '0',
'20': '.2',
'40': '.4',
'60': '.6',
'80': '.8',
'100': '1',
},
height: {
'0': 0,
'1': '.25rem',
'2': '.5rem',
'3': '.75rem',
'4': '1rem',
customHeight: '500vh',
},
width: {
'0': 0,
'1': '.25rem',
'2': '.5rem',
'3': '.75rem',
'4': '1rem',
},
},
variants: {
opacity: ['responsive', 'hover', 'focus'],
height: ['responsive'],
width: ['responsive'],
},
})
})
test('theme values in the extend section can extend values that are depended on lazily', () => {
const userConfig = {
theme: {
extend: {
colors: {
red: 'red',
green: 'green',
blue: 'blue',
},
backgroundColors: {
customBackground: '#bada55',
},
},
},
}
const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
},
backgroundColors: ({ colors }) => colors,
},
variants: {
backgroundColors: ['responsive', 'hover', 'focus'],
},
}
const result = resolveConfig([userConfig, defaultConfig])
expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
colors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
red: 'red',
green: 'green',
blue: 'blue',
},
backgroundColors: {
cyan: 'cyan',
magenta: 'magenta',
yellow: 'yellow',
red: 'red',
green: 'green',
blue: 'blue',
customBackground: '#bada55',
},
},
variants: {
backgroundColors: ['responsive', 'hover', 'focus'],
},
})
})
test('theme values in the extend section are not deeply merged', () => {
const userConfig = {
theme: {
extend: {
fonts: {
sans: ['Comic Sans'],
},
},
},
}
const defaultConfig = {
prefix: '-',
important: false,
separator: ':',
theme: {
fonts: {
sans: ['system-ui', 'Helvetica Neue', 'sans-serif'],
serif: ['Constantia', 'Georgia', 'serif'],
mono: ['Menlo', 'Courier New', 'monospace'],
},
},
variants: {
fonts: ['responsive'],
},
}
const result = resolveConfig([userConfig, defaultConfig])
expect(result).toEqual({
prefix: '-',
important: false,
separator: ':',
theme: {
fonts: {
sans: ['Comic Sans'],
serif: ['Constantia', 'Georgia', 'serif'],
mono: ['Menlo', 'Courier New', 'monospace'],
},
},
variants: {
fonts: ['responsive'],
},
})
})

27
src/util/resolveConfig.js
View File

@ -1,19 +1,36 @@
import _ from 'lodash'
import mergeWith from 'lodash/mergeWith'
import isFunction from 'lodash/isFunction'
import defaults from 'lodash/defaults'
import map from 'lodash/map'
function resolveFunctionKeys(object) {
return Object.keys(object).reduce((resolved, key) => {
return {
...resolved,
[key]: _.isFunction(object[key]) ? object[key](object) : object[key],
[key]: isFunction(object[key]) ? object[key](object) : object[key],
}
}, {})
}
function mergeExtensions({ extend, ...theme }) {
return mergeWith({}, theme, extend, (_, extensions, key) => {
return isFunction(theme[key])
? mergedTheme => ({
...theme[key](mergedTheme),
...extensions,
})
: {
...theme[key],
...extensions,
}
})
}
export default function(configs) {
return _.defaults(
return defaults(
{
theme: resolveFunctionKeys(_.defaults(..._.map(configs, 'theme'))),
variants: _.defaults(..._.map(configs, 'variants')),
theme: resolveFunctionKeys(mergeExtensions(defaults(...map(configs, 'theme')))),
variants: defaults(...map(configs, 'variants')),
},
...configs
)