From f1221b3fce5028b232a9b7005350e9a1edfc7304 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 27 Jan 2025 14:10:09 +0100 Subject: [PATCH] Ensure font-size utilities with `none` modifier works e.g.: `text-sm/none` (#15921) This PR fixes an issue where classes such as `text-sm/none` don't work as expected. The reason for this is that `leading-none` is the only hardcoded leading utility and is not coming from the `@theme`. This means that `text-sm/none` tries to do a lookup for `none` but it won't resolve. This PR fixes that by allowing `none` as a modifier. While working on this, I noticed that `text-sm/none` _did_ generate CSS: ```css .text-sm\/none { font-size: var(--text-sm); } ``` Notice that the `line-height` is missing. This means that any modifier that can't be resolved doesn't get the `line-height` set, but it _will_ generate CSS. In this case, no CSS should have been generated. Otherwise, all of these generate CSS which will only bloat your CSS and won't work as expected. E.g.: `text-sm/foo`, `text-sm/bar`, and `text-sm/baz`: ```css .text-sm\/bar { font-size: var(--text-sm); } .text-sm\/baz { font-size: var(--text-sm); } .text-sm\/foo { font-size: var(--text-sm); } ``` Fixes: #15911 --- CHANGELOG.md | 4 +- packages/tailwindcss/src/utilities.test.ts | 76 +++++++++++++++------- packages/tailwindcss/src/utilities.ts | 16 +++++ 3 files changed, 72 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e19f9243476d..d1fce67b58f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Remove invalid `min-w/h-none` utilities ([#15845](https://github.com/tailwindlabs/tailwindcss/pull/15845)) - Ensure CSS variable shorthand uses valid CSS variables ([#15738](https://github.com/tailwindlabs/tailwindcss/pull/15738)) +- Ensure font-size utilities with `none` modifier have a line-height set e.g.: `text-sm/none` ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921)) +- Ensure font-size utilities with unknown modifier don't generate CSS ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921)) ## [4.0.0] - 2025-01-21 @@ -334,7 +336,7 @@ For a deep-dive into everything that's new, [check out the announcement post](ht - Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) - Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) - Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) -- Remove fixed line-height theme values and derive `leading-*` utilites from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) +- Remove fixed line-height theme values and derive `leading-*` utilities from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) - Remove `--transition-timing-function-linear` from the default theme in favor of a static `ease-linear` utility ([#14880](https://github.com/tailwindlabs/tailwindcss/pull/14880)) - Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) - Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881)) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 9ecf38882316..e235777b2c98 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -14927,6 +14927,7 @@ test('text', async () => { --color-red-500: #ef4444; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; + --leading-snug: 1.375; } @tailwind utilities; `, @@ -14962,6 +14963,9 @@ test('text', async () => { // font-size / line-height / letter-spacing / font-weight 'text-sm', 'text-sm/6', + 'text-sm/none', + 'text-[10px]/none', + 'text-sm/snug', 'text-sm/[4px]', 'text-[12px]', 'text-[12px]/6', @@ -14986,6 +14990,7 @@ test('text', async () => { --color-red-500: #ef4444; --text-sm: .875rem; --text-sm--line-height: 1.25rem; + --leading-snug: 1.375; } .text-sm { @@ -14993,6 +14998,11 @@ test('text', async () => { line-height: var(--tw-leading, var(--text-sm--line-height)); } + .text-\\[10px\\]\\/none { + font-size: 10px; + line-height: 1; + } + .text-\\[12px\\]\\/6 { font-size: 12px; line-height: calc(var(--spacing) * 6); @@ -15028,6 +15038,16 @@ test('text', async () => { line-height: 4px; } + .text-sm\\/none { + font-size: var(--text-sm); + line-height: 1; + } + + .text-sm\\/snug { + font-size: var(--text-sm); + line-height: var(--leading-snug); + } + .text-\\[12px\\] { font-size: 12px; } @@ -15121,29 +15141,39 @@ test('text', async () => { }" `) expect( - await run([ - 'text', - // color - '-text-red-500', - '-text-red-500/50', - '-text-red-500/[0.5]', - '-text-red-500/[50%]', - '-text-current', - '-text-current/50', - '-text-current/[0.5]', - '-text-current/[50%]', - '-text-inherit', - '-text-transparent', - '-text-[#0088cc]', - '-text-[#0088cc]/50', - '-text-[#0088cc]/[0.5]', - '-text-[#0088cc]/[50%]', - - // font-size / line-height / letter-spacing / font-weight - '-text-sm', - '-text-sm/6', - '-text-sm/[4px]', - ]), + await compileCss( + css` + @theme inline reference { + --text-sm: 0.875rem; + } + @tailwind utilities; + `, + [ + 'text', + // color + '-text-red-500', + '-text-red-500/50', + '-text-red-500/[0.5]', + '-text-red-500/[50%]', + '-text-current', + '-text-current/50', + '-text-current/[0.5]', + '-text-current/[50%]', + '-text-inherit', + '-text-transparent', + '-text-[#0088cc]', + '-text-[#0088cc]/50', + '-text-[#0088cc]/[0.5]', + '-text-[#0088cc]/[50%]', + + // font-size / line-height / letter-spacing / font-weight + '-text-sm', + '-text-sm/6', + 'text-sm/foo', + '-text-sm/[4px]', + 'text-[10px]/foo', + ], + ), ).toEqual('') }) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 99c8b4282a40..66caeb4ee006 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -4040,9 +4040,16 @@ export function createUtilities(theme: Theme) { modifier = `calc(${multiplier} * ${candidate.modifier.value})` } + // Shorthand for `leading-none` + if (!modifier && candidate.modifier.value === 'none') { + modifier = '1' + } + if (modifier) { return [decl('font-size', value), decl('line-height', modifier)] } + + return null } return [decl('font-size', value)] @@ -4086,6 +4093,15 @@ export function createUtilities(theme: Theme) { modifier = `calc(${multiplier} * ${candidate.modifier.value})` } + // Shorthand for `leading-none` + if (!modifier && candidate.modifier.value === 'none') { + modifier = '1' + } + + if (!modifier) { + return null + } + let declarations = [decl('font-size', fontSize)] modifier && declarations.push(decl('line-height', modifier)) return declarations