Only compile arbitrary values ending in ] (#15503)

This PR ensures that if you are using an arbitrary value such as
`bg-[red` that it only compiles if it's a properly closed arbitrary
value.

Currently what happens is that it assumes the `]` is there, and cuts it
off. This then results in the `bg-[red` to be compiled as:

```css
.bg-\[red {
  background-color: re;
}
```

Note how the `d` in `red` is cut off. That's the assumption that the `]`
is there.

This PR fixes that by ensuring that the arbitrary value is properly
closed.

Fixes: #15484

Author: RobinMalfait

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Don’t detect arbitrary properties when preceded by an escape ([#15456](https://github.com/tailwindlabs/tailwindcss/pull/15456))
 - Fix incorrectly named `bg-round` and `bg-space` utilities to `bg-repeat-round` to `bg-repeat-space` ([#15462](https://github.com/tailwindlabs/tailwindcss/pull/15462))
 - Fix `inset-shadow-*` suggestions in IntelliSense ([#15471](https://github.com/tailwindlabs/tailwindcss/pull/15471))
+- Only compile arbitrary values ending in `]` ([#15503](https://github.com/tailwindlabs/tailwindcss/pull/15503))
 
 ### Changed
 

packages/tailwindcss/src/candidate.test.ts

@@ -540,6 +540,13 @@ it('should parse a utility with an arbitrary value', () => {
   `)
 })
 
+it('should not parse a utility with an incomplete arbitrary value', () => {
+  let utilities = new Utilities()
+  utilities.functional('bg', () => [])
+
+  expect(run('bg-[#0088cc', { utilities })).toMatchInlineSnapshot(`[]`)
+})
+
 it('should parse a utility with an arbitrary value with parens', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])

packages/tailwindcss/src/candidate.ts

@@ -438,6 +438,9 @@ export function* parseCandidate(input: string, designSystem: DesignSystem): Iter
       let valueIsArbitrary = startArbitraryIdx !== -1
 
       if (valueIsArbitrary) {
+        // Arbitrary values must end with a `]`.
+        if (value[value.length - 1] !== ']') return
+
         let arbitraryValue = decodeArbitraryValue(value.slice(startArbitraryIdx + 1, -1))
 
         // Extract an explicit typehint if present, e.g. `bg-[color:var(--my-var)])`