Skip to content

Commit 350add7

Browse files
philipp-spiessphilipp-spiess
authored
Rename --line-height-* variables to --leading-* (#14925)
Part of the current changes, we also want to make the `--line-height-*` namespace closer to the utility name so we're renaming it to `--leading-*`: ```diff @theme { - --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; /* ... */ + --leading-none: 1; + --leading-tight: 1.25; + --leading-snug: 1.375; + --leading-normal: 1.5; + --leading-relaxed: 1.625; + --leading-loose: 2; /* ... */ } ``` Notice that we did not change the nested values used in the `--text` type scale, e.g.: ```css @theme { /* Type scale */ --text-xs: 0.75rem; --text-xs--line-height: 1rem; } ``` These do not refer to the `leading` utility and instead refer to nested properties so we're keeping those as-is. ## Test Plan Added cases to the CSS `theme()` variable/JS plugin tests (interop layer) and the integration tests (codemod layer).
1 parent 3fb49bb commit 350add7

File tree

13 files changed

+73
-45
lines changed

13 files changed

+73
-45
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
5858
- Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898))
5959
- Rename `--font-size-*` variables to `--text-*` ([#14909](https://github.com/tailwindlabs/tailwindcss/pull/14909))
6060
- Rename `--letter-spacing-*` variables to `--tracking-*` ([#14921](https://github.com/tailwindlabs/tailwindcss/pull/14921))
61+
- Rename `--line-height-*` variables to `--leading-*` ([#14925](https://github.com/tailwindlabs/tailwindcss/pull/14925))
6162
- Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920))
6263

6364
## [4.0.0-alpha.31] - 2024-10-29

‎integrations/upgrade/js-config.test.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,9 @@ test(
117117
letterSpacing: {
118118
superWide: '0.25em',
119119
},
120+
lineHeight: {
121+
superLoose: '3',
122+
},
120123
},
121124
},
122125
plugins: [],
@@ -135,7 +138,7 @@ test(
135138
`,
136139
'src/index.html': html`
137140
<div
138-
class="[letter-spacing:theme(letterSpacing.superWide)]"
141+
class="[letter-spacing:theme(letterSpacing.superWide)] [line-height:theme(lineHeight.superLoose)]"
139142
></div>
140143
`,
141144
'node_modules/my-external-lib/src/template.html': html`
@@ -152,7 +155,7 @@ test(
152155
"
153156
--- src/index.html ---
154157
<div
155-
class="[letter-spacing:var(--tracking-super-wide)]"
158+
class="[letter-spacing:var(--tracking-super-wide)] [line-height:var(--leading-super-loose)]"
156159
></div>
157160
158161
--- src/input.css ---
@@ -238,6 +241,8 @@ test(
238241
239242
--tracking-super-wide: 0.25em;
240243
244+
--leading-super-loose: 3;
245+
241246
@keyframes spin-clockwise {
242247
0% {
243248
transform: rotate(0deg);

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -355,12 +355,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
355355
--tracking-wide: .025em;
356356
--tracking-wider: .05em;
357357
--tracking-widest: .1em;
358-
--line-height-none: 1;
359-
--line-height-tight: 1.25;
360-
--line-height-snug: 1.375;
361-
--line-height-normal: 1.5;
362-
--line-height-relaxed: 1.625;
363-
--line-height-loose: 2;
358+
--leading-none: 1;
359+
--leading-tight: 1.25;
360+
--leading-snug: 1.375;
361+
--leading-normal: 1.5;
362+
--leading-relaxed: 1.625;
363+
--leading-loose: 2;
364364
--perspective-dramatic: 100px;
365365
--perspective-near: 300px;
366366
--perspective-normal: 500px;

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -354,12 +354,12 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
354354
--tracking-wide: .025em;
355355
--tracking-wider: .05em;
356356
--tracking-widest: .1em;
357-
--line-height-none: 1;
358-
--line-height-tight: 1.25;
359-
--line-height-snug: 1.375;
360-
--line-height-normal: 1.5;
361-
--line-height-relaxed: 1.625;
362-
--line-height-loose: 2;
357+
--leading-none: 1;
358+
--leading-tight: 1.25;
359+
--leading-snug: 1.375;
360+
--leading-normal: 1.5;
361+
--leading-relaxed: 1.625;
362+
--leading-loose: 2;
363363
--perspective-dramatic: 100px;
364364
--perspective-near: 300px;
365365
--perspective-normal: 500px;

‎packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@ test('config values can be merged into the theme', () => {
5454
superWide: '0.25em',
5555
},
5656

57+
lineHeight: {
58+
superLoose: '3',
59+
},
60+
5761
width: {
5862
// Purposely setting to something different from the default
5963
'1/2': '60%',
@@ -93,6 +97,7 @@ test('config values can be merged into the theme', () => {
9397
{ '--line-height': '1.5' },
9498
])
9599
expect(theme.resolve('super-wide', ['--tracking'])).toEqual('0.25em')
100+
expect(theme.resolve('super-loose', ['--leading'])).toEqual('3')
96101
expect(theme.resolve('1/2', ['--width'])).toEqual('60%')
97102
expect(theme.resolve('0.5', ['--width'])).toEqual('60%')
98103
expect(theme.resolve('100%', ['--width'])).toEqual('100%')

‎packages/tailwindcss/src/compat/apply-config-to-theme.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ export function keyPathToCssProperty(path: string[]) {
137137
if (path[0] === 'fontFamily') path[0] = 'font'
138138
if (path[0] === 'fontSize') path[0] = 'text'
139139
if (path[0] === 'letterSpacing') path[0] = 'tracking'
140+
if (path[0] === 'lineHeight') path[0] = 'leading'
140141
if (path[0] === 'maxWidth') path[0] = 'container'
141142
if (path[0] === 'screens') path[0] = 'breakpoint'
142143
if (path[0] === 'transitionTimingFunction') path[0] = 'ease'

‎packages/tailwindcss/src/compat/config.test.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1539,6 +1539,9 @@ test('old theme values are merged with their renamed counterparts in the CSS the
15391539
15401540
--tracking-a: 1;
15411541
--tracking-b: 2;
1542+
1543+
--leading-a: 1;
1544+
--leading-b: 2;
15421545
}
15431546
15441547
@plugin "./plugin.js";
@@ -1605,6 +1608,14 @@ test('old theme values are merged with their renamed counterparts in the CSS the
16051608
a: '1',
16061609
b: '2',
16071610
})
1611+
1612+
expect(theme('lineHeight.a')).toEqual('1')
1613+
expect(theme('lineHeight.b')).toEqual('2')
1614+
1615+
expect(theme('lineHeight')).toMatchObject({
1616+
a: '1',
1617+
b: '2',
1618+
})
16081619
}),
16091620
}
16101621
},

‎packages/tailwindcss/src/compat/config/create-compat-config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
3838
...theme('tracking', {}),
3939
}),
4040

41+
lineHeight: ({ theme }) => ({
42+
...theme('leading', {}),
43+
}),
44+
4145
transitionDuration: {
4246
DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null,
4347
},

‎packages/tailwindcss/src/css-functions.test.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -640,6 +640,7 @@ describe('theme function', () => {
640640
['maxWidth.xs', '20rem'],
641641
['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'],
642642
['letterSpacing.wide', '.025em'],
643+
['lineHeight.tight', '1.25'],
643644
['backgroundColor.red.500', 'oklch(.637 .237 25.331)'],
644645
])('theme(%s) → %s', async (value, result) => {
645646
let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8')

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14036,22 +14036,22 @@ test('leading', async () => {
1403614036
await compileCss(
1403714037
css`
1403814038
@theme {
14039-
--line-height-none: 1;
14040-
--line-height-6: 1.5rem;
14039+
--leading-none: 1;
14040+
--leading-6: 1.5rem;
1404114041
}
1404214042
@tailwind utilities;
1404314043
`,
1404414044
['leading-none', 'leading-6', 'leading-[var(--value)]'],
1404514045
),
1404614046
).toMatchInlineSnapshot(`
1404714047
":root {
14048-
--line-height-none: 1;
14049-
--line-height-6: 1.5rem;
14048+
--leading-none: 1;
14049+
--leading-6: 1.5rem;
1405014050
}
1405114051
1405214052
.leading-6 {
14053-
--tw-leading: var(--line-height-6);
14054-
line-height: var(--line-height-6);
14053+
--tw-leading: var(--leading-6);
14054+
line-height: var(--leading-6);
1405514055
}
1405614056
1405714057
.leading-\\[var\\(--value\\)\\] {
@@ -14060,8 +14060,8 @@ test('leading', async () => {
1406014060
}
1406114061
1406214062
.leading-none {
14063-
--tw-leading: var(--line-height-none);
14064-
line-height: var(--line-height-none);
14063+
--tw-leading: var(--leading-none);
14064+
line-height: var(--leading-none);
1406514065
}
1406614066
1406714067
@supports (-moz-orient: inline) {
@@ -14660,10 +14660,10 @@ test('text', async () => {
1466014660
css`
1466114661
@theme {
1466214662
--color-red-500: #ef4444;
14663-
--line-height-6: 1.5rem;
14663+
--leading-6: 1.5rem;
1466414664
--text-sm: 0.875rem;
1466514665
--text-sm--line-height: 1.25rem;
14666-
--line-height-9: 2.25rem;
14666+
--leading-9: 2.25rem;
1466714667
}
1466814668
@tailwind utilities;
1466914669
`,
@@ -14717,10 +14717,10 @@ test('text', async () => {
1471714717
).toMatchInlineSnapshot(`
1471814718
":root {
1471914719
--color-red-500: #ef4444;
14720-
--line-height-6: 1.5rem;
14720+
--leading-6: 1.5rem;
1472114721
--text-sm: .875rem;
1472214722
--text-sm--line-height: 1.25rem;
14723-
--line-height-9: 2.25rem;
14723+
--leading-9: 2.25rem;
1472414724
}
1472514725
1472614726
.text-sm {
@@ -14730,32 +14730,32 @@ test('text', async () => {
1473014730
1473114731
.text-\\[12px\\]\\/6 {
1473214732
font-size: 12px;
14733-
line-height: var(--line-height-6);
14733+
line-height: var(--leading-6);
1473414734
}
1473514735
1473614736
.text-\\[50\\%\\]\\/6 {
1473714737
font-size: 50%;
14738-
line-height: var(--line-height-6);
14738+
line-height: var(--leading-6);
1473914739
}
1474014740
1474114741
.text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 {
1474214742
font-size: clamp(1rem, var(--size), 3rem);
14743-
line-height: var(--line-height-9);
14743+
line-height: var(--leading-9);
1474414744
}
1474514745
1474614746
.text-\\[larger\\]\\/6 {
1474714747
font-size: larger;
14748-
line-height: var(--line-height-6);
14748+
line-height: var(--leading-6);
1474914749
}
1475014750
1475114751
.text-\\[xx-large\\]\\/6 {
1475214752
font-size: xx-large;
14753-
line-height: var(--line-height-6);
14753+
line-height: var(--leading-6);
1475414754
}
1475514755
1475614756
.text-sm\\/6 {
1475714757
font-size: var(--text-sm);
14758-
line-height: var(--line-height-6);
14758+
line-height: var(--leading-6);
1475914759
}
1476014760
1476114761
.text-sm\\/\\[4px\\] {

0 commit comments

Comments
 (0)