Merge pull request #2144 from tailwindlabs/fix-font-size-theme-bug

Fix font size theme bug

__tests__/themeFunction.test.js

@@ -109,3 +109,48 @@ test('an unquoted list is valid as a default value', () => {
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('array values are joined by default', () => {
+  const input = `
+    .heading { font-family: theme('fontFamily.sans'); }
+  `
+
+  const output = `
+    .heading { font-family: Inter, Helvetica, sans-serif; }
+  `
+
+  return run(input, {
+    theme: {
+      fontFamily: {
+        sans: ['Inter', 'Helvetica', 'sans-serif'],
+      },
+    },
+  }).then(result => {
+    expect(result.css).toEqual(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
+test('font sizes are retrieved without default line-heights or letter-spacing', () => {
+  const input = `
+    .heading-1 { font-size: theme('fontSize.lg'); }
+    .heading-2 { font-size: theme('fontSize.xl'); }
+  `
+
+  const output = `
+    .heading-1 { font-size: 20px; }
+    .heading-2 { font-size: 24px; }
+  `
+
+  return run(input, {
+    theme: {
+      fontSize: {
+        lg: ['20px', '28px'],
+        xl: ['24px', { lineHeight: '32px', letterSpacing: '-0.01em' }],
+      },
+    },
+  }).then(result => {
+    expect(result.css).toEqual(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})

src/lib/evaluateTailwindFunctions.js

@@ -1,12 +1,25 @@
 import _ from 'lodash'
 import functions from 'postcss-functions'
 
+const themeTransforms = {
+  fontSize(value) {
+    return Array.isArray(value) ? value[0] : value
+  },
+}
+
+function defaultTransform(value) {
+  return Array.isArray(value) ? value.join(', ') : value
+}
+
 export default function(config) {
   return functions({
     functions: {
       theme: (path, ...defaultValue) => {
-        return _.thru(_.get(config.theme, _.trim(path, `'"`), defaultValue), value => {
-          return Array.isArray(value) ? value.join(', ') : value
+        const trimmedPath = _.trim(path, `'"`)
+        return _.thru(_.get(config.theme, trimmedPath, defaultValue), value => {
+          const [themeSection] = trimmedPath.split('.')
+
+          return _.get(themeTransforms, themeSection, defaultTransform)(value)
         })
       },
     },