Fix theme(fontFamily.*) when family contains fontFeatureSettings config (#9217)

Author: bradlc

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',

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 {