feat: add color-hints/diagnostics/inlay-hints for sva/pattern/recipes (#21)

Author: segunadebayo

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["sandbox-vite"]
 }

.changeset/khaki-paws-kneel.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/language-server': patch
+---
+
+Add support for color-hints / diagnostics / inlay-hints in `sva` definition and `pattern` usage

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "panda",
+  "name": "panda-vscode",
   "version": "0.0.1",
   "private": true,
   "description": "The repository of css panda",
   "scripts": {
     "prepare": "yarn build-fast",
-    "dev": "yarn workspaces foreach -A --exclude 'sandbox-vite' -pt run dev",
-    "build-fast": "yarn workspaces foreach -A --exclude 'sandbox-vite' -pt run build-fast",
-    "build": "yarn workspaces foreach -A --exclude 'sandbox-vite' run build",
+    "dev": "yarn workspaces foreach -pA --exclude 'sandbox-vite' --exclude 'panda-vscode' run dev",
+    "build-fast": "yarn workspaces foreach -pA --exclude 'sandbox-vite'  --exclude 'panda-vscode' run build-fast",
+    "build": "yarn workspaces foreach -A --exclude 'sandbox-vite' --exclude 'panda-vscode' run build",
     "test": "vitest",
     "lint": "eslint packages --ext .ts",
     "fmt": "prettier --write packages",

packages/language-server/src/project-helper.ts

@@ -91,6 +91,22 @@ export class ProjectHelper {
         onResult(Object.assign({}, item, { box: map.value.get('base'), data: [base] })),
       )
     })
+    parserResult.sva.forEach((item) => {
+      const map = item.box
+      if (!box.isMap(map)) return
+      return item.data.forEach(({ base }) =>
+        onResult(Object.assign({}, item, { box: map.value.get('base'), data: [base] })),
+      )
+    })
+    parserResult.pattern.forEach((set, name) => {
+      set.forEach((item) => {
+        const map = item.box
+        if (!box.isMap(map)) return
+        return item.data.forEach((obj) => {
+          onResult({ box: map, data: [obj], name, type: 'pattern' })
+        })
+      })
+    })
   }
 }
 

sandbox/vite/panda.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from '@pandacss/dev'
+import { button} from "./src/button.recipe"
 
 export default defineConfig({
   // Whether to use css reset
@@ -13,6 +14,9 @@ export default defineConfig({
   // Useful for theme customization
   theme: {
     extend: {
+      recipes: {
+        button,
+      },
       semanticTokens: {
         colors: {
           danger: {

sandbox/vite/src/App.tsx

@@ -1,12 +1,30 @@
-import { css } from '../styled-system/css'
+import { css, sva } from '../styled-system/css'
+import { button } from '../styled-system/recipes'
+import { flex } from '../styled-system/patterns'
 import './App.css'
 
+const card = sva({
+  slots: ['label', 'icon'],
+  base: {
+    label: {
+      color: 'red.200',
+    },
+    icon: {
+      fontSize: '3xl',
+    },
+  },
+})
+
+card()
+button({ size: 'sm' })
+flex({ direction: 'column', gap: 'initial', color: 'teal.300' })
+
 function App() {
   return (
     <>
       <div
         className={css({
-          color: "blue",
+          color: 'blue',
           outlineColor: 'bg',
           backgroundColor: 'bg.text',
           bgColor: 'bg',

sandbox/vite/src/button.recipe.ts

@@ -0,0 +1,14 @@
+import { defineRecipe } from "@pandacss/dev";
+
+export const button = defineRecipe({
+    base: {
+        color: "amber.200",
+    },
+    variants: {
+        size: {
+            sm: {
+                fontSize: "2xl",
+            }
+        }
+    }
+})

yarn.lock

@@ -10530,9 +10530,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"panda@workspace:.":
+"panda-vscode@workspace:.":
   version: 0.0.0-use.local
-  resolution: "panda@workspace:."
+  resolution: "panda-vscode@workspace:."
   dependencies:
     "@changesets/changelog-github": "npm:0.4.8"
     "@changesets/cli": "npm:2.26.2"