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.

Author: KrisBraun

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",

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('')
 })
 

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%'],
     },
   ])