tailwindcss/src/util/transformThemeValue.js
Robin Malfait 5058275f3b
Handle color transformations properly with theme(...) for all relevant plugins (#5871)
* call function for colors that are not in colors

* add all color related thingies

* transformThemeValue in a very verbose way

* handle functions by default

* cleanup, make sure we handle functions everywhere

* update changelog

Co-authored-by: Bill Criswell <bill_criswell@comcast.com>
2021-10-25 12:17:14 +02:00

53 lines
1.3 KiB
JavaScript

import postcss from 'postcss'
export default function transformThemeValue(themeSection) {
if (['fontSize', 'outline'].includes(themeSection)) {
return (value) => {
if (typeof value === 'function') value = value({})
if (Array.isArray(value)) value = value[0]
return value
}
}
if (
[
'fontFamily',
'boxShadow',
'transitionProperty',
'transitionDuration',
'transitionDelay',
'transitionTimingFunction',
'backgroundImage',
'backgroundSize',
'backgroundColor',
'cursor',
'animation',
].includes(themeSection)
) {
return (value) => {
if (typeof value === 'function') value = value({})
if (Array.isArray(value)) value = value.join(', ')
return value
}
}
// For backwards compatibility reasons, before we switched to underscores
// instead of commas for arbitrary values.
if (['gridTemplateColumns', 'gridTemplateRows', 'objectPosition'].includes(themeSection)) {
return (value) => {
if (typeof value === 'function') value = value({})
if (typeof value === 'string') value = postcss.list.comma(value).join(' ')
return value
}
}
return (value) => {
if (typeof value === 'function') value = value({})
return value
}
}