diff --git a/CHANGELOG.md b/CHANGELOG.md index df9331a4b8ad..fc12e8684858 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/tailwindcss/src/candidate.test.ts b/packages/tailwindcss/src/candidate.test.ts index 4242b11b7164..848590a46a88 100644 --- a/packages/tailwindcss/src/candidate.test.ts +++ b/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', () => []) diff --git a/packages/tailwindcss/src/candidate.ts b/packages/tailwindcss/src/candidate.ts index 26def1bff0ee..6c15b2ba6163 100644 --- a/packages/tailwindcss/src/candidate.ts +++ b/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)])`