Repository: tailwindlabs/tailwindcss
Pull request #2144 (2020-08-07 18:34:39)

Fix font size theme bug
This PR fixes an issue where `theme('fontSize.xl')` and similar would no longer work as expected after introducing a default line-height into your config.

It fixes it by adding support for theme-key-specific "transforms" when resolving the theme value. Unfortunately this means only core plugins get to benefit from this flexibility. We can likely add a plugin API in the future that lets plugin authors register their own transform function here though.


Patch:
diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js
index 5f03bb95..80333456 100644
--- a/src/lib/evaluateTailwindFunctions.js
+++ b/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)
         })
       },
     },


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index d5fec54f..eebf3982 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -25573,21 +25573,12 @@ 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;
@@ -25595,10 +25586,6 @@ video {
 }
 
 @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);
   }
 }
diff --git a/__tests__/themeFunction.test.js b/__tests__/themeFunction.test.js
index 6b777da8..d795a44d 100644
--- a/__tests__/themeFunction.test.js
+++ b/__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)
+  })
+})