From 58388de9f5ddd24ac74b9dd6f9f9921524101a45 Mon Sep 17 00:00:00 2001
From: Alexandre Stahmer <47224540+astahmer@users.noreply.github.com>
Date: Fri, 8 Mar 2024 14:17:54 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20validation=20issue=20when=20using=20colo?=
 =?UTF-8?q?r=20opacity=20modifier=20in=20config=20tok=E2=80=A6=20(#2326)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix: validation issue when using color opacity modifier in config tokens/semanticTokens
---
 .changeset/shaggy-carrots-smile.md            | 45 +++++++++++++++++++
 .../config/__tests__/validate-config.test.ts  | 34 ++++++++++++++
 .../validation/validate-token-references.ts   |  6 ++-
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/shaggy-carrots-smile.md

diff --git a/.changeset/shaggy-carrots-smile.md b/.changeset/shaggy-carrots-smile.md
new file mode 100644
index 000000000..8aea7398a
--- /dev/null
+++ b/.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`
diff --git a/packages/config/__tests__/validate-config.test.ts b/packages/config/__tests__/validate-config.test.ts
index 46d8de564..241705f5f 100644
--- a/packages/config/__tests__/validate-config.test.ts
+++ b/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`)
+  })
 })
diff --git a/packages/config/src/validation/validate-token-references.ts b/packages/config/src/validation/validate-token-references.ts
index 6133ddf7b..bc5506292 100644
--- a/packages/config/src/validation/validate-token-references.ts
+++ b/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)