Add support for [fontSize, lineHeight] tuples (fix #19)

Author: benface

CHANGELOG.md

@@ -5,11 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [3.1.0] - 2020-05-09
 
 ### Added
 - Added `line-[style]` and `line-[color]` utilities to go with Tailwind’s text decoration utilities (`underline` and `line-through`); they can be customized with the `textDecorationStyle` and `textDecorationColor` theme keys
 
+### Fixed
+- Fixed an issue when using a font size that includes a default line height in a text style (e.g. `['16px', '24px']`), which is supported since Tailwind 1.3
+
 ## [3.0.1] - 2020-02-13
 
 ### Fixed
@@ -96,7 +99,8 @@ and this project mostly adheres to [Semantic Versioning](https://semver.org/spec
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v3.0.1...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v3.1.0...HEAD
+[3.1.0]: https://github.com/benface/tailwindcss-typography/compare/v3.0.1...v3.1.0
 [3.0.1]: https://github.com/benface/tailwindcss-typography/compare/v3.0.0...v3.0.1
 [3.0.0]: https://github.com/benface/tailwindcss-typography/compare/v2.2.0...v3.0.0
 [2.2.0]: https://github.com/benface/tailwindcss-typography/compare/v2.1.1...v2.2.0

index.js

@@ -192,29 +192,58 @@ module.exports = plugin.withOptions(function(options = {}) {
 
     const textStylesTheme = theme('textStyles');
 
-    const resolveTextStyle = function(styles) {
-      if (!_.isPlainObject(styles)) {
-        return _.isArray(styles) ? styles.join(', ') : styles;
-      }
-      return _.transform(styles, function(result, value, key) {
-        if (key === 'extends') {
-          _.forEach(_.castArray(value), function(textStyleToExtend) {
-            _.forEach(resolveTextStyle(textStylesTheme[textStyleToExtend]), function(extendedValue, extendedKey) {
-              if (extendedKey === 'output') {
-                return; // continue
-              }
-              result[extendedKey] = resolveTextStyle(extendedValue);
+    const resolveTextStyle = function(name, styles, topLevel = false) {
+      if (_.isPlainObject(styles)) {
+        const resolvedStyles = _.reduce(styles, function(result, value, key) {
+          if (key === 'extends') {
+            _.forEach(_.castArray(value), function(textStyleToExtend) {
+              _.forEach(resolveTextStyle(textStyleToExtend, textStylesTheme[textStyleToExtend], true), function(extendedValue, extendedKey) {
+                if (extendedKey === 'output') {
+                  return; // continue
+                }
+                result = {
+                  ...result,
+                  ...resolveTextStyle(extendedKey, extendedValue),
+                };
+              });
             });
-          });
-          return;
+            return result;
+          }
+          return {
+            ...result,
+            ...resolveTextStyle(key, value),
+          };
+        }, {});
+
+        if (topLevel) {
+          return resolvedStyles;
         }
-        result[key] = resolveTextStyle(value);
-      });
+
+        return {
+          [name]: resolvedStyles,
+        };
+      }
+
+      if (_.isArray(styles)) {
+        if (name === 'fontSize' && styles.length === 2) {
+          return {
+            fontSize: styles[0],
+            lineHeight: styles[1],
+          };
+        }
+        return {
+          [name]: styles.join(', '),
+        };
+      }
+
+      return {
+        [name]: styles,
+      };
     };
 
     const textStyles = _.fromPairs(
       _.map(textStylesTheme, (componentStyles, componentName) => {
-        componentStyles = resolveTextStyle(componentStyles);
+        componentStyles = resolveTextStyle(componentName, componentStyles, true);
         if (componentStyles.output === false) {
           return [];
         }

test.js

@@ -901,7 +901,7 @@ test('text styles can extend more than one other text style', () => {
     theme: {
       fontFamily: {
         'default': 'sans-serif',
-        'heading': ['Helvetica', 'Arial', 'sans-serif'],
+        'heading': 'Helvetica',
       },
       fontWeight: {
         'bold': '700',
@@ -956,29 +956,116 @@ test('text styles can extend more than one other text style', () => {
   }).then(css => {
     expect(css).toMatchCss(`
       .c-heading {
-        font-family: Helvetica, Arial, sans-serif;
+        font-family: Helvetica;
         font-weight: 700;
       }
       .c-large-heading {
         font-weight: 800;
         line-height: 1.25;
       }
       .c-h1 {
-        font-family: Helvetica, Arial, sans-serif;
+        font-family: Helvetica;
         font-weight: 800;
         line-height: 1.25;
         font-size: 64px;
       }
       .c-h2 {
-        font-family: Helvetica, Arial, sans-serif;
+        font-family: Helvetica;
         font-weight: 800;
         line-height: 1.25;
         font-size: 48px;
       }
+      .c-h3 {
+        font-family: Helvetica;
+        font-weight: 700;
+        font-size: 36px;
+      }
+    `);
+  });
+});
+
+test('text styles support arrays in fontFamily and fontSize properties', () => {
+  return generatePluginCss({
+    theme: {
+      fontFamily: {
+        'default': 'sans-serif',
+        'heading': ['Helvetica', 'Arial', 'sans-serif'],
+      },
+      fontWeight: {
+        'bold': '700',
+        'extrabold': '800',
+      },
+      fontSize: {
+        'heading-xs': ['24px', '36px'],
+        'heading-sm': ['30px', '45px'],
+        'heading': ['36px', '54px'],
+        'heading-lg': ['48px', '72px'],
+        'heading-xl': ['64px', '96px'],
+      },
+      lineHeight: {
+        'none': '1',
+        'tight': '1.25',
+        'normal': '1.5',
+      },
+      textStyles: theme => ({
+        heading: {
+          fontFamily: theme('fontFamily.heading'),
+          fontWeight: theme('fontWeight.bold'),
+        },
+        largeHeading: {
+          fontWeight: theme('fontWeight.extrabold'),
+        },
+        h1: {
+          extends: ['heading', 'largeHeading'],
+          fontSize: theme('fontSize.heading-xl'),
+        },
+        h2: {
+          extends: ['heading', 'largeHeading'],
+          fontSize: theme('fontSize.heading-lg'),
+        },
+        h3: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading'),
+        },
+      }),
+      textDecorationStyle: {},
+      textDecorationColor: {},
+      fontVariantCaps: {},
+      fontVariantNumeric: {},
+      fontVariantLigatures: {},
+      textRendering: {},
+    },
+  }, {
+    ellipsis: false,
+    hyphens: false,
+    kerning: false,
+    textUnset: false,
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .c-heading {
+        font-family: Helvetica, Arial, sans-serif;
+        font-weight: 700;
+      }
+      .c-large-heading {
+        font-weight: 800;
+      }
+      .c-h1 {
+        font-family: Helvetica, Arial, sans-serif;
+        font-weight: 800;
+        font-size: 64px;
+        line-height: 96px;
+      }
+      .c-h2 {
+        font-family: Helvetica, Arial, sans-serif;
+        font-weight: 800;
+        font-size: 48px;
+        line-height: 72px;
+      }
       .c-h3 {
         font-family: Helvetica, Arial, sans-serif;
         font-weight: 700;
         font-size: 36px;
+        line-height: 54px;
       }
     `);
   });