Ensure font-stretch utilities only accepts positive integer bare va…

…lues (#14670)

This PR fixes an issue where bare values in the `font-stretch` utility
such as `font-stretch-50.5%` compiled. But for bare values, we want
these values to be positive integers only so that we don't have too many
special characters.

If you want to use `50.5%`, you can still use `font-stretch-[50.5%]` as
a utility.

CHANGELOG.md

@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `boxShadow` and `animation` theme keys in JS config files are accessible under `--shadow-*` and `--animate-*` using the `theme()` function ([#14642](https://github.com/tailwindlabs/tailwindcss/pull/14642))
 - Ensure all theme keys with new names are also accessible under their old names when using the `theme()` function with the legacy dot notation syntax ([#14642](https://github.com/tailwindlabs/tailwindcss/pull/14642))
 - Ensure `var(…)` can be used as the opacity value inside the `theme([path] / [modifier])` function ([#14653](https://github.com/tailwindlabs/tailwindcss/pull/14653))
+- Ensure `font-stretch` utilities only accepts positive integer bare values ([#14670](https://github.com/tailwindlabs/tailwindcss/pull/14670))
 - _Upgrade (experimental)_: Ensure CSS before a layer stays unlayered when running codemods ([#14596](https://github.com/tailwindlabs/tailwindcss/pull/14596))
 - _Upgrade (experimental)_: Resolve issues where some prefixed candidates were not properly migrated ([#14600](https://github.com/tailwindlabs/tailwindcss/pull/14600))
 

packages/tailwindcss/src/utilities.test.ts

@@ -11877,6 +11877,7 @@ test('font-stretch', async () => {
       'font-stretch-20%',
       'font-stretch-50',
       'font-stretch-400%',
+      'font-stretch-50.5%',
       'font-stretch-potato',
       'font-stretch-ultra-expanded/foo',
       'font-stretch-50%/foo',

packages/tailwindcss/src/utilities.ts

@@ -3146,6 +3146,7 @@ export function createUtilities(theme: Theme) {
     handleBareValue: ({ value }) => {
       if (!value.endsWith('%')) return null
       let num = Number(value.slice(0, -1))
+      if (!isPositiveInteger(num)) return null
       // 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