Fix font size theme bug

__tests__/fixtures/tailwind-output-flagged.css

@@ -25573,32 +25573,19 @@ video {
 }
 
 @keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
   to {
     transform: rotate(360deg);
   }
 }
 
 @keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
   75%, 100% {
     transform: scale(2);
     opacity: 0;
   }
 }
 
 @keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-
   50% {
     opacity: .5;
   }
@@ -25611,7 +25598,7 @@ video {
   }
 
   50% {
-    transform: translateY(0);
+    transform: none;
     animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }

__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)
         })
       },
     },