Incorrect formatting of valid hyphenated values placed inside a CSS function: fit-content becomes fit - content

[rozsazoltan]

What version of Tailwind CSS are you using?

For example: v4.1.8

What build tool (or framework if it abstracts the build tool) are you using?

Tailwind Play

Reproduction URL

https://play.tailwindcss.com/kbBgEMHTsM

Describe your issue

<div class="min-h-[min(fit-content,calc(100dvh-4rem))]"></div>

The expected result would be:

.min-h-\[min\(fit-content\,calc\(100dvh-4rem\)\)\] {
  min-height: min(fit-content, calc(100dvh - 4rem));
}

Instead - since it's inside a min() function - every hyphen gets surrounded by spaces:

.min-h-\[min\(fit-content\,calc\(100dvh-4rem\)\)\] {
  min-height: min(fit - content, calc(100dvh - 4rem));
}

[rozsazoltan]

tailwindcss/packages/tailwindcss/src/utils/math-operators.ts

Lines 110 to 136 in f425720

	// Add whitespace around operators inside math functions
	else if ((char === '+' || char === '*' || char === '/' || char === '-') && formattable[0]) {
	let trimmed = result.trimEnd()
	let prev = trimmed[trimmed.length - 1]
	// If we're preceded by an operator don't add spaces
	if (prev === '+' || prev === '*' || prev === '/' || prev === '-') {
	result += char
	continue
	}
	// If we're at the beginning of an argument don't add spaces
	else if (prev === '(' || prev === ',') {
	result += char
	continue
	}
	// Add spaces only after the operator if we already have spaces before it
	else if (input[i - 1] === ' ') {
	result += `${char} `
	}
	// Add spaces around the operator
	else {
	result += ` ${char} `
	}
	}