From 4d2e4119fd174a37350b052c0408180596435100 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 7 Aug 2020 13:43:43 -0400
Subject: [PATCH] Add experimental default line heights

---
 .../fixtures/tailwind-output-flagged.css      | 50 +++++++++++++++++++
 src/featureFlags.js                           |  2 +-
 src/flagged/defaultLineHeights.js             | 16 ++++++
 src/index.js                                  |  5 ++
 4 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/flagged/defaultLineHeights.js

diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index eebf3982a..e2add5b7e 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -7919,42 +7919,52 @@ video {
 
 .text-xs {
   font-size: 0.75rem;
+  line-height: 1rem;
 }
 
 .text-sm {
   font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .text-base {
   font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .text-lg {
   font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 
 .text-xl {
   font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 
 .text-2xl {
   font-size: 1.5rem;
+  line-height: 2rem;
 }
 
 .text-3xl {
   font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .text-4xl {
   font-size: 2.25rem;
+  line-height: 2.5rem;
 }
 
 .text-5xl {
   font-size: 3rem;
+  line-height: 1;
 }
 
 .text-6xl {
   font-size: 4rem;
+  line-height: 1;
 }
 
 .leading-3 {
@@ -32971,42 +32981,52 @@ video {
 
   .sm\:text-xs {
     font-size: 0.75rem;
+    line-height: 1rem;
   }
 
   .sm\:text-sm {
     font-size: 0.875rem;
+    line-height: 1.25rem;
   }
 
   .sm\:text-base {
     font-size: 1rem;
+    line-height: 1.5rem;
   }
 
   .sm\:text-lg {
     font-size: 1.125rem;
+    line-height: 1.75rem;
   }
 
   .sm\:text-xl {
     font-size: 1.25rem;
+    line-height: 1.75rem;
   }
 
   .sm\:text-2xl {
     font-size: 1.5rem;
+    line-height: 2rem;
   }
 
   .sm\:text-3xl {
     font-size: 1.875rem;
+    line-height: 2.25rem;
   }
 
   .sm\:text-4xl {
     font-size: 2.25rem;
+    line-height: 2.5rem;
   }
 
   .sm\:text-5xl {
     font-size: 3rem;
+    line-height: 1;
   }
 
   .sm\:text-6xl {
     font-size: 4rem;
+    line-height: 1;
   }
 
   .sm\:leading-3 {
@@ -57993,42 +58013,52 @@ video {
 
   .md\:text-xs {
     font-size: 0.75rem;
+    line-height: 1rem;
   }
 
   .md\:text-sm {
     font-size: 0.875rem;
+    line-height: 1.25rem;
   }
 
   .md\:text-base {
     font-size: 1rem;
+    line-height: 1.5rem;
   }
 
   .md\:text-lg {
     font-size: 1.125rem;
+    line-height: 1.75rem;
   }
 
   .md\:text-xl {
     font-size: 1.25rem;
+    line-height: 1.75rem;
   }
 
   .md\:text-2xl {
     font-size: 1.5rem;
+    line-height: 2rem;
   }
 
   .md\:text-3xl {
     font-size: 1.875rem;
+    line-height: 2.25rem;
   }
 
   .md\:text-4xl {
     font-size: 2.25rem;
+    line-height: 2.5rem;
   }
 
   .md\:text-5xl {
     font-size: 3rem;
+    line-height: 1;
   }
 
   .md\:text-6xl {
     font-size: 4rem;
+    line-height: 1;
   }
 
   .md\:leading-3 {
@@ -83015,42 +83045,52 @@ video {
 
   .lg\:text-xs {
     font-size: 0.75rem;
+    line-height: 1rem;
   }
 
   .lg\:text-sm {
     font-size: 0.875rem;
+    line-height: 1.25rem;
   }
 
   .lg\:text-base {
     font-size: 1rem;
+    line-height: 1.5rem;
   }
 
   .lg\:text-lg {
     font-size: 1.125rem;
+    line-height: 1.75rem;
   }
 
   .lg\:text-xl {
     font-size: 1.25rem;
+    line-height: 1.75rem;
   }
 
   .lg\:text-2xl {
     font-size: 1.5rem;
+    line-height: 2rem;
   }
 
   .lg\:text-3xl {
     font-size: 1.875rem;
+    line-height: 2.25rem;
   }
 
   .lg\:text-4xl {
     font-size: 2.25rem;
+    line-height: 2.5rem;
   }
 
   .lg\:text-5xl {
     font-size: 3rem;
+    line-height: 1;
   }
 
   .lg\:text-6xl {
     font-size: 4rem;
+    line-height: 1;
   }
 
   .lg\:leading-3 {
@@ -108037,42 +108077,52 @@ video {
 
   .xl\:text-xs {
     font-size: 0.75rem;
+    line-height: 1rem;
   }
 
   .xl\:text-sm {
     font-size: 0.875rem;
+    line-height: 1.25rem;
   }
 
   .xl\:text-base {
     font-size: 1rem;
+    line-height: 1.5rem;
   }
 
   .xl\:text-lg {
     font-size: 1.125rem;
+    line-height: 1.75rem;
   }
 
   .xl\:text-xl {
     font-size: 1.25rem;
+    line-height: 1.75rem;
   }
 
   .xl\:text-2xl {
     font-size: 1.5rem;
+    line-height: 2rem;
   }
 
   .xl\:text-3xl {
     font-size: 1.875rem;
+    line-height: 2.25rem;
   }
 
   .xl\:text-4xl {
     font-size: 2.25rem;
+    line-height: 2.5rem;
   }
 
   .xl\:text-5xl {
     font-size: 3rem;
+    line-height: 1;
   }
 
   .xl\:text-6xl {
     font-size: 4rem;
+    line-height: 1;
   }
 
   .xl\:leading-3 {
diff --git a/src/featureFlags.js b/src/featureFlags.js
index be15d0711..860a36fcf 100644
--- a/src/featureFlags.js
+++ b/src/featureFlags.js
@@ -3,7 +3,7 @@ import chalk from 'chalk'
 
 const featureFlags = {
   future: ['removeDeprecatedGapUtilities'],
-  experimental: ['uniformColorPalette', 'extendedSpacingScale'],
+  experimental: ['uniformColorPalette', 'extendedSpacingScale', 'defaultLineHeights'],
 }
 
 export function flagEnabled(config, flag) {
diff --git a/src/flagged/defaultLineHeights.js b/src/flagged/defaultLineHeights.js
new file mode 100644
index 000000000..1fd9e6660
--- /dev/null
+++ b/src/flagged/defaultLineHeights.js
@@ -0,0 +1,16 @@
+export default {
+  theme: {
+    fontSize: {
+      xs: ['0.75rem', { lineHeight: '1rem' }],
+      sm: ['0.875rem', { lineHeight: '1.25rem' }],
+      base: ['1rem', { lineHeight: '1.5rem' }],
+      lg: ['1.125rem', { lineHeight: '1.75rem' }],
+      xl: ['1.25rem', { lineHeight: '1.75rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+      '5xl': ['3rem', { lineHeight: '1' }],
+      '6xl': ['4rem', { lineHeight: '1' }],
+    },
+  },
+}
diff --git a/src/index.js b/src/index.js
index 78d96277e..a3a70f989 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,6 +15,7 @@ import { flagEnabled } from './featureFlags'
 
 import uniformColorPalette from './flagged/uniformColorPalette.js'
 import extendedSpacingScale from './flagged/extendedSpacingScale.js'
+import defaultLineHeights from './flagged/defaultLineHeights.js'
 
 function getDefaultConfigs(config) {
   const configs = [defaultConfig]
@@ -27,6 +28,10 @@ function getDefaultConfigs(config) {
     configs.unshift(extendedSpacingScale)
   }
 
+  if (flagEnabled(config, 'defaultLineHeights')) {
+    configs.unshift(defaultLineHeights)
+  }
+
   return configs
 }