Add line-height modifier for font-size utilities (#9875)

* Add line-height modifier for font-size utilities

* Add test for arbitrary values

* Add failing test for non-configured modifier values

* Add more tests (including failing case)

* Remove unused code

* Add note + failing test

* Remove unused code

* Fix test

* Fix test

* Update changelog

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add `line-height` modifier support to `font-size` utilities ([#9875](https://github.com/tailwindlabs/tailwindcss/pull/9875))
+
 ### Fixed
 
 - Cleanup unused `variantOrder` ([#9829](https://github.com/tailwindlabs/tailwindcss/pull/9829))

src/corePlugins.js

@@ -1834,8 +1834,16 @@ export let corePlugins = {
   fontSize: ({ matchUtilities, theme }) => {
     matchUtilities(
       {
-        text: (value) => {
+        text: (value, { modifier }) => {
           let [fontSize, options] = Array.isArray(value) ? value : [value]
+
+          if (modifier) {
+            return {
+              'font-size': fontSize,
+              'line-height': modifier,
+            }
+          }
+
           let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
             ? options
             : { lineHeight: options }
@@ -1850,6 +1858,7 @@ export let corePlugins = {
       },
       {
         values: theme('fontSize'),
+        modifiers: theme('lineHeight'),
         type: ['absolute-size', 'relative-size', 'length', 'percentage'],
       }
     )

tests/match-utilities.test.js

@@ -4,7 +4,9 @@ test('match utilities with modifiers', async () => {
   let config = {
     content: [
       {
-        raw: html`<div class="test test/foo test-1/foo test-2/foo test/[foo] test-1/[foo]"></div> `,
+        raw: html`<div
+          class="test test/foo test-1/foo test-2/foo test/[foo] test-1/[foo] test-[8]/[9]"
+        ></div> `,
       },
     ],
     corePlugins: { preflight: false },
@@ -24,6 +26,7 @@ test('match utilities with modifiers', async () => {
               '1': 'one',
               '2': 'two',
               '1/foo': 'onefoo',
+              '[8]/[9]': 'eightnine',
             },
             modifiers: 'any',
           }
@@ -57,6 +60,9 @@ test('match utilities with modifiers', async () => {
     .test-1\/\[foo\] {
       color: one_[foo];
     }
+    .test-\[8\]\/\[9\] {
+      color: eightnine_null;
+    }
   `)
 })
 

tests/plugins/fontSize.test.js

@@ -119,3 +119,77 @@ test('font-size utilities can include a font-weight', () => {
     `)
   })
 })
+
+test('font-size utilities can include a line-height modifier', () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="text-sm md:text-base">
+          <div class="text-sm/6 md:text-base/7"></div>
+          <div class="text-sm/[21px] md:text-base/[33px]"></div>
+          <div class="text-[13px]/6 md:text-[19px]/8"></div>
+          <div class="text-[17px]/[23px] md:text-[21px]/[29px]"></div>
+          <div class="text-sm/999 md:text-base/000"></div>
+        </div>`,
+      },
+    ],
+    theme: {
+      fontSize: {
+        sm: ['12px', '20px'],
+        base: ['16px', '24px'],
+      },
+      lineHeight: {
+        6: '24px',
+        7: '28px',
+        8: '32px',
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .text-sm {
+        font-size: 12px;
+        line-height: 20px;
+      }
+      .text-sm\/6 {
+        font-size: 12px;
+        line-height: 24px;
+      }
+      .text-sm\/\[21px\] {
+        font-size: 12px;
+        line-height: 21px;
+      }
+      .text-\[13px\]\/6 {
+        font-size: 13px;
+        line-height: 24px;
+      }
+      .text-\[17px\]\/\[23px\] {
+        font-size: 17px;
+        line-height: 23px;
+      }
+      @media (min-width: 768px) {
+        .md\:text-base {
+          font-size: 16px;
+          line-height: 24px;
+        }
+        .md\:text-base\/7 {
+          font-size: 16px;
+          line-height: 28px;
+        }
+        .md\:text-base\/\[33px\] {
+          font-size: 16px;
+          line-height: 33px;
+        }
+        .md\:text-\[19px\]\/8 {
+          font-size: 19px;
+          line-height: 32px;
+        }
+        .md\:text-\[21px\]\/\[29px\] {
+          font-size: 21px;
+          line-height: 29px;
+        }
+      }
+    `)
+  })
+})