diff --git a/src/util/transformThemeValue.js b/src/util/transformThemeValue.js index 30bd99cad..246961229 100644 --- a/src/util/transformThemeValue.js +++ b/src/util/transformThemeValue.js @@ -1,4 +1,5 @@ import postcss from 'postcss' +import isPlainObject from './isPlainObject' export default function transformThemeValue(themeSection) { if (['fontSize', 'outline'].includes(themeSection)) { @@ -10,9 +11,16 @@ export default function transformThemeValue(themeSection) { } } + if (themeSection === 'fontFamily') { + return (value) => { + if (typeof value === 'function') value = value({}) + let families = Array.isArray(value) && isPlainObject(value[1]) ? value[0] : value + return Array.isArray(families) ? families.join(', ') : families + } + } + if ( [ - 'fontFamily', 'boxShadow', 'transitionProperty', 'transitionDuration', diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js index b7e630a20..0214ba113 100644 --- a/tests/evaluateTailwindFunctions.test.js +++ b/tests/evaluateTailwindFunctions.test.js @@ -610,6 +610,45 @@ test('font-family values are joined when an array', () => { }) }) +test('font-family values are retrieved without font-feature-settings', () => { + let input = css` + .heading-1 { + font-family: theme('fontFamily.sans'); + } + .heading-2 { + font-family: theme('fontFamily.serif'); + } + .heading-3 { + font-family: theme('fontFamily.mono'); + } + ` + + let output = css` + .heading-1 { + font-family: Inter; + } + .heading-2 { + font-family: Times, serif; + } + .heading-3 { + font-family: Menlo, monospace; + } + ` + + return run(input, { + theme: { + fontFamily: { + sans: ['Inter', { fontFeatureSettings: '"cv11"' }], + serif: [['Times', 'serif'], { fontFeatureSettings: '"cv11"' }], + mono: ['Menlo, monospace', { fontFeatureSettings: '"cv11"' }], + }, + }, + }).then((result) => { + expect(result.css).toMatchCss(output) + expect(result.warnings().length).toBe(0) + }) +}) + test('box-shadow values are joined when an array', () => { let input = css` .element {