Fix missing space around - when using % regression (#18289)

This PR fixes a regression we shipped in v4.1.9, when using arbitrary
values and injecting spaces around operator.

When you use `w-[calc(100%-var(--foo))]`, you expect that this generates
valid CSS:

```css
width: calc(100% - var(--foo));
```

But due to a regression, we generated:

```css
width: calc(100%-var(--foo));
```

Which is invalid CSS.

This is because the algorithm we used to know when we had to inject a
space around the `-` didn't take the `%` sign into account.

We also didn't handle uppercase units like `123PX` properly. This PR
fixes both issues.

## Test plan

1. Added a regression test for the `%`
2. Added a regression test for uppercase units like `123PX`

Fixes: #18288

Author: RobinMalfait

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix missing space around `-` when using `%` ([#18289](https://github.com/tailwindlabs/tailwindcss/pull/18289))
 
 ## [4.1.9] - 2025-06-11
 

packages/tailwindcss/src/utils/decode-arbitrary-value.test.ts

@@ -84,6 +84,12 @@ describe('adds spaces around math operators', () => {
     ['calc(theme(spacing.foo-2))', 'calc(theme(spacing.foo-2))'],
     ['calc(theme(spacing.foo-bar))', 'calc(theme(spacing.foo-bar))'],
 
+    // With percentages
+    ['calc(100%-var(--foo))', 'calc(100% - var(--foo))'],
+
+    // With uppercase units
+    ['calc(100PX-theme(spacing.1))', 'calc(100PX - theme(spacing.1))'],
+
     // Preserving CSS keyword tokens like fit-content without splitting around hyphens in complex expressions
     ['min(fit-content,calc(100dvh-4rem))', 'min(fit-content, calc(100dvh - 4rem))'],
     [

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

@@ -1,5 +1,7 @@
 const LOWER_A = 0x61
 const LOWER_Z = 0x7a
+const UPPER_A = 0x41
+const UPPER_Z = 0x5a
 const LOWER_E = 0x65
 const UPPER_E = 0x45
 const ZERO = 0x30
@@ -12,6 +14,7 @@ const OPEN_PAREN = 0x28
 const CLOSE_PAREN = 0x29
 const COMMA = 0x2c
 const SPACE = 0x20
+const PERCENT = 0x25
 
 const MATH_FUNCTIONS = [
   'calc',
@@ -62,7 +65,12 @@ export function addWhitespaceAroundMathOperators(input: string) {
 
     // If we saw a number before, and we see normal a-z character, then we
     // assume this is a value such as `123px`
-    else if (valuePos !== null && char >= LOWER_A && char <= LOWER_Z) {
+    else if (
+      valuePos !== null &&
+      (char === PERCENT ||
+        (char >= LOWER_A && char <= LOWER_Z) ||
+        (char >= UPPER_A && char <= UPPER_Z))
+    ) {
       valuePos = i
     }