mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
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).
This commit is contained in:
Philipp Spiess
GitHub
parent
3fb49bb0ee
commit
350add7490
@ -58,6 +58,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898))
|
||||
- Rename `--font-size-*` variables to `--text-*` ([#14909](https://github.com/tailwindlabs/tailwindcss/pull/14909))
|
||||
- Rename `--letter-spacing-*` variables to `--tracking-*` ([#14921](https://github.com/tailwindlabs/tailwindcss/pull/14921))
|
||||
- Rename `--line-height-*` variables to `--leading-*` ([#14925](https://github.com/tailwindlabs/tailwindcss/pull/14925))
|
||||
- Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920))
|
||||
|
||||
## [4.0.0-alpha.31] - 2024-10-29
|
||||
|
||||
@ -117,6 +117,9 @@ test(
|
||||
letterSpacing: {
|
||||
superWide: '0.25em',
|
||||
},
|
||||
lineHeight: {
|
||||
superLoose: '3',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
@ -135,7 +138,7 @@ test(
|
||||
`,
|
||||
'src/index.html': html`
|
||||
<div
|
||||
class="[letter-spacing:theme(letterSpacing.superWide)]"
|
||||
class="[letter-spacing:theme(letterSpacing.superWide)] [line-height:theme(lineHeight.superLoose)]"
|
||||
></div>
|
||||
`,
|
||||
'node_modules/my-external-lib/src/template.html': html`
|
||||
@ -152,7 +155,7 @@ test(
|
||||
"
|
||||
--- src/index.html ---
|
||||
<div
|
||||
class="[letter-spacing:var(--tracking-super-wide)]"
|
||||
class="[letter-spacing:var(--tracking-super-wide)] [line-height:var(--leading-super-loose)]"
|
||||
></div>
|
||||
|
||||
--- src/input.css ---
|
||||
@ -238,6 +241,8 @@ test(
|
||||
|
||||
--tracking-super-wide: 0.25em;
|
||||
|
||||
--leading-super-loose: 3;
|
||||
|
||||
@keyframes spin-clockwise {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
||||
@ -355,12 +355,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
|
||||
--tracking-wide: .025em;
|
||||
--tracking-wider: .05em;
|
||||
--tracking-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;
|
||||
--leading-none: 1;
|
||||
--leading-tight: 1.25;
|
||||
--leading-snug: 1.375;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
--perspective-dramatic: 100px;
|
||||
--perspective-near: 300px;
|
||||
--perspective-normal: 500px;
|
||||
|
||||
@ -354,12 +354,12 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
|
||||
--tracking-wide: .025em;
|
||||
--tracking-wider: .05em;
|
||||
--tracking-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;
|
||||
--leading-none: 1;
|
||||
--leading-tight: 1.25;
|
||||
--leading-snug: 1.375;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
--perspective-dramatic: 100px;
|
||||
--perspective-near: 300px;
|
||||
--perspective-normal: 500px;
|
||||
|
||||
@ -54,6 +54,10 @@ test('config values can be merged into the theme', () => {
|
||||
superWide: '0.25em',
|
||||
},
|
||||
|
||||
lineHeight: {
|
||||
superLoose: '3',
|
||||
},
|
||||
|
||||
width: {
|
||||
// Purposely setting to something different from the default
|
||||
'1/2': '60%',
|
||||
@ -93,6 +97,7 @@ test('config values can be merged into the theme', () => {
|
||||
{ '--line-height': '1.5' },
|
||||
])
|
||||
expect(theme.resolve('super-wide', ['--tracking'])).toEqual('0.25em')
|
||||
expect(theme.resolve('super-loose', ['--leading'])).toEqual('3')
|
||||
expect(theme.resolve('1/2', ['--width'])).toEqual('60%')
|
||||
expect(theme.resolve('0.5', ['--width'])).toEqual('60%')
|
||||
expect(theme.resolve('100%', ['--width'])).toEqual('100%')
|
||||
|
||||
@ -137,6 +137,7 @@ export function keyPathToCssProperty(path: string[]) {
|
||||
if (path[0] === 'fontFamily') path[0] = 'font'
|
||||
if (path[0] === 'fontSize') path[0] = 'text'
|
||||
if (path[0] === 'letterSpacing') path[0] = 'tracking'
|
||||
if (path[0] === 'lineHeight') path[0] = 'leading'
|
||||
if (path[0] === 'maxWidth') path[0] = 'container'
|
||||
if (path[0] === 'screens') path[0] = 'breakpoint'
|
||||
if (path[0] === 'transitionTimingFunction') path[0] = 'ease'
|
||||
|
||||
@ -1539,6 +1539,9 @@ test('old theme values are merged with their renamed counterparts in the CSS the
|
||||
|
||||
--tracking-a: 1;
|
||||
--tracking-b: 2;
|
||||
|
||||
--leading-a: 1;
|
||||
--leading-b: 2;
|
||||
}
|
||||
|
||||
@plugin "./plugin.js";
|
||||
@ -1605,6 +1608,14 @@ test('old theme values are merged with their renamed counterparts in the CSS the
|
||||
a: '1',
|
||||
b: '2',
|
||||
})
|
||||
|
||||
expect(theme('lineHeight.a')).toEqual('1')
|
||||
expect(theme('lineHeight.b')).toEqual('2')
|
||||
|
||||
expect(theme('lineHeight')).toMatchObject({
|
||||
a: '1',
|
||||
b: '2',
|
||||
})
|
||||
}),
|
||||
}
|
||||
},
|
||||
|
||||
@ -38,6 +38,10 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
|
||||
...theme('tracking', {}),
|
||||
}),
|
||||
|
||||
lineHeight: ({ theme }) => ({
|
||||
...theme('leading', {}),
|
||||
}),
|
||||
|
||||
transitionDuration: {
|
||||
DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null,
|
||||
},
|
||||
|
||||
@ -640,6 +640,7 @@ describe('theme function', () => {
|
||||
['maxWidth.xs', '20rem'],
|
||||
['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'],
|
||||
['letterSpacing.wide', '.025em'],
|
||||
['lineHeight.tight', '1.25'],
|
||||
['backgroundColor.red.500', 'oklch(.637 .237 25.331)'],
|
||||
])('theme(%s) → %s', async (value, result) => {
|
||||
let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8')
|
||||
|
||||
@ -14036,8 +14036,8 @@ test('leading', async () => {
|
||||
await compileCss(
|
||||
css`
|
||||
@theme {
|
||||
--line-height-none: 1;
|
||||
--line-height-6: 1.5rem;
|
||||
--leading-none: 1;
|
||||
--leading-6: 1.5rem;
|
||||
}
|
||||
@tailwind utilities;
|
||||
`,
|
||||
@ -14045,13 +14045,13 @@ test('leading', async () => {
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
":root {
|
||||
--line-height-none: 1;
|
||||
--line-height-6: 1.5rem;
|
||||
--leading-none: 1;
|
||||
--leading-6: 1.5rem;
|
||||
}
|
||||
|
||||
.leading-6 {
|
||||
--tw-leading: var(--line-height-6);
|
||||
line-height: var(--line-height-6);
|
||||
--tw-leading: var(--leading-6);
|
||||
line-height: var(--leading-6);
|
||||
}
|
||||
|
||||
.leading-\\[var\\(--value\\)\\] {
|
||||
@ -14060,8 +14060,8 @@ test('leading', async () => {
|
||||
}
|
||||
|
||||
.leading-none {
|
||||
--tw-leading: var(--line-height-none);
|
||||
line-height: var(--line-height-none);
|
||||
--tw-leading: var(--leading-none);
|
||||
line-height: var(--leading-none);
|
||||
}
|
||||
|
||||
@supports (-moz-orient: inline) {
|
||||
@ -14660,10 +14660,10 @@ test('text', async () => {
|
||||
css`
|
||||
@theme {
|
||||
--color-red-500: #ef4444;
|
||||
--line-height-6: 1.5rem;
|
||||
--leading-6: 1.5rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: 1.25rem;
|
||||
--line-height-9: 2.25rem;
|
||||
--leading-9: 2.25rem;
|
||||
}
|
||||
@tailwind utilities;
|
||||
`,
|
||||
@ -14717,10 +14717,10 @@ test('text', async () => {
|
||||
).toMatchInlineSnapshot(`
|
||||
":root {
|
||||
--color-red-500: #ef4444;
|
||||
--line-height-6: 1.5rem;
|
||||
--leading-6: 1.5rem;
|
||||
--text-sm: .875rem;
|
||||
--text-sm--line-height: 1.25rem;
|
||||
--line-height-9: 2.25rem;
|
||||
--leading-9: 2.25rem;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
@ -14730,32 +14730,32 @@ test('text', async () => {
|
||||
|
||||
.text-\\[12px\\]\\/6 {
|
||||
font-size: 12px;
|
||||
line-height: var(--line-height-6);
|
||||
line-height: var(--leading-6);
|
||||
}
|
||||
|
||||
.text-\\[50\\%\\]\\/6 {
|
||||
font-size: 50%;
|
||||
line-height: var(--line-height-6);
|
||||
line-height: var(--leading-6);
|
||||
}
|
||||
|
||||
.text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 {
|
||||
font-size: clamp(1rem, var(--size), 3rem);
|
||||
line-height: var(--line-height-9);
|
||||
line-height: var(--leading-9);
|
||||
}
|
||||
|
||||
.text-\\[larger\\]\\/6 {
|
||||
font-size: larger;
|
||||
line-height: var(--line-height-6);
|
||||
line-height: var(--leading-6);
|
||||
}
|
||||
|
||||
.text-\\[xx-large\\]\\/6 {
|
||||
font-size: xx-large;
|
||||
line-height: var(--line-height-6);
|
||||
line-height: var(--leading-6);
|
||||
}
|
||||
|
||||
.text-sm\\/6 {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--line-height-6);
|
||||
line-height: var(--leading-6);
|
||||
}
|
||||
|
||||
.text-sm\\/\\[4px\\] {
|
||||
|
||||
@ -3609,7 +3609,7 @@ export function createUtilities(theme: Theme) {
|
||||
staticUtility('forced-color-adjust-none', [['forced-color-adjust', 'none']])
|
||||
staticUtility('forced-color-adjust-auto', [['forced-color-adjust', 'auto']])
|
||||
|
||||
spacingUtility('leading', ['--line-height'], (value) => [
|
||||
spacingUtility('leading', ['--leading'], (value) => [
|
||||
atRoot([property('--tw-leading')]),
|
||||
decl('--tw-leading', value),
|
||||
decl('line-height', value),
|
||||
@ -3880,7 +3880,7 @@ export function createUtilities(theme: Theme) {
|
||||
let modifier =
|
||||
candidate.modifier.kind === 'arbitrary'
|
||||
? candidate.modifier.value
|
||||
: theme.resolve(candidate.modifier.value, ['--line-height'])
|
||||
: theme.resolve(candidate.modifier.value, ['--leading'])
|
||||
|
||||
if (modifier) {
|
||||
return [decl('font-size', value), decl('line-height', modifier)]
|
||||
@ -3920,7 +3920,7 @@ export function createUtilities(theme: Theme) {
|
||||
let modifier =
|
||||
candidate.modifier.kind === 'arbitrary'
|
||||
? candidate.modifier.value
|
||||
: theme.resolve(candidate.modifier.value, ['--line-height'])
|
||||
: theme.resolve(candidate.modifier.value, ['--leading'])
|
||||
|
||||
let declarations = [decl('font-size', fontSize)]
|
||||
modifier && declarations.push(decl('line-height', modifier))
|
||||
@ -3964,7 +3964,7 @@ export function createUtilities(theme: Theme) {
|
||||
values: [],
|
||||
valueThemeKeys: ['--text'],
|
||||
modifiers: [],
|
||||
modifierThemeKeys: ['--line-height'],
|
||||
modifierThemeKeys: ['--leading'],
|
||||
},
|
||||
])
|
||||
|
||||
|
||||
@ -508,7 +508,7 @@ test('explicit leading utilities are respected when overriding font-size', async
|
||||
--text-sm--line-height: 16px;
|
||||
--text-xl: 20px;
|
||||
--text-xl--line-height: 24px;
|
||||
--line-height-tight: 8px;
|
||||
--leading-tight: 8px;
|
||||
}
|
||||
`,
|
||||
)
|
||||
@ -540,7 +540,7 @@ test('explicit leading utilities are overridden by line-height modifiers', async
|
||||
--text-sm--line-height: 16px;
|
||||
--text-xl: 20px;
|
||||
--text-xl--line-height: 24px;
|
||||
--line-height-tight: 8px;
|
||||
--leading-tight: 8px;
|
||||
}
|
||||
`,
|
||||
)
|
||||
|
||||
@ -405,13 +405,13 @@
|
||||
--tracking-wider: 0.05em;
|
||||
--tracking-widest: 0.1em;
|
||||
|
||||
/* 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;
|
||||
/* Leading */
|
||||
--leading-none: 1;
|
||||
--leading-tight: 1.25;
|
||||
--leading-snug: 1.375;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
|
||||
/* 3D perspectives */
|
||||
--perspective-dramatic: 100px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user