Skip to content

Commit 84f2663

Browse files
MartijnCuppensMartijnCuppens
committed
Switch to line height functions
1 parent dcfaaac commit 84f2663

File tree

6 files changed

+92
-96
lines changed

6 files changed

+92
-96
lines changed

‎packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

+6-20
Original file line numberDiff line numberDiff line change
@@ -350,43 +350,30 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
350350
--font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
351351
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
352352
--font-size-xs: .75rem;
353-
--font-size-xs--line-height: 1rem;
354353
--font-size-sm: .875rem;
355-
--font-size-sm--line-height: 1.25rem;
356354
--font-size-base: 1rem;
357-
--font-size-base--line-height: 1.5rem;
358355
--font-size-lg: 1.125rem;
359-
--font-size-lg--line-height: 1.75rem;
360356
--font-size-xl: 1.25rem;
361-
--font-size-xl--line-height: 1.75rem;
362357
--font-size-2xl: 1.5rem;
363-
--font-size-2xl--line-height: 2rem;
364358
--font-size-3xl: 1.875rem;
365-
--font-size-3xl--line-height: 2.25rem;
366359
--font-size-4xl: 2.25rem;
367-
--font-size-4xl--line-height: 2.5rem;
368360
--font-size-5xl: 3rem;
369-
--font-size-5xl--line-height: 1;
370361
--font-size-6xl: 3.75rem;
371-
--font-size-6xl--line-height: 1;
372362
--font-size-7xl: 4.5rem;
373-
--font-size-7xl--line-height: 1;
374363
--font-size-8xl: 6rem;
375-
--font-size-8xl--line-height: 1;
376364
--font-size-9xl: 8rem;
377-
--font-size-9xl--line-height: 1;
378365
--letter-spacing-tighter: -.05em;
379366
--letter-spacing-tight: -.025em;
380367
--letter-spacing-normal: 0em;
381368
--letter-spacing-wide: .025em;
382369
--letter-spacing-wider: .05em;
383370
--letter-spacing-widest: .1em;
384371
--line-height-none: 1;
385-
--line-height-tight: 1.25;
386-
--line-height-snug: 1.375;
387-
--line-height-normal: 1.5;
388-
--line-height-relaxed: 1.625;
389-
--line-height-loose: 2;
372+
--line-height-tight: max(1em, 1.25 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
373+
--line-height-snug: max(1em, 1.375 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
374+
--line-height-normal: max(1em, 1.5 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
375+
--line-height-relaxed: max(1em, 1.625 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
376+
--line-height-loose: max(1em, 2 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
390377
--line-height-3: .75rem;
391378
--line-height-4: 1rem;
392379
--line-height-5: 1.25rem;
@@ -423,9 +410,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
423410
}
424411
425412
html, :host {
413+
line-height: var(--line-height-normal, 1.5);
426414
-webkit-text-size-adjust: 100%;
427415
tab-size: 4;
428-
line-height: 1.5;
429416
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");
430417
font-feature-settings: var(--default-font-feature-settings, normal);
431418
font-variation-settings: var(--default-font-variation-settings, normal);
@@ -586,7 +573,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
586573
@layer utilities {
587574
.text-2xl {
588575
font-size: var(--font-size-2xl, 1.5rem);
589-
line-height: var(--font-size-2xl--line-height, 2rem);
590576
}
591577
592578
.text-black\\/50 {

‎packages/tailwindcss/preflight.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
html,
2929
:host {
30-
line-height: 1.5; /* 1 */
30+
line-height: var(--line-height-normal, 1.5); /* 1 */
3131
-webkit-text-size-adjust: 100%; /* 2 */
3232
tab-size: 4; /* 3 */
3333
font-family: var(
@@ -140,6 +140,7 @@ pre {
140140

141141
small {
142142
font-size: 80%;
143+
line-height: var(--tw-line-height, var(--line-height-normal, 1.5));
143144
}
144145

145146
/*

‎packages/tailwindcss/src/__snapshots__/index.test.ts.snap

+5-18
Original file line numberDiff line numberDiff line change
@@ -349,43 +349,30 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
349349
--font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
350350
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
351351
--font-size-xs: .75rem;
352-
--font-size-xs--line-height: 1rem;
353352
--font-size-sm: .875rem;
354-
--font-size-sm--line-height: 1.25rem;
355353
--font-size-base: 1rem;
356-
--font-size-base--line-height: 1.5rem;
357354
--font-size-lg: 1.125rem;
358-
--font-size-lg--line-height: 1.75rem;
359355
--font-size-xl: 1.25rem;
360-
--font-size-xl--line-height: 1.75rem;
361356
--font-size-2xl: 1.5rem;
362-
--font-size-2xl--line-height: 2rem;
363357
--font-size-3xl: 1.875rem;
364-
--font-size-3xl--line-height: 2.25rem;
365358
--font-size-4xl: 2.25rem;
366-
--font-size-4xl--line-height: 2.5rem;
367359
--font-size-5xl: 3rem;
368-
--font-size-5xl--line-height: 1;
369360
--font-size-6xl: 3.75rem;
370-
--font-size-6xl--line-height: 1;
371361
--font-size-7xl: 4.5rem;
372-
--font-size-7xl--line-height: 1;
373362
--font-size-8xl: 6rem;
374-
--font-size-8xl--line-height: 1;
375363
--font-size-9xl: 8rem;
376-
--font-size-9xl--line-height: 1;
377364
--letter-spacing-tighter: -.05em;
378365
--letter-spacing-tight: -.025em;
379366
--letter-spacing-normal: 0em;
380367
--letter-spacing-wide: .025em;
381368
--letter-spacing-wider: .05em;
382369
--letter-spacing-widest: .1em;
383370
--line-height-none: 1;
384-
--line-height-tight: 1.25;
385-
--line-height-snug: 1.375;
386-
--line-height-normal: 1.5;
387-
--line-height-relaxed: 1.625;
388-
--line-height-loose: 2;
371+
--line-height-tight: max(1em, 1.25 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
372+
--line-height-snug: max(1em, 1.375 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
373+
--line-height-normal: max(1em, 1.5 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
374+
--line-height-relaxed: max(1em, 1.625 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
375+
--line-height-loose: max(1em, 2 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)));
389376
--line-height-3: .75rem;
390377
--line-height-4: 1rem;
391378
--line-height-5: 1.25rem;

‎packages/tailwindcss/src/utilities.test.ts

+47-36
Original file line numberDiff line numberDiff line change
@@ -13067,15 +13067,18 @@ test('leading', async () => {
1306713067
}
1306813068
1306913069
.leading-6 {
13070-
line-height: var(--line-height-6, 1.5rem);
13070+
--tw-line-height: var(--line-height-6, 1.5rem);
13071+
line-height: var(--tw-line-height);
1307113072
}
1307213073
1307313074
.leading-\\[--value\\] {
13074-
line-height: var(--value);
13075+
--tw-line-height: var(--value);
13076+
line-height: var(--tw-line-height);
1307513077
}
1307613078
1307713079
.leading-none {
13078-
line-height: var(--line-height-none, 1);
13080+
--tw-line-height: var(--line-height-none, 1);
13081+
line-height: var(--tw-line-height);
1307913082
}"
1308013083
`)
1308113084
expect(
@@ -13700,71 +13703,79 @@ test('text', async () => {
1370013703
line-height: var(--font-size-sm--line-height, 1.25rem);
1370113704
}
1370213705
13703-
.text-\\[12px\\]\\/6 {
13706+
.text-\\[12px\\] {
1370413707
font-size: 12px;
13705-
line-height: var(--line-height-6, 1.5rem);
13706-
}
13707-
13708-
.text-\\[50\\%\\]\\/6 {
13709-
font-size: 50%;
13710-
line-height: var(--line-height-6, 1.5rem);
13711-
}
13712-
13713-
.text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 {
13714-
font-size: clamp(1rem, var(--size), 3rem);
13715-
line-height: var(--line-height-9, 2.25rem);
13708+
line-height: var(--tw-line-height, var(--line-height-normal));
1371613709
}
1371713710
13718-
.text-\\[larger\\]\\/6 {
13719-
font-size: larger;
13720-
line-height: var(--line-height-6, 1.5rem);
13721-
}
13722-
13723-
.text-\\[xx-large\\]\\/6 {
13724-
font-size: xx-large;
13725-
line-height: var(--line-height-6, 1.5rem);
13726-
}
13727-
13728-
.text-sm\\/6 {
13729-
font-size: var(--font-size-sm, .875rem);
13730-
line-height: var(--line-height-6, 1.5rem);
13731-
}
13732-
13733-
.text-sm\\/\\[4px\\] {
13734-
font-size: var(--font-size-sm, .875rem);
13735-
line-height: 4px;
13736-
}
13737-
13738-
.text-\\[12px\\] {
13711+
.text-\\[12px\\]\\/6 {
1373913712
font-size: 12px;
13713+
line-height: var(--tw-line-height, var(--line-height-6, 1.5rem));
1374013714
}
1374113715
1374213716
.text-\\[50\\%\\] {
1374313717
font-size: 50%;
13718+
line-height: var(--tw-line-height, var(--line-height-normal));
13719+
}
13720+
13721+
.text-\\[50\\%\\]\\/6 {
13722+
font-size: 50%;
13723+
line-height: var(--tw-line-height, var(--line-height-6, 1.5rem));
1374413724
}
1374513725
1374613726
.text-\\[absolute-size\\:--my-size\\] {
1374713727
font-size: var(--my-size);
13728+
line-height: var(--tw-line-height, var(--line-height-normal));
1374813729
}
1374913730
1375013731
.text-\\[clamp\\(1rem\\,2rem\\,3rem\\)\\] {
1375113732
font-size: 2rem;
13733+
line-height: var(--tw-line-height, var(--line-height-normal));
1375213734
}
1375313735
1375413736
.text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\] {
1375513737
font-size: clamp(1rem, var(--size), 3rem);
13738+
line-height: var(--tw-line-height, var(--line-height-normal));
13739+
}
13740+
13741+
.text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 {
13742+
font-size: clamp(1rem, var(--size), 3rem);
13743+
line-height: var(--tw-line-height, var(--line-height-9, 2.25rem));
1375613744
}
1375713745
1375813746
.text-\\[larger\\] {
1375913747
font-size: larger;
13748+
line-height: var(--tw-line-height, var(--line-height-normal));
13749+
}
13750+
13751+
.text-\\[larger\\]\\/6 {
13752+
font-size: larger;
13753+
line-height: var(--tw-line-height, var(--line-height-6, 1.5rem));
1376013754
}
1376113755
1376213756
.text-\\[length\\:--my-size\\], .text-\\[percentage\\:--my-size\\], .text-\\[relative-size\\:--my-size\\] {
1376313757
font-size: var(--my-size);
13758+
line-height: var(--tw-line-height, var(--line-height-normal));
1376413759
}
1376513760
1376613761
.text-\\[xx-large\\] {
1376713762
font-size: xx-large;
13763+
line-height: var(--tw-line-height, var(--line-height-normal));
13764+
}
13765+
13766+
.text-\\[xx-large\\]\\/6 {
13767+
font-size: xx-large;
13768+
line-height: var(--tw-line-height, var(--line-height-6, 1.5rem));
13769+
}
13770+
13771+
.text-sm\\/6 {
13772+
font-size: var(--font-size-sm, .875rem);
13773+
line-height: var(--line-height-6, 1.5rem);
13774+
}
13775+
13776+
.text-sm\\/\\[4px\\] {
13777+
font-size: var(--font-size-sm, .875rem);
13778+
line-height: 4px;
1376813779
}
1376913780
1377013781
.text-\\[\\#0088cc\\] {

‎packages/tailwindcss/src/utilities.ts

+12-3
Original file line numberDiff line numberDiff line change
@@ -3782,7 +3782,10 @@ export function createUtilities(theme: Theme) {
37823782

37833783
functionalUtility('leading', {
37843784
themeKeys: ['--line-height'],
3785-
handle: (value) => [decl('line-height', value)],
3785+
handle: (value) => [
3786+
decl('--tw-line-height', value),
3787+
decl('line-height', 'var(--tw-line-height)'),
3788+
],
37863789
})
37873790

37883791
functionalUtility('tracking', {
@@ -4050,11 +4053,17 @@ export function createUtilities(theme: Theme) {
40504053
: theme.resolve(candidate.modifier.value, ['--line-height'])
40514054

40524055
if (modifier) {
4053-
return [decl('font-size', value), decl('line-height', modifier)]
4056+
return [
4057+
decl('font-size', value),
4058+
decl('line-height', `var(--tw-line-height, ${modifier})`),
4059+
]
40544060
}
40554061
}
40564062

4057-
return [decl('font-size', value)]
4063+
return [
4064+
decl('font-size', value),
4065+
decl('line-height', 'var(--tw-line-height, var(--line-height-normal))'),
4066+
]
40584067
}
40594068
default: {
40604069
value = asColor(value, candidate.modifier)

‎packages/tailwindcss/theme.css

+20-18
Original file line numberDiff line numberDiff line change
@@ -373,31 +373,18 @@
373373

374374
/* Type scale */
375375
--font-size-xs: 0.75rem;
376-
--font-size-xs--line-height: 1rem;
377376
--font-size-sm: 0.875rem;
378-
--font-size-sm--line-height: 1.25rem;
379377
--font-size-base: 1rem;
380-
--font-size-base--line-height: 1.5rem;
381378
--font-size-lg: 1.125rem;
382-
--font-size-lg--line-height: 1.75rem;
383379
--font-size-xl: 1.25rem;
384-
--font-size-xl--line-height: 1.75rem;
385380
--font-size-2xl: 1.5rem;
386-
--font-size-2xl--line-height: 2rem;
387381
--font-size-3xl: 1.875rem;
388-
--font-size-3xl--line-height: 2.25rem;
389382
--font-size-4xl: 2.25rem;
390-
--font-size-4xl--line-height: 2.5rem;
391383
--font-size-5xl: 3rem;
392-
--font-size-5xl--line-height: 1;
393384
--font-size-6xl: 3.75rem;
394-
--font-size-6xl--line-height: 1;
395385
--font-size-7xl: 4.5rem;
396-
--font-size-7xl--line-height: 1;
397386
--font-size-8xl: 6rem;
398-
--font-size-8xl--line-height: 1;
399387
--font-size-9xl: 8rem;
400-
--font-size-9xl--line-height: 1;
401388

402389
/* Letter spacing */
403390
--letter-spacing-tighter: -0.05em;
@@ -409,11 +396,26 @@
409396

410397
/* Line-height */
411398
--line-height-none: 1;
412-
--line-height-tight: 1.25;
413-
--line-height-snug: 1.375;
414-
--line-height-normal: 1.5;
415-
--line-height-relaxed: 1.625;
416-
--line-height-loose: 2;
399+
--line-height-tight: max(
400+
1em,
401+
1.25 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))
402+
);
403+
--line-height-snug: max(
404+
1em,
405+
1.375 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))
406+
);
407+
--line-height-normal: max(
408+
1em,
409+
1.5 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))
410+
);
411+
--line-height-relaxed: max(
412+
1em,
413+
1.625 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))
414+
);
415+
--line-height-loose: max(
416+
1em,
417+
2 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))
418+
);
417419
--line-height-3: 0.75rem;
418420
--line-height-4: 1rem;
419421
--line-height-5: 1.25rem;

0 commit comments

Comments
 (0)