Add test coverage for default letter-spacing feature

Author: adamwathan

__tests__/plugins/fontSize.test.js

@@ -28,3 +28,59 @@ test('font-size utilities can include a default line-height', () => {
     ],
   ])
 })
+
+test('font-size utilities can include a default letter-spacing', () => {
+  const config = {
+    theme: {
+      fontSize: {
+        sm: '12px',
+        md: ['16px', { letterSpacing: '-0.01em' }],
+        lg: ['20px', { letterSpacing: '-0.02em' }],
+      },
+    },
+    variants: {
+      fontSize: ['responsive'],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.text-sm': { 'font-size': '12px' },
+        '.text-md': { 'font-size': '16px', 'letter-spacing': '-0.01em' },
+        '.text-lg': { 'font-size': '20px', 'letter-spacing': '-0.02em' },
+      },
+      ['responsive'],
+    ],
+  ])
+})
+
+test('font-size utilities can include a default line-height and letter-spacing', () => {
+  const config = {
+    theme: {
+      fontSize: {
+        sm: '12px',
+        md: ['16px', { lineHeight: '24px', letterSpacing: '-0.01em' }],
+        lg: ['20px', { lineHeight: '28px', letterSpacing: '-0.02em' }],
+      },
+    },
+    variants: {
+      fontSize: ['responsive'],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.text-sm': { 'font-size': '12px' },
+        '.text-md': { 'font-size': '16px', 'line-height': '24px', 'letter-spacing': '-0.01em' },
+        '.text-lg': { 'font-size': '20px', 'line-height': '28px', 'letter-spacing': '-0.02em' },
+      },
+      ['responsive'],
+    ],
+  ])
+})

src/plugins/fontSize.js

@@ -5,10 +5,11 @@ export default function() {
     const utilities = _.fromPairs(
       _.map(theme('fontSize'), (value, modifier) => {
         const [fontSize, options] = Array.isArray(value) ? value : [value]
-        // Tailwind 1.3+ syntax allowed line height to be specified in the array like
-        // ['16px', '24px'], so we can get it from there as well as from object syntax
-        const lineHeight = options instanceof Object ? options.lineHeight : options
-        const letterSpacing = options && options.letterSpacing
+        const { lineHeight, letterSpacing } = _.isPlainObject(options)
+          ? options
+          : {
+              lineHeight: options,
+            }
 
         return [
           `.${e(`text-${modifier}`)}`,