Revert "Add line-height modifier support to font-size utilities"

Author: RobinMalfait

CHANGELOG.md

@@ -9,7 +9,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Add `line-height` modifier support to `font-size` utilities ([#9875](https://github.com/tailwindlabs/tailwindcss/pull/9875))
 - Add standalone CLI build for 64-bit Windows on ARM (`node16-win-arm64`) ([#10001](https://github.com/tailwindlabs/tailwindcss/pull/10001))
 - [Oxide] Use `lightningcss` for nesting and vendor prefixes in PostCSS plugin ([#10399](https://github.com/tailwindlabs/tailwindcss/pull/10399))
 

src/corePlugins.js

@@ -1861,16 +1861,9 @@ export let corePlugins = {
   fontSize: ({ matchUtilities, theme }) => {
     matchUtilities(
       {
-        text: (value, { modifier }) => {
+        text: (value) => {
           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 }
@@ -1885,7 +1878,6 @@ export let corePlugins = {
       },
       {
         values: theme('fontSize'),
-        modifiers: theme('lineHeight'),
         type: ['absolute-size', 'relative-size', 'length', 'percentage'],
       }
     )

tests/getClassList.test.js

@@ -88,7 +88,6 @@ crosscheck(() => {
     let classes = context.getClassList({ includeMetadata: true })
 
     expect(classes).not.toContain('bg-red-500')
-    expect(classes).not.toContain('text-2xl')
 
     expect(classes).toContainEqual([
       'bg-red-500',
@@ -112,27 +111,6 @@ crosscheck(() => {
         ],
       },
     ])
-    expect(classes).toContainEqual([
-      'text-2xl',
-      {
-        modifiers: [
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '10',
-          'none',
-          'tight',
-          'snug',
-          'normal',
-          'relaxed',
-          'loose',
-        ],
-      },
-    ])
   })
 
   it('should generate plugin-defined utilities with modifier data when requested', () => {

tests/match-utilities.test.js

@@ -6,8 +6,8 @@ crosscheck(() => {
       content: [
         {
           raw: html`<div
-            class="test test/foo test-1/foo test-2/foo test/[foo] test-1/[foo] test-[8]/[9]"
-          ></div> `,
+            class="test test/foo test-1/foo test-2/foo test/[foo] test-1/[foo]"
+          ></div>`,
         },
       ],
       corePlugins: { preflight: false },
@@ -27,7 +27,6 @@ crosscheck(() => {
                 '1': 'one',
                 '2': 'two',
                 '1/foo': 'onefoo',
-                '[8]/[9]': 'eightnine',
               },
               modifiers: 'any',
             }
@@ -55,9 +54,6 @@ crosscheck(() => {
       .test-2\/foo {
         color: two_foo;
       }
-      .test-\[8\]\/\[9\] {
-        color: eightnine_null;
-      }
       .test\/\[foo\] {
         color: default_[foo];
       }

tests/plugins/fontSize.test.js

@@ -120,78 +120,4 @@ crosscheck(() => {
       `)
     })
   })
-
-  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-\[13px\]\/6 {
-          font-size: 13px;
-          line-height: 24px;
-        }
-        .text-\[17px\]\/\[23px\] {
-          font-size: 17px;
-          line-height: 23px;
-        }
-        .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;
-        }
-        @media (min-width: 768px) {
-          .md\:text-\[19px\]\/8 {
-            font-size: 19px;
-            line-height: 32px;
-          }
-          .md\:text-\[21px\]\/\[29px\] {
-            font-size: 21px;
-            line-height: 29px;
-          }
-          .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;
-          }
-        }
-      `)
-    })
-  })
 })