From 4f769806516485f9ec3fab0246dbfb266b8fb6a6 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 9 Nov 2024 09:40:57 -0500 Subject: [PATCH] Make `leading-none` a static utility (#14934) This PR removes the `--leading-none` variable from the default theme in favor of making `leading-none` a static utility, since it doesn't make sense to change the value of this on a per-project basis. This is consistent with how `none` values work for other utilities in the framework. Some folks in the past have wanted `leading-none` to be `line-height: 0` but technically "leading" is the space between lines, and `line-height: 1` removes all extra space between lines so it feels correct to me (although it means all of the numeric utilities like `leading-6` are not technically correct but I try hard not to think about that too much). If someone wants `line-height: 0` they can use `leading-0` in v4 since the `leading-*` utilities inherit the spacing scale now. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + .../src/__snapshots__/index.test.ts.snap | 1 - .../src/__snapshots__/index.test.ts.snap | 1 - .../src/__snapshots__/intellisense.test.ts.snap | 1 + packages/tailwindcss/src/utilities.test.ts | 16 ++++++++-------- packages/tailwindcss/src/utilities.ts | 5 +++++ packages/tailwindcss/theme.css | 1 - 7 files changed, 15 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bbf991a13cac..d23b2a0b58df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -65,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Replace `outline-none` with `outline-hidden`, add new simplified `outline-none` utility ([#14926](https://github.com/tailwindlabs/tailwindcss/pull/14926)) - Revert adding borders by default to form inputs ([#14929](https://github.com/tailwindlabs/tailwindcss/pull/14929)) - Deprecate `shadow-inner` utility ([#14933](https://github.com/tailwindlabs/tailwindcss/pull/14933)) +- Remove `--leading-none` from the default theme in favor of a static `leading-none` utility ([#14934](https://github.com/tailwindlabs/tailwindcss/pull/14934)) ## [4.0.0-alpha.31] - 2024-10-29 diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index de154e72b3a5..83624ee4fff0 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -354,7 +354,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; - --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 378b7eca991a..4c4150925a86 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -353,7 +353,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; - --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 3f0136c0bab2..ac0a70fa693d 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -3853,6 +3853,7 @@ exports[`getClassList 1`] = ` "leading-80", "leading-9", "leading-96", + "leading-none", "leading-px", "left-0", "left-0.5", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index aab4990d2b78..a9c4a6ae2ee6 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -14036,16 +14036,16 @@ test('leading', async () => { await compileCss( css` @theme { - --leading-none: 1; + --leading-tight: 1.25; --leading-6: 1.5rem; } @tailwind utilities; `, - ['leading-none', 'leading-6', 'leading-[var(--value)]'], + ['leading-tight', 'leading-6', 'leading-[var(--value)]'], ), ).toMatchInlineSnapshot(` ":root { - --leading-none: 1; + --leading-tight: 1.25; --leading-6: 1.5rem; } @@ -14059,9 +14059,9 @@ test('leading', async () => { line-height: var(--value); } - .leading-none { - --tw-leading: var(--leading-none); - line-height: var(--leading-none); + .leading-tight { + --tw-leading: var(--leading-tight); + line-height: var(--leading-tight); } @supports (-moz-orient: inline) { @@ -14080,10 +14080,10 @@ test('leading', async () => { expect( await run([ 'leading', - '-leading-none', + '-leading-tight', '-leading-6', '-leading-[var(--value)]', - 'leading-none/foo', + 'leading-tight/foo', 'leading-6/foo', 'leading-[var(--value)]/foo', ]), diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 9fa01330bc5f..2248f507deee 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3609,6 +3609,11 @@ export function createUtilities(theme: Theme) { staticUtility('forced-color-adjust-none', [['forced-color-adjust', 'none']]) staticUtility('forced-color-adjust-auto', [['forced-color-adjust', 'auto']]) + staticUtility('leading-none', [ + () => atRoot([property('--tw-leading')]), + ['--tw-leading', '1'], + ['line-height', '1'], + ]) spacingUtility('leading', ['--leading'], (value) => [ atRoot([property('--tw-leading')]), decl('--tw-leading', value), diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index c309d273c49d..842d172b42fa 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -405,7 +405,6 @@ --tracking-widest: 0.1em; /* Leading */ - --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5;