Merge pull request #2143 from tailwindlabs/default-line-heights

adamwathan · web-flow · commit cfb9996edfe4 · 2020-08-07T14:54:34.000-04:00
Add experimental default line heights
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 {
@@ -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
@@ -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 {`
`@@ -32971,42 +32981,52 @@ video {`
`32971`	`32981`
`32972`	`32982`	`.sm\:text-xs {`
`32973`	`32983`	`font-size: 0.75rem;`
	`32984`	`+ line-height: 1rem;`
`32974`	`32985`	`}`
`32975`	`32986`
`32976`	`32987`	`.sm\:text-sm {`
`32977`	`32988`	`font-size: 0.875rem;`
	`32989`	`+ line-height: 1.25rem;`
`32978`	`32990`	`}`
`32979`	`32991`
`32980`	`32992`	`.sm\:text-base {`
`32981`	`32993`	`font-size: 1rem;`
	`32994`	`+ line-height: 1.5rem;`
`32982`	`32995`	`}`
`32983`	`32996`
`32984`	`32997`	`.sm\:text-lg {`
`32985`	`32998`	`font-size: 1.125rem;`
	`32999`	`+ line-height: 1.75rem;`
`32986`	`33000`	`}`
`32987`	`33001`
`32988`	`33002`	`.sm\:text-xl {`
`32989`	`33003`	`font-size: 1.25rem;`
	`33004`	`+ line-height: 1.75rem;`
`32990`	`33005`	`}`
`32991`	`33006`
`32992`	`33007`	`.sm\:text-2xl {`
`32993`	`33008`	`font-size: 1.5rem;`
	`33009`	`+ line-height: 2rem;`
`32994`	`33010`	`}`
`32995`	`33011`
`32996`	`33012`	`.sm\:text-3xl {`
`32997`	`33013`	`font-size: 1.875rem;`
	`33014`	`+ line-height: 2.25rem;`
`32998`	`33015`	`}`
`32999`	`33016`
`33000`	`33017`	`.sm\:text-4xl {`
`33001`	`33018`	`font-size: 2.25rem;`
	`33019`	`+ line-height: 2.5rem;`
`33002`	`33020`	`}`
`33003`	`33021`
`33004`	`33022`	`.sm\:text-5xl {`
`33005`	`33023`	`font-size: 3rem;`
	`33024`	`+ line-height: 1;`
`33006`	`33025`	`}`
`33007`	`33026`
`33008`	`33027`	`.sm\:text-6xl {`
`33009`	`33028`	`font-size: 4rem;`
	`33029`	`+ line-height: 1;`
`33010`	`33030`	`}`
`33011`	`33031`
`33012`	`33032`	`.sm\:leading-3 {`
`@@ -57993,42 +58013,52 @@ video {`
`57993`	`58013`
`57994`	`58014`	`.md\:text-xs {`
`57995`	`58015`	`font-size: 0.75rem;`
	`58016`	`+ line-height: 1rem;`
`57996`	`58017`	`}`
`57997`	`58018`
`57998`	`58019`	`.md\:text-sm {`
`57999`	`58020`	`font-size: 0.875rem;`
	`58021`	`+ line-height: 1.25rem;`
`58000`	`58022`	`}`
`58001`	`58023`
`58002`	`58024`	`.md\:text-base {`
`58003`	`58025`	`font-size: 1rem;`
	`58026`	`+ line-height: 1.5rem;`
`58004`	`58027`	`}`
`58005`	`58028`
`58006`	`58029`	`.md\:text-lg {`
`58007`	`58030`	`font-size: 1.125rem;`
	`58031`	`+ line-height: 1.75rem;`
`58008`	`58032`	`}`
`58009`	`58033`
`58010`	`58034`	`.md\:text-xl {`
`58011`	`58035`	`font-size: 1.25rem;`
	`58036`	`+ line-height: 1.75rem;`
`58012`	`58037`	`}`
`58013`	`58038`
`58014`	`58039`	`.md\:text-2xl {`
`58015`	`58040`	`font-size: 1.5rem;`
	`58041`	`+ line-height: 2rem;`
`58016`	`58042`	`}`
`58017`	`58043`
`58018`	`58044`	`.md\:text-3xl {`
`58019`	`58045`	`font-size: 1.875rem;`
	`58046`	`+ line-height: 2.25rem;`
`58020`	`58047`	`}`
`58021`	`58048`
`58022`	`58049`	`.md\:text-4xl {`
`58023`	`58050`	`font-size: 2.25rem;`
	`58051`	`+ line-height: 2.5rem;`
`58024`	`58052`	`}`
`58025`	`58053`
`58026`	`58054`	`.md\:text-5xl {`
`58027`	`58055`	`font-size: 3rem;`
	`58056`	`+ line-height: 1;`
`58028`	`58057`	`}`
`58029`	`58058`
`58030`	`58059`	`.md\:text-6xl {`
`58031`	`58060`	`font-size: 4rem;`
	`58061`	`+ line-height: 1;`
`58032`	`58062`	`}`
`58033`	`58063`
`58034`	`58064`	`.md\:leading-3 {`
`@@ -83015,42 +83045,52 @@ video {`
`83015`	`83045`
`83016`	`83046`	`.lg\:text-xs {`
`83017`	`83047`	`font-size: 0.75rem;`
	`83048`	`+ line-height: 1rem;`
`83018`	`83049`	`}`
`83019`	`83050`
`83020`	`83051`	`.lg\:text-sm {`
`83021`	`83052`	`font-size: 0.875rem;`
	`83053`	`+ line-height: 1.25rem;`
`83022`	`83054`	`}`
`83023`	`83055`
`83024`	`83056`	`.lg\:text-base {`
`83025`	`83057`	`font-size: 1rem;`
	`83058`	`+ line-height: 1.5rem;`
`83026`	`83059`	`}`
`83027`	`83060`
`83028`	`83061`	`.lg\:text-lg {`
`83029`	`83062`	`font-size: 1.125rem;`
	`83063`	`+ line-height: 1.75rem;`
`83030`	`83064`	`}`
`83031`	`83065`
`83032`	`83066`	`.lg\:text-xl {`
`83033`	`83067`	`font-size: 1.25rem;`
	`83068`	`+ line-height: 1.75rem;`
`83034`	`83069`	`}`
`83035`	`83070`
`83036`	`83071`	`.lg\:text-2xl {`
`83037`	`83072`	`font-size: 1.5rem;`
	`83073`	`+ line-height: 2rem;`
`83038`	`83074`	`}`
`83039`	`83075`
`83040`	`83076`	`.lg\:text-3xl {`
`83041`	`83077`	`font-size: 1.875rem;`
	`83078`	`+ line-height: 2.25rem;`
`83042`	`83079`	`}`
`83043`	`83080`
`83044`	`83081`	`.lg\:text-4xl {`
`83045`	`83082`	`font-size: 2.25rem;`
	`83083`	`+ line-height: 2.5rem;`
`83046`	`83084`	`}`
`83047`	`83085`
`83048`	`83086`	`.lg\:text-5xl {`
`83049`	`83087`	`font-size: 3rem;`
	`83088`	`+ line-height: 1;`
`83050`	`83089`	`}`
`83051`	`83090`
`83052`	`83091`	`.lg\:text-6xl {`
`83053`	`83092`	`font-size: 4rem;`
	`83093`	`+ line-height: 1;`
`83054`	`83094`	`}`
`83055`	`83095`
`83056`	`83096`	`.lg\:leading-3 {`
`@@ -108037,42 +108077,52 @@ video {`
`108037`	`108077`
`108038`	`108078`	`.xl\:text-xs {`
`108039`	`108079`	`font-size: 0.75rem;`
	`108080`	`+ line-height: 1rem;`
`108040`	`108081`	`}`
`108041`	`108082`
`108042`	`108083`	`.xl\:text-sm {`
`108043`	`108084`	`font-size: 0.875rem;`
	`108085`	`+ line-height: 1.25rem;`
`108044`	`108086`	`}`
`108045`	`108087`
`108046`	`108088`	`.xl\:text-base {`
`108047`	`108089`	`font-size: 1rem;`
	`108090`	`+ line-height: 1.5rem;`
`108048`	`108091`	`}`
`108049`	`108092`
`108050`	`108093`	`.xl\:text-lg {`
`108051`	`108094`	`font-size: 1.125rem;`
	`108095`	`+ line-height: 1.75rem;`
`108052`	`108096`	`}`
`108053`	`108097`
`108054`	`108098`	`.xl\:text-xl {`
`108055`	`108099`	`font-size: 1.25rem;`
	`108100`	`+ line-height: 1.75rem;`
`108056`	`108101`	`}`
`108057`	`108102`
`108058`	`108103`	`.xl\:text-2xl {`
`108059`	`108104`	`font-size: 1.5rem;`
	`108105`	`+ line-height: 2rem;`
`108060`	`108106`	`}`
`108061`	`108107`
`108062`	`108108`	`.xl\:text-3xl {`
`108063`	`108109`	`font-size: 1.875rem;`
	`108110`	`+ line-height: 2.25rem;`
`108064`	`108111`	`}`
`108065`	`108112`
`108066`	`108113`	`.xl\:text-4xl {`
`108067`	`108114`	`font-size: 2.25rem;`
	`108115`	`+ line-height: 2.5rem;`
`108068`	`108116`	`}`
`108069`	`108117`
`108070`	`108118`	`.xl\:text-5xl {`
`108071`	`108119`	`font-size: 3rem;`
	`108120`	`+ line-height: 1;`
`108072`	`108121`	`}`
`108073`	`108122`
`108074`	`108123`	`.xl\:text-6xl {`
`108075`	`108124`	`font-size: 4rem;`
	`108125`	`+ line-height: 1;`
`108076`	`108126`	`}`
`108077`	`108127`
`108078`	`108128`	`.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`