Disallow negative bare values

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Don't override explicit `leading-*`, `tracking-*`, or `font-{weight}` utilities with font-size utility defaults ([#14403](https://github.com/tailwindlabs/tailwindcss/pull/14403))
+- Disallow negative bare values in core utilities and variants ([#14453](https://github.com/tailwindlabs/tailwindcss/pull/14453))
 
 ## [4.0.0-alpha.24] - 2024-09-11
 

packages/tailwindcss/src/compat/default-theme.ts

@@ -1,4 +1,5 @@
 import type { NamedUtilityValue } from '../candidate'
+import { isPositiveInteger } from '../utils/infer-data-type'
 import { segment } from '../utils/segment'
 import colors from './colors'
 import type { UserConfig } from './config/types'
@@ -13,44 +14,44 @@ function bareValues(fn: (value: NamedUtilityValue) => string | undefined) {
 }
 
 let bareIntegers = bareValues((value) => {
-  if (!Number.isNaN(Number(value.value))) {
+  if (isPositiveInteger(value.value)) {
     return value.value
   }
 })
 
 let barePercentages = bareValues((value: NamedUtilityValue) => {
-  if (!Number.isNaN(Number(value.value))) {
+  if (isPositiveInteger(value.value)) {
     return `${value.value}%`
   }
 })
 
 let barePixels = bareValues((value: NamedUtilityValue) => {
-  if (!Number.isNaN(Number(value.value))) {
+  if (isPositiveInteger(value.value)) {
     return `${value.value}px`
   }
 })
 
 let bareMilliseconds = bareValues((value: NamedUtilityValue) => {
-  if (!Number.isNaN(Number(value.value))) {
+  if (isPositiveInteger(value.value)) {
     return `${value.value}ms`
   }
 })
 
 let bareDegrees = bareValues((value: NamedUtilityValue) => {
-  if (!Number.isNaN(Number(value.value))) {
+  if (isPositiveInteger(value.value)) {
     return `${value.value}deg`
   }
 })
 
 let bareAspectRatio = bareValues((value) => {
   if (value.fraction === null) return
   let [lhs, rhs] = segment(value.fraction, '/')
-  if (!Number.isInteger(Number(lhs)) || !Number.isInteger(Number(rhs))) return
+  if (!isPositiveInteger(lhs) || !isPositiveInteger(rhs)) return
   return value.fraction
 })
 
 let bareRepeatValues = bareValues((value) => {
-  if (!Number.isNaN(Number(value.value))) {
+  if (isPositiveInteger(Number(value.value))) {
     return `repeat(${value.value}, minmax(0, 1fr))`
   }
 })