From 5d1e48de14cd2f34a4f551853c88d2b4207c25e5 Mon Sep 17 00:00:00 2001 From: Kris Braun Date: Fri, 8 Mar 2024 13:32:45 -0500 Subject: [PATCH] Include percent sign in font-stretch utilities (#13158) Include a percent sign in `font-stretch` utilities (e.g. `font-stretch-50%` rather than `font-stretch-50`) to make the meaning of the value clearer. --- .../__snapshots__/intellisense.test.ts.snap | 20 +++++++++---------- packages/tailwindcss/src/utilities.test.ts | 14 +++++++++---- packages/tailwindcss/src/utilities.ts | 7 ++++--- 3 files changed, 24 insertions(+), 17 deletions(-) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 82db87404e19..017025da96ef 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -714,16 +714,16 @@ exports[`getClassList 1`] = ` "font-medium", "font-normal", "font-semibold", - "font-stretch-100", - "font-stretch-105", - "font-stretch-110", - "font-stretch-125", - "font-stretch-150", - "font-stretch-200", - "font-stretch-50", - "font-stretch-75", - "font-stretch-90", - "font-stretch-95", + "font-stretch-100%", + "font-stretch-105%", + "font-stretch-110%", + "font-stretch-125%", + "font-stretch-150%", + "font-stretch-200%", + "font-stretch-50%", + "font-stretch-75%", + "font-stretch-90%", + "font-stretch-95%", "font-stretch-condensed", "font-stretch-expanded", "font-stretch-extra-condensed", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 0cc4858fbd4c..64e8377f508e 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -8789,13 +8789,13 @@ test('font-style', () => { }) test('font-stretch', () => { - expect(run(['font-stretch-ultra-expanded', 'font-stretch-50', 'font-stretch-200'])) + expect(run(['font-stretch-ultra-expanded', 'font-stretch-50%', 'font-stretch-200%'])) .toMatchInlineSnapshot(` - ".font-stretch-200 { + ".font-stretch-200\\% { font-stretch: 200%; } - .font-stretch-50 { + .font-stretch-50\\% { font-stretch: 50%; } @@ -8804,7 +8804,13 @@ test('font-stretch', () => { }" `) expect( - run(['font-stretch', 'font-stretch-20', 'font-stretch-400', 'font-stretch-potato']), + run([ + 'font-stretch', + 'font-stretch-20%', + 'font-stretch-50', + 'font-stretch-400%', + 'font-stretch-potato', + ]), ).toEqual('') }) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index d13e743f399e..fbc907263a95 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -2877,17 +2877,18 @@ export function createUtilities(theme: Theme) { functionalUtility('font-stretch', { themeKeys: [], handleBareValue: ({ value }) => { - let num = Number(value) + if (!value.endsWith('%')) return null + let num = Number(value.slice(0, -1)) // Only 50-200% (inclusive) are valid: // https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch#percentage if (Number.isNaN(num) || num < 50 || num > 200) return null - return `${value}%` + return value }, handle: (value) => [decl('font-stretch', value)], }) suggest('font-stretch', () => [ { - values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'], + values: ['50%', '75%', '90%', '95%', '100%', '105%', '110%', '125%', '150%', '200%'], }, ])