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 = { + 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)