Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
rozsazoltan opened this issue Jun 4, 2025 · 2 comments · Fixed by #18220
Closed

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

rozsazoltan opened this issue Jun 4, 2025 · 2 comments · Fixed by #18220

Comments

@rozsazoltan
Copy link
Contributor

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 rozsazoltan mentioned this issue Jun 4, 2025
Merged
@rozsazoltan
Copy link
Contributor Author

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} `
}
}

RobinMalfait added a commit that referenced this issue Jun 10, 2025
@rozsazoltan @thecrypticace @RobinMalfait
fix: don't break CSS keywords when formatting math expressions (#18220)
aa817fb 
Fixes #18219

## Summary

In an arbitrary value, if there's a non-numeric character both before
and after a hyphen, there's no need for a space.

## Test plan

`decodeArbitraryValue` will correctly format special CSS values like
`fit-content`. I believe spaces are only necessary if there's a digit
either before or after the hyphen.

```js
decodeArbitraryValue('min(fit-content,calc(100dvh-4rem))')
```

This way, the result of the following arbitrary value will also be
correct:

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

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

---------

Co-authored-by: Jordan Pittman <[email protected]>
Co-authored-by: Robin Malfait <[email protected]>
@RobinMalfait
Copy link
Member

Hey!

This has been fixed (by you actually) by #18220 and will be available in the next release.

Thanks again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: don't break CSS keywords when formatting math expressions rozsazoltan/tailwindcss
2 participants
@RobinMalfait @rozsazoltan