Add experimental default line heights

adamwathan · adamwathan · commit fecbae411119 · 2020-08-07T13:43:43.000-04:00
diff --git 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 {
@@ -32984,42 +32994,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 {
@@ -58006,42 +58026,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 {
@@ -83028,42 +83058,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 {
@@ -108050,42 +108090,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
@@ -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
@@ -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
@@ -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
 }
 

Original file line number	Diff line number	Diff line change
`@@ -7919,42 +7919,52 @@ video {`
`7919`	`7919`
`7920`	`7920`	`.text-xs {`
`7921`	`7921`	`font-size: 0.75rem;`
	`7922`	`+ line-height: 1rem;`
`7922`	`7923`	`}`
`7923`	`7924`
`7924`	`7925`	`.text-sm {`
`7925`	`7926`	`font-size: 0.875rem;`
	`7927`	`+ line-height: 1.25rem;`
`7926`	`7928`	`}`
`7927`	`7929`
`7928`	`7930`	`.text-base {`
`7929`	`7931`	`font-size: 1rem;`
	`7932`	`+ line-height: 1.5rem;`
`7930`	`7933`	`}`
`7931`	`7934`
`7932`	`7935`	`.text-lg {`
`7933`	`7936`	`font-size: 1.125rem;`
	`7937`	`+ line-height: 1.75rem;`
`7934`	`7938`	`}`
`7935`	`7939`
`7936`	`7940`	`.text-xl {`
`7937`	`7941`	`font-size: 1.25rem;`
	`7942`	`+ line-height: 1.75rem;`
`7938`	`7943`	`}`
`7939`	`7944`
`7940`	`7945`	`.text-2xl {`
`7941`	`7946`	`font-size: 1.5rem;`
	`7947`	`+ line-height: 2rem;`
`7942`	`7948`	`}`
`7943`	`7949`
`7944`	`7950`	`.text-3xl {`
`7945`	`7951`	`font-size: 1.875rem;`
	`7952`	`+ line-height: 2.25rem;`
`7946`	`7953`	`}`
`7947`	`7954`
`7948`	`7955`	`.text-4xl {`
`7949`	`7956`	`font-size: 2.25rem;`
	`7957`	`+ line-height: 2.5rem;`
`7950`	`7958`	`}`
`7951`	`7959`
`7952`	`7960`	`.text-5xl {`
`7953`	`7961`	`font-size: 3rem;`
	`7962`	`+ line-height: 1;`
`7954`	`7963`	`}`
`7955`	`7964`
`7956`	`7965`	`.text-6xl {`
`7957`	`7966`	`font-size: 4rem;`
	`7967`	`+ line-height: 1;`
`7958`	`7968`	`}`
`7959`	`7969`
`7960`	`7970`	`.leading-3 {`
`@@ -32984,42 +32994,52 @@ video {`
`32984`	`32994`
`32985`	`32995`	`.sm\:text-xs {`
`32986`	`32996`	`font-size: 0.75rem;`
	`32997`	`+ line-height: 1rem;`
`32987`	`32998`	`}`
`32988`	`32999`
`32989`	`33000`	`.sm\:text-sm {`
`32990`	`33001`	`font-size: 0.875rem;`
	`33002`	`+ line-height: 1.25rem;`
`32991`	`33003`	`}`
`32992`	`33004`
`32993`	`33005`	`.sm\:text-base {`
`32994`	`33006`	`font-size: 1rem;`
	`33007`	`+ line-height: 1.5rem;`
`32995`	`33008`	`}`
`32996`	`33009`
`32997`	`33010`	`.sm\:text-lg {`
`32998`	`33011`	`font-size: 1.125rem;`
	`33012`	`+ line-height: 1.75rem;`
`32999`	`33013`	`}`
`33000`	`33014`
`33001`	`33015`	`.sm\:text-xl {`
`33002`	`33016`	`font-size: 1.25rem;`
	`33017`	`+ line-height: 1.75rem;`
`33003`	`33018`	`}`
`33004`	`33019`
`33005`	`33020`	`.sm\:text-2xl {`
`33006`	`33021`	`font-size: 1.5rem;`
	`33022`	`+ line-height: 2rem;`
`33007`	`33023`	`}`
`33008`	`33024`
`33009`	`33025`	`.sm\:text-3xl {`
`33010`	`33026`	`font-size: 1.875rem;`
	`33027`	`+ line-height: 2.25rem;`
`33011`	`33028`	`}`
`33012`	`33029`
`33013`	`33030`	`.sm\:text-4xl {`
`33014`	`33031`	`font-size: 2.25rem;`
	`33032`	`+ line-height: 2.5rem;`
`33015`	`33033`	`}`
`33016`	`33034`
`33017`	`33035`	`.sm\:text-5xl {`
`33018`	`33036`	`font-size: 3rem;`
	`33037`	`+ line-height: 1;`
`33019`	`33038`	`}`
`33020`	`33039`
`33021`	`33040`	`.sm\:text-6xl {`
`33022`	`33041`	`font-size: 4rem;`
	`33042`	`+ line-height: 1;`
`33023`	`33043`	`}`
`33024`	`33044`
`33025`	`33045`	`.sm\:leading-3 {`
`@@ -58006,42 +58026,52 @@ video {`
`58006`	`58026`
`58007`	`58027`	`.md\:text-xs {`
`58008`	`58028`	`font-size: 0.75rem;`
	`58029`	`+ line-height: 1rem;`
`58009`	`58030`	`}`
`58010`	`58031`
`58011`	`58032`	`.md\:text-sm {`
`58012`	`58033`	`font-size: 0.875rem;`
	`58034`	`+ line-height: 1.25rem;`
`58013`	`58035`	`}`
`58014`	`58036`
`58015`	`58037`	`.md\:text-base {`
`58016`	`58038`	`font-size: 1rem;`
	`58039`	`+ line-height: 1.5rem;`
`58017`	`58040`	`}`
`58018`	`58041`
`58019`	`58042`	`.md\:text-lg {`
`58020`	`58043`	`font-size: 1.125rem;`
	`58044`	`+ line-height: 1.75rem;`
`58021`	`58045`	`}`
`58022`	`58046`
`58023`	`58047`	`.md\:text-xl {`
`58024`	`58048`	`font-size: 1.25rem;`
	`58049`	`+ line-height: 1.75rem;`
`58025`	`58050`	`}`
`58026`	`58051`
`58027`	`58052`	`.md\:text-2xl {`
`58028`	`58053`	`font-size: 1.5rem;`
	`58054`	`+ line-height: 2rem;`
`58029`	`58055`	`}`
`58030`	`58056`
`58031`	`58057`	`.md\:text-3xl {`
`58032`	`58058`	`font-size: 1.875rem;`
	`58059`	`+ line-height: 2.25rem;`
`58033`	`58060`	`}`
`58034`	`58061`
`58035`	`58062`	`.md\:text-4xl {`
`58036`	`58063`	`font-size: 2.25rem;`
	`58064`	`+ line-height: 2.5rem;`
`58037`	`58065`	`}`
`58038`	`58066`
`58039`	`58067`	`.md\:text-5xl {`
`58040`	`58068`	`font-size: 3rem;`
	`58069`	`+ line-height: 1;`
`58041`	`58070`	`}`
`58042`	`58071`
`58043`	`58072`	`.md\:text-6xl {`
`58044`	`58073`	`font-size: 4rem;`
	`58074`	`+ line-height: 1;`
`58045`	`58075`	`}`
`58046`	`58076`
`58047`	`58077`	`.md\:leading-3 {`
`@@ -83028,42 +83058,52 @@ video {`
`83028`	`83058`
`83029`	`83059`	`.lg\:text-xs {`
`83030`	`83060`	`font-size: 0.75rem;`
	`83061`	`+ line-height: 1rem;`
`83031`	`83062`	`}`
`83032`	`83063`
`83033`	`83064`	`.lg\:text-sm {`
`83034`	`83065`	`font-size: 0.875rem;`
	`83066`	`+ line-height: 1.25rem;`
`83035`	`83067`	`}`
`83036`	`83068`
`83037`	`83069`	`.lg\:text-base {`
`83038`	`83070`	`font-size: 1rem;`
	`83071`	`+ line-height: 1.5rem;`
`83039`	`83072`	`}`
`83040`	`83073`
`83041`	`83074`	`.lg\:text-lg {`
`83042`	`83075`	`font-size: 1.125rem;`
	`83076`	`+ line-height: 1.75rem;`
`83043`	`83077`	`}`
`83044`	`83078`
`83045`	`83079`	`.lg\:text-xl {`
`83046`	`83080`	`font-size: 1.25rem;`
	`83081`	`+ line-height: 1.75rem;`
`83047`	`83082`	`}`
`83048`	`83083`
`83049`	`83084`	`.lg\:text-2xl {`
`83050`	`83085`	`font-size: 1.5rem;`
	`83086`	`+ line-height: 2rem;`
`83051`	`83087`	`}`
`83052`	`83088`
`83053`	`83089`	`.lg\:text-3xl {`
`83054`	`83090`	`font-size: 1.875rem;`
	`83091`	`+ line-height: 2.25rem;`
`83055`	`83092`	`}`
`83056`	`83093`
`83057`	`83094`	`.lg\:text-4xl {`
`83058`	`83095`	`font-size: 2.25rem;`
	`83096`	`+ line-height: 2.5rem;`
`83059`	`83097`	`}`
`83060`	`83098`
`83061`	`83099`	`.lg\:text-5xl {`
`83062`	`83100`	`font-size: 3rem;`
	`83101`	`+ line-height: 1;`
`83063`	`83102`	`}`
`83064`	`83103`
`83065`	`83104`	`.lg\:text-6xl {`
`83066`	`83105`	`font-size: 4rem;`
	`83106`	`+ line-height: 1;`
`83067`	`83107`	`}`
`83068`	`83108`
`83069`	`83109`	`.lg\:leading-3 {`
`@@ -108050,42 +108090,52 @@ video {`
`108050`	`108090`
`108051`	`108091`	`.xl\:text-xs {`
`108052`	`108092`	`font-size: 0.75rem;`
	`108093`	`+ line-height: 1rem;`
`108053`	`108094`	`}`
`108054`	`108095`
`108055`	`108096`	`.xl\:text-sm {`
`108056`	`108097`	`font-size: 0.875rem;`
	`108098`	`+ line-height: 1.25rem;`
`108057`	`108099`	`}`
`108058`	`108100`
`108059`	`108101`	`.xl\:text-base {`
`108060`	`108102`	`font-size: 1rem;`
	`108103`	`+ line-height: 1.5rem;`
`108061`	`108104`	`}`
`108062`	`108105`
`108063`	`108106`	`.xl\:text-lg {`
`108064`	`108107`	`font-size: 1.125rem;`
	`108108`	`+ line-height: 1.75rem;`
`108065`	`108109`	`}`
`108066`	`108110`
`108067`	`108111`	`.xl\:text-xl {`
`108068`	`108112`	`font-size: 1.25rem;`
	`108113`	`+ line-height: 1.75rem;`
`108069`	`108114`	`}`
`108070`	`108115`
`108071`	`108116`	`.xl\:text-2xl {`
`108072`	`108117`	`font-size: 1.5rem;`
	`108118`	`+ line-height: 2rem;`
`108073`	`108119`	`}`
`108074`	`108120`
`108075`	`108121`	`.xl\:text-3xl {`
`108076`	`108122`	`font-size: 1.875rem;`
	`108123`	`+ line-height: 2.25rem;`
`108077`	`108124`	`}`
`108078`	`108125`
`108079`	`108126`	`.xl\:text-4xl {`
`108080`	`108127`	`font-size: 2.25rem;`
	`108128`	`+ line-height: 2.5rem;`
`108081`	`108129`	`}`
`108082`	`108130`
`108083`	`108131`	`.xl\:text-5xl {`
`108084`	`108132`	`font-size: 3rem;`
	`108133`	`+ line-height: 1;`
`108085`	`108134`	`}`
`108086`	`108135`
`108087`	`108136`	`.xl\:text-6xl {`
`108088`	`108137`	`font-size: 4rem;`
	`108138`	`+ line-height: 1;`
`108089`	`108139`	`}`
`108090`	`108140`
`108091`	`108141`	`.xl\:leading-3 {`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import chalk from 'chalk'`
`3`	`3`
`4`	`4`	`const featureFlags = {`
`5`	`5`	`future: ['removeDeprecatedGapUtilities'],`
`6`		`- experimental: ['uniformColorPalette', 'extendedSpacingScale'],`
	`6`	`+ experimental: ['uniformColorPalette', 'extendedSpacingScale', 'defaultLineHeights'],`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`export function flagEnabled(config, flag) {`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ import { flagEnabled } from './featureFlags'`
`15`	`15`
`16`	`16`	`import uniformColorPalette from './flagged/uniformColorPalette.js'`
`17`	`17`	`import extendedSpacingScale from './flagged/extendedSpacingScale.js'`
	`18`	`+import defaultLineHeights from './flagged/defaultLineHeights.js'`
`18`	`19`
`19`	`20`	`function getDefaultConfigs(config) {`
`20`	`21`	`const configs = [defaultConfig]`
`@@ -27,6 +28,10 @@ function getDefaultConfigs(config) {`
`27`	`28`	`configs.unshift(extendedSpacingScale)`
`28`	`29`	`}`
`29`	`30`
	`31`	`+ if (flagEnabled(config, 'defaultLineHeights')) {`
	`32`	`+ configs.unshift(defaultLineHeights)`
	`33`	`+ }`
	`34`	`+`
`30`	`35`	`return configs`
`31`	`36`	`}`
`32`	`37`