fix: use replaceAll for duplicate token references in composite values (#3499)

* Initial plan

* fix: use replaceAll for duplicate token references in composite values

When the same token reference (e.g. {sizes.0.5}) appears more than once
in a composite value, String.replace() only replaces the first occurrence.
Changed to String.replaceAll() in both Token.expandReferences() and
expandReferences() utility to resolve all occurrences correctly.

Fixes #2996

Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com>
Agent-Logs-Url: https://github.com/chakra-ui/panda/sessions/45fce8e1-9a22-443c-8b3f-9565bd0190ae

* Add changeset for duplicate token references fix

Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com>
Agent-Logs-Url: https://github.com/chakra-ui/panda/sessions/6617edb1-1a07-446f-a728-a7e7fb23f177

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com>

Author: Copilot

.changeset/fix-duplicate-token-references.md

@@ -0,0 +1,15 @@
+---
+'@pandacss/token-dictionary': patch
+---
+
+Fix duplicate token references with special characters resolving incorrectly in composite values
+
+When the same token reference containing special characters (e.g. `{sizes.0.5}`) appeared more than once in a composite value, only the first occurrence was resolved correctly. The second occurrence produced a malformed CSS variable name.
+
+This was caused by `String.replace()` only replacing the first match. Changed to `String.replaceAll()` in `Token.expandReferences()` and `expandReferences()` utility.
+
+**Before (broken):**
+`--shadows-control-accent: 0 var(--sizes-0\.5) var(--sizes-0-5) rgba(92, 225, 113, 0.25)`
+
+**After (fixed):**
+`--shadows-control-accent: 0 var(--sizes-0\.5) var(--sizes-0\.5) rgba(92, 225, 113, 0.25)`

packages/token-dictionary/__tests__/expand-references.test.ts

@@ -258,3 +258,19 @@ test('expand references in value - token fn with deeply nested ref fallback', ()
     `"var(--colors-red-300, var(--colors-blue-500, var(--colors-primary, var(--colors-blue-700, var(--colors-red-500)))))"`,
   )
 })
+
+test('expand references in value - duplicate curly ref with special characters', () => {
+  const dictionary = new TokenDictionary({
+    tokens: {
+      sizes: {
+        0.5: { value: '0.125rem' },
+      },
+    },
+  })
+
+  dictionary.init()
+
+  expect(
+    dictionary.expandReferenceInValue('0 {sizes.0.5} {sizes.0.5} rgba(92, 225, 113, 0.25)'),
+  ).toMatchInlineSnapshot(`"0 var(--sizes-0\\.5) var(--sizes-0\\.5) rgba(92, 225, 113, 0.25)"`)
+})

packages/token-dictionary/__tests__/semantic-token.test.ts

@@ -1,6 +1,31 @@
 import { expect, test } from 'vitest'
 import { TokenDictionary } from '../src/dictionary'
 
+test('semantic tokens / duplicate token references with special characters', () => {
+  const dictionary = new TokenDictionary({
+    tokens: {
+      sizes: {
+        0.5: { value: '0.125rem' },
+      },
+    },
+    semanticTokens: {
+      shadows: {
+        controlAccent: {
+          value: '0 {sizes.0.5} {sizes.0.5} rgba(92, 225, 113, 0.25)',
+        },
+      },
+    },
+  })
+
+  dictionary.registerTokens()
+  dictionary.build()
+
+  const shadowToken = dictionary.allTokens.find((t) => t.name === 'shadows.controlAccent')
+  expect(shadowToken).toBeDefined()
+  // Both occurrences of {sizes.0.5} should be resolved to the same value
+  expect(shadowToken!.value).toMatchInlineSnapshot(`"0 0.125rem 0.125rem rgba(92, 225, 113, 0.25)"`)
+})
+
 test('semantic tokens / deeply nested', () => {
   const dictionary = new TokenDictionary({
     semanticTokens: {

packages/token-dictionary/src/token.ts

@@ -130,7 +130,7 @@ export class Token {
         return valueStr
       }
       const value = referenceToken.expandReferences()
-      return valueStr.replace(`{${key}}`, value)
+      return valueStr.replaceAll(`{${key}}`, value)
     }, this.value)
 
     delete this.extensions.references

packages/token-dictionary/src/utils.ts

@@ -51,7 +51,7 @@ export function expandReferences(value: string, fn: (key: string) => string) {
     }
     const expandedValue = resolved ?? esc(key)
 
-    return valueStr.replace(`{${key}}`, expandedValue)
+    return valueStr.replaceAll(`{${key}}`, expandedValue)
   }, value)
 
   if (!expanded.includes(`token(`)) return expanded