feat(language-server): improved token parsing on utilities (#69)

Author: cgatian

.changeset/heavy-kiwis-clap.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/language-server': minor
+---
+
+improved token parsing for utilities

packages/language-server/__tests__/get-token.test.ts

@@ -14,7 +14,27 @@ test('zIndex: 1', () => {
 
 test('margin: 2', () => {
   const ctx = createContext()
-  expect(getTokenFromPropValue(ctx, 'margin', '2')).toMatchInlineSnapshot(`undefined`)
+  expect(getTokenFromPropValue(ctx, 'margin', '2')).toMatchInlineSnapshot(`
+    _Token {
+      "description": undefined,
+      "extensions": {
+        "category": "spacing",
+        "condition": "base",
+        "pixelValue": "8px",
+        "prop": "2",
+        "var": "--spacing-2",
+        "varRef": "var(--spacing-2)",
+      },
+      "name": "spacing.2",
+      "originalValue": "0.5rem",
+      "path": [
+        "spacing",
+        "2",
+      ],
+      "type": "dimension",
+      "value": "0.5rem",
+    }
+  `)
 })
 
 test('CSS var', () => {
@@ -169,6 +189,31 @@ test('color: #fff', () => {
   `)
 })
 
+test('width: xs', () => {
+  const ctx = createContext()
+  expect(getTokenFromPropValue(ctx, 'width', 'xs')).toMatchInlineSnapshot(`
+    _Token {
+      "description": undefined,
+      "extensions": {
+        "category": "sizes",
+        "condition": "base",
+        "pixelValue": "320px",
+        "prop": "xs",
+        "var": "--sizes-xs",
+        "varRef": "var(--sizes-xs)",
+      },
+      "name": "sizes.xs",
+      "originalValue": "20rem",
+      "path": [
+        "sizes",
+        "xs",
+      ],
+      "type": undefined,
+      "value": "20rem",
+    }
+  `)
+})
+
 test('color: green', () => {
   const ctx = createContext()
   expect(getTokenFromPropValue(ctx, 'color', 'green')).toMatchInlineSnapshot(`

packages/language-server/src/tokens/get-token.ts

@@ -14,11 +14,37 @@ const getColorExtensions = (value: string, kind: string) => {
 export const getTokenFromPropValue = (ctx: PandaContext, prop: string, value: string): Token | undefined => {
   const utility = ctx.config.utilities?.[prop]
 
-  const category = typeof utility?.values === 'string' && utility?.values
-  if (!category) return
+  const potentialCategories: string[] = []
 
-  const tokenPath = [category, value].join('.')
-  const token = ctx.tokens.getByName(tokenPath)
+  if (typeof utility?.values === 'string' && utility?.values) {
+    potentialCategories.push(utility?.values)
+  }
+
+  if (typeof utility?.values === 'function' && ctx.config.theme) {
+    // Invoke the utility value function and capture categories potentially used by consumer
+    utility.values((token: string) => {
+      potentialCategories.push(token)
+    })
+  }
+
+  if (!potentialCategories.length) return
+
+  // Attempt to locate a token
+  const matchedToken = potentialCategories
+    .map((category) => {
+      return [category, value].join('.')
+    })
+    .map((tokenPath) => {
+      return {
+        token: ctx.tokens.getByName(tokenPath),
+        tokenPath,
+      }
+    })
+    .find((t) => t.token !== undefined)
+
+  const token = matchedToken?.token
+  // If token was located use the first category and value
+  const tokenPath = matchedToken?.tokenPath ?? [potentialCategories[0], value].join('.')
 
   // arbitrary value like
   // display: "block", zIndex: 1, ...