fix: validation issue when using color opacity modifier in config tok… (

#2326)

fix: validation issue when using color opacity modifier in config tokens/semanticTokens

.changeset/shaggy-carrots-smile.md

@@ -0,0 +1,45 @@
+---
+'@pandacss/config': patch
+---
+
+Fix a false positive with the validation check that reported `Missing token` when using a color opacity modifier in
+config `tokens` or `semanticTokens`
+
+```ts
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  validation: 'warn',
+  conditions: {
+    light: '.light &',
+    dark: '.dark &',
+  },
+  theme: {
+    tokens: {
+      colors: {
+        blue: { 500: { value: 'blue' } },
+        green: { 500: { value: 'green' } },
+      },
+      opacity: {
+        half: { value: 0.5 },
+      },
+    },
+    semanticTokens: {
+      colors: {
+        secondary: {
+          value: {
+            base: 'red',
+            _light: '{colors.blue.500/32}',
+            _dark: '{colors.green.500/half}',
+          },
+        },
+      },
+    },
+  },
+})
+```
+
+Would incorrectly report:
+
+- [tokens] Missing token: `colors.green.500/half` used in `config.semanticTokens.colors.secondary`
+- [tokens] Missing token: `colors.blue.500/32` used in `config.semanticTokens.colors.secondary`

packages/config/__tests__/validate-config.test.ts

@@ -628,4 +628,38 @@ describe('validateConfig', () => {
 
     expect(validateConfig(config)).toMatchInlineSnapshot(`undefined`)
   })
+
+  test('using color opacity modifier on known color shouldnt throw', () => {
+    const config: Partial<UserConfig> = {
+      validation: 'warn',
+      conditions: {
+        light: '.light &',
+        dark: '.dark &',
+      },
+      theme: {
+        tokens: {
+          colors: {
+            blue: { 500: { value: 'blue' } },
+            green: { 500: { value: 'green' } },
+          },
+          opacity: {
+            half: { value: 0.5 },
+          },
+        },
+        semanticTokens: {
+          colors: {
+            secondary: {
+              value: {
+                base: 'red',
+                _light: '{colors.blue.500/32}', // <-- wasn't working as expected
+                _dark: '{colors.green.500/half}',
+              },
+            },
+          },
+        },
+      },
+    }
+
+    expect(validateConfig(config)).toMatchInlineSnapshot(`undefined`)
+  })
 })

packages/config/src/validation/validate-token-references.ts

@@ -14,7 +14,11 @@ export const validateTokenReferences = (
     const stack = [path]
 
     while (stack.length > 0) {
-      const currentPath = stack.pop()!
+      let currentPath = stack.pop()!
+      if (currentPath.includes('/')) {
+        const [tokenPath] = currentPath.split('/')
+        currentPath = tokenPath
+      }
 
       const value = valueAtPath.get(currentPath)