From 2053401134e1df765fa3733e9e70c1f1a5d5fdd9 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 27 Jan 2025 13:15:29 +0100 Subject: [PATCH 1/4] ensure font-size utilities with unknown modifier don't compile If you used `text-sm/foobar`, then this would generate: ```css .text-sm\/foobar { font-size: var(--text-sm); } ``` Even if the `/foobar` is not really used. This fixes that by ensuring that if a modifier is used, but doesn't resolve, that it does not generate any CSS. --- packages/tailwindcss/src/utilities.test.ts | 56 +++++++++++++--------- packages/tailwindcss/src/utilities.ts | 6 +++ 2 files changed, 39 insertions(+), 23 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 9ecf38882316..cbe1131462a5 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -15121,29 +15121,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..7076dcd4b707 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -4043,6 +4043,8 @@ export function createUtilities(theme: Theme) { if (modifier) { return [decl('font-size', value), decl('line-height', modifier)] } + + return null } return [decl('font-size', value)] @@ -4086,6 +4088,10 @@ export function createUtilities(theme: Theme) { modifier = `calc(${multiplier} * ${candidate.modifier.value})` } + if (!modifier) { + return null + } + let declarations = [decl('font-size', fontSize)] modifier && declarations.push(decl('line-height', modifier)) return declarations From b0f4e0f751d7d399b1ddfe163bd2345bc53d870b Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 27 Jan 2025 13:26:04 +0100 Subject: [PATCH 2/4] ensure `text-*/none` can be used `leading-none` is a hardcoded value, and is not coming from the `@theme`. This means that this is the only modifier value you can't use with a `text-*` utility. E.g.: `text-sm/none` will not have a `line-height: 1;` attached. --- packages/tailwindcss/src/utilities.test.ts | 20 ++++++++++++++++++++ packages/tailwindcss/src/utilities.ts | 10 ++++++++++ 2 files changed, 30 insertions(+) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index cbe1131462a5..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; } diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 7076dcd4b707..66caeb4ee006 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -4040,6 +4040,11 @@ 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)] } @@ -4088,6 +4093,11 @@ 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 } From 5e3d23f8bed8251d500fe51591526edd3ba3cc16 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 27 Jan 2025 13:31:22 +0100 Subject: [PATCH 3/4] update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c86bbd08a00..3df2c0831c40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,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 From f112350aaa294de000486d6daa6bc7764a4d714a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 27 Jan 2025 13:32:07 +0100 Subject: [PATCH 4/4] fix typo --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3df2c0831c40..f82411ac8b05 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -332,7 +332,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))