Disallow negative bare values (#14453)

Right now, it is possible to type `grid-cols--8` which maps to:

```css
/* Specificity: (0, 1, 0) */
.grid-cols--8 {
  grid-template-columns: repeat(-8, minmax(0, 1fr));
}
```

This doesn't make sense so we used this opportunity to audit all
variants and utilities and properly disallow negative bare values.
Utilities where negative values are supported still work by using the
negative utility syntax, e.g.: `-inset-4`.

Author: philipp-spiess

CHANGELOG.md

@@ -23,6 +23,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))`
   }
 })