Switch to line height functions

tailwindlabs · Sep 4, 2024 · 84f2663 · 84f2663
1 parent dcfaaac
commit 84f2663
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 96 deletions.
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -350,43 +350,30 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --font-size-xs: .75rem;
-    --font-size-xs--line-height: 1rem;
     --font-size-sm: .875rem;
-    --font-size-sm--line-height: 1.25rem;
     --font-size-base: 1rem;
-    --font-size-base--line-height: 1.5rem;
     --font-size-lg: 1.125rem;
-    --font-size-lg--line-height: 1.75rem;
     --font-size-xl: 1.25rem;
-    --font-size-xl--line-height: 1.75rem;
     --font-size-2xl: 1.5rem;
-    --font-size-2xl--line-height: 2rem;
     --font-size-3xl: 1.875rem;
-    --font-size-3xl--line-height: 2.25rem;
     --font-size-4xl: 2.25rem;
-    --font-size-4xl--line-height: 2.5rem;
     --font-size-5xl: 3rem;
-    --font-size-5xl--line-height: 1;
     --font-size-6xl: 3.75rem;
-    --font-size-6xl--line-height: 1;
     --font-size-7xl: 4.5rem;
-    --font-size-7xl--line-height: 1;
     --font-size-8xl: 6rem;
-    --font-size-8xl--line-height: 1;
     --font-size-9xl: 8rem;
-    --font-size-9xl--line-height: 1;
     --letter-spacing-tighter: -.05em;
     --letter-spacing-tight: -.025em;
     --letter-spacing-normal: 0em;
     --letter-spacing-wide: .025em;
     --letter-spacing-wider: .05em;
     --letter-spacing-widest: .1em;
     --line-height-none: 1;
-    --line-height-tight: 1.25;
-    --line-height-snug: 1.375;
-    --line-height-normal: 1.5;
-    --line-height-relaxed: 1.625;
-    --line-height-loose: 2;
+    --line-height-tight: max(1em, 1.25 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
+    --line-height-snug: max(1em, 1.375 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
+    --line-height-normal: max(1em, 1.5 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
+    --line-height-relaxed: max(1em, 1.625 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
+    --line-height-loose: max(1em, 2 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
     --line-height-3: .75rem;
     --line-height-4: 1rem;
     --line-height-5: 1.25rem;
@@ -423,9 +410,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   html, :host {
+    line-height: var(--line-height-normal, 1.5);
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
-    line-height: 1.5;
     font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     font-feature-settings: var(--default-font-feature-settings, normal);
     font-variation-settings: var(--default-font-variation-settings, normal);
@@ -586,7 +573,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 @layer utilities {
   .text-2xl {
     font-size: var(--font-size-2xl, 1.5rem);
-    line-height: var(--font-size-2xl--line-height, 2rem);
   }
 
   .text-black\\/50 {

diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
@@ -27,7 +27,7 @@
 
 html,
 :host {
-  line-height: 1.5; /* 1 */
+  line-height: var(--line-height-normal, 1.5); /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   tab-size: 4; /* 3 */
   font-family: var(
@@ -140,6 +140,7 @@ pre {
 
 small {
   font-size: 80%;
+  line-height: var(--tw-line-height, var(--line-height-normal, 1.5));
 }
 
 /*

diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -349,43 +349,30 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-size-xs: .75rem;
-  --font-size-xs--line-height: 1rem;
   --font-size-sm: .875rem;
-  --font-size-sm--line-height: 1.25rem;
   --font-size-base: 1rem;
-  --font-size-base--line-height: 1.5rem;
   --font-size-lg: 1.125rem;
-  --font-size-lg--line-height: 1.75rem;
   --font-size-xl: 1.25rem;
-  --font-size-xl--line-height: 1.75rem;
   --font-size-2xl: 1.5rem;
-  --font-size-2xl--line-height: 2rem;
   --font-size-3xl: 1.875rem;
-  --font-size-3xl--line-height: 2.25rem;
   --font-size-4xl: 2.25rem;
-  --font-size-4xl--line-height: 2.5rem;
   --font-size-5xl: 3rem;
-  --font-size-5xl--line-height: 1;
   --font-size-6xl: 3.75rem;
-  --font-size-6xl--line-height: 1;
   --font-size-7xl: 4.5rem;
-  --font-size-7xl--line-height: 1;
   --font-size-8xl: 6rem;
-  --font-size-8xl--line-height: 1;
   --font-size-9xl: 8rem;
-  --font-size-9xl--line-height: 1;
   --letter-spacing-tighter: -.05em;
   --letter-spacing-tight: -.025em;
   --letter-spacing-normal: 0em;
   --letter-spacing-wide: .025em;
   --letter-spacing-wider: .05em;
   --letter-spacing-widest: .1em;
   --line-height-none: 1;
-  --line-height-tight: 1.25;
-  --line-height-snug: 1.375;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.625;
-  --line-height-loose: 2;
+  --line-height-tight: max(1em, 1.25 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
+  --line-height-snug: max(1em, 1.375 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
+  --line-height-normal: max(1em, 1.5 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
+  --line-height-relaxed: max(1em, 1.625 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
+  --line-height-loose: max(1em, 2 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
   --line-height-3: .75rem;
   --line-height-4: 1rem;
   --line-height-5: 1.25rem;

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -13067,15 +13067,18 @@ test('leading', async () => {
     }
 
     .leading-6 {
-      line-height: var(--line-height-6, 1.5rem);
+      --tw-line-height: var(--line-height-6, 1.5rem);
+      line-height: var(--tw-line-height);
     }
 
     .leading-\\[--value\\] {
-      line-height: var(--value);
+      --tw-line-height: var(--value);
+      line-height: var(--tw-line-height);
     }
 
     .leading-none {
-      line-height: var(--line-height-none, 1);
+      --tw-line-height: var(--line-height-none, 1);
+      line-height: var(--tw-line-height);
     }"
   `)
   expect(
@@ -13700,71 +13703,79 @@ test('text', async () => {
       line-height: var(--font-size-sm--line-height, 1.25rem);
     }
 
-    .text-\\[12px\\]\\/6 {
+    .text-\\[12px\\] {
       font-size: 12px;
-      line-height: var(--line-height-6, 1.5rem);
-    }
-
-    .text-\\[50\\%\\]\\/6 {
-      font-size: 50%;
-      line-height: var(--line-height-6, 1.5rem);
-    }
-
-    .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 {
-      font-size: clamp(1rem, var(--size), 3rem);
-      line-height: var(--line-height-9, 2.25rem);
+      line-height: var(--tw-line-height, var(--line-height-normal));
     }
 
-    .text-\\[larger\\]\\/6 {
-      font-size: larger;
-      line-height: var(--line-height-6, 1.5rem);
-    }
-
-    .text-\\[xx-large\\]\\/6 {
-      font-size: xx-large;
-      line-height: var(--line-height-6, 1.5rem);
-    }
-
-    .text-sm\\/6 {
-      font-size: var(--font-size-sm, .875rem);
-      line-height: var(--line-height-6, 1.5rem);
-    }
-
-    .text-sm\\/\\[4px\\] {
-      font-size: var(--font-size-sm, .875rem);
-      line-height: 4px;
-    }
-
-    .text-\\[12px\\] {
+    .text-\\[12px\\]\\/6 {
       font-size: 12px;
+      line-height: var(--tw-line-height, var(--line-height-6, 1.5rem));
     }
 
     .text-\\[50\\%\\] {
       font-size: 50%;
+      line-height: var(--tw-line-height, var(--line-height-normal));
+    }
+
+    .text-\\[50\\%\\]\\/6 {
+      font-size: 50%;
+      line-height: var(--tw-line-height, var(--line-height-6, 1.5rem));
     }
 
     .text-\\[absolute-size\\:--my-size\\] {
       font-size: var(--my-size);
+      line-height: var(--tw-line-height, var(--line-height-normal));
     }
 
     .text-\\[clamp\\(1rem\\,2rem\\,3rem\\)\\] {
       font-size: 2rem;
+      line-height: var(--tw-line-height, var(--line-height-normal));
     }
 
     .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\] {
       font-size: clamp(1rem, var(--size), 3rem);
+      line-height: var(--tw-line-height, var(--line-height-normal));
+    }
+
+    .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 {
+      font-size: clamp(1rem, var(--size), 3rem);
+      line-height: var(--tw-line-height, var(--line-height-9, 2.25rem));
     }
 
     .text-\\[larger\\] {
       font-size: larger;
+      line-height: var(--tw-line-height, var(--line-height-normal));
+    }
+
+    .text-\\[larger\\]\\/6 {
+      font-size: larger;
+      line-height: var(--tw-line-height, var(--line-height-6, 1.5rem));
     }
 
     .text-\\[length\\:--my-size\\], .text-\\[percentage\\:--my-size\\], .text-\\[relative-size\\:--my-size\\] {
       font-size: var(--my-size);
+      line-height: var(--tw-line-height, var(--line-height-normal));
     }
 
     .text-\\[xx-large\\] {
       font-size: xx-large;
+      line-height: var(--tw-line-height, var(--line-height-normal));
+    }
+
+    .text-\\[xx-large\\]\\/6 {
+      font-size: xx-large;
+      line-height: var(--tw-line-height, var(--line-height-6, 1.5rem));
+    }
+
+    .text-sm\\/6 {
+      font-size: var(--font-size-sm, .875rem);
+      line-height: var(--line-height-6, 1.5rem);
+    }
+
+    .text-sm\\/\\[4px\\] {
+      font-size: var(--font-size-sm, .875rem);
+      line-height: 4px;
     }
 
     .text-\\[\\#0088cc\\] {

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -3782,7 +3782,10 @@ export function createUtilities(theme: Theme) {
 
   functionalUtility('leading', {
     themeKeys: ['--line-height'],
-    handle: (value) => [decl('line-height', value)],
+    handle: (value) => [
+      decl('--tw-line-height', value),
+      decl('line-height', 'var(--tw-line-height)'),
+    ],
   })
 
   functionalUtility('tracking', {
@@ -4050,11 +4053,17 @@ export function createUtilities(theme: Theme) {
                 : theme.resolve(candidate.modifier.value, ['--line-height'])
 
             if (modifier) {
-              return [decl('font-size', value), decl('line-height', modifier)]
+              return [
+                decl('font-size', value),
+                decl('line-height', `var(--tw-line-height, ${modifier})`),
+              ]
             }
           }
 
-          return [decl('font-size', value)]
+          return [
+            decl('font-size', value),
+            decl('line-height', 'var(--tw-line-height, var(--line-height-normal))'),
+          ]
         }
         default: {
           value = asColor(value, candidate.modifier)

diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
@@ -373,31 +373,18 @@
 
   /* Type scale */
   --font-size-xs: 0.75rem;
-  --font-size-xs--line-height: 1rem;
   --font-size-sm: 0.875rem;
-  --font-size-sm--line-height: 1.25rem;
   --font-size-base: 1rem;
-  --font-size-base--line-height: 1.5rem;
   --font-size-lg: 1.125rem;
-  --font-size-lg--line-height: 1.75rem;
   --font-size-xl: 1.25rem;
-  --font-size-xl--line-height: 1.75rem;
   --font-size-2xl: 1.5rem;
-  --font-size-2xl--line-height: 2rem;
   --font-size-3xl: 1.875rem;
-  --font-size-3xl--line-height: 2.25rem;
   --font-size-4xl: 2.25rem;
-  --font-size-4xl--line-height: 2.5rem;
   --font-size-5xl: 3rem;
-  --font-size-5xl--line-height: 1;
   --font-size-6xl: 3.75rem;
-  --font-size-6xl--line-height: 1;
   --font-size-7xl: 4.5rem;
-  --font-size-7xl--line-height: 1;
   --font-size-8xl: 6rem;
-  --font-size-8xl--line-height: 1;
   --font-size-9xl: 8rem;
-  --font-size-9xl--line-height: 1;
 
   /* Letter spacing */
   --letter-spacing-tighter: -0.05em;
@@ -409,11 +396,26 @@
 
   /* Line-height */
   --line-height-none: 1;
-  --line-height-tight: 1.25;
-  --line-height-snug: 1.375;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.625;
-  --line-height-loose: 2;
+  --line-height-tight: max(
+    1em,
+    1.25 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))
+  );
+  --line-height-snug: max(
+    1em,
+    1.375 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))
+  );
+  --line-height-normal: max(
+    1em,
+    1.5 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))
+  );
+  --line-height-relaxed: max(
+    1em,
+    1.625 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))
+  );
+  --line-height-loose: max(
+    1em,
+    2 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))
+  );
   --line-height-3: 0.75rem;
   --line-height-4: 1rem;
   --line-height-5: 1.25rem;