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
tailwindlabs · Jan 27, 2025 · f1221b3 · f1221b3
1 parent 6dd4c33
commit f1221b3
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 24 deletions.
diff --git 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
@@ -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,13 +14990,19 @@ test('text', async () => {
       --color-red-500: #ef4444;
       --text-sm: .875rem;
       --text-sm--line-height: 1.25rem;
+      --leading-snug: 1.375;
     }
 
     .text-sm {
       font-size: var(--text-sm);
       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
@@ -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