@pandacss/language-server 0.0.0-dev-20230607205019

package/index.ts

@@ -0,0 +1 @@
+export * from './src'

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@pandacss/language-server",
+  "displayName": "Panda CSS",
+  "description": "🐼 The official Panda language server",
+  "version": "0.0.0-dev-20230607205019",
+  "main": "./dist/index.js",
+  "repository": {
+    "url": "https://github.com/chakra-ui/panda",
+    "directory": "packages/extension/language-server"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/base-64": "^1.0.0",
+    "@types/node": "20.2.5",
+    "@types/utf8": "^3.0.1",
+    "base-64": "^1.0.0",
+    "color2k": "^2.0.2",
+    "lil-fp": "1.4.5",
+    "postcss": "^8.4.24",
+    "prettier": "^2.8.8",
+    "satori": "^0.10.1",
+    "ts-morph": "18.0.0",
+    "ts-pattern": "4.3.0",
+    "tsup": "6.7.0",
+    "typescript": "^5.1.3",
+    "utf8": "^3.0.0",
+    "vscode-languageserver": "^8.1.0",
+    "vscode-languageserver-textdocument": "^1.0.8",
+    "vscode-uri": "^3.0.7",
+    "@pandacss/core": "0.0.0-dev-20230607205019",
+    "@pandacss/extractor": "0.0.0-dev-20230607205019",
+    "@pandacss/node": "0.0.0-dev-20230607205019",
+    "@pandacss/shared": "0.0.0-dev-20230607205019",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230607205019",
+    "@pandacss/types": "0.0.0-dev-20230607205019",
+    "@pandacss/extension-shared": "^0.0.0-dev-20230607205019"
+  },
+  "dependencies": {
+    "fast-glob": "^3.2.12"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs --minify -d dist --clean --shims",
+    "dev": "tsup src/index.ts --watch --format cjs -d dist --shims",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/builder-resolver.ts

@@ -0,0 +1,82 @@
+import { Builder } from '@pandacss/node'
+import path from 'path'
+
+/**
+ * - Calls builder.setup() for the closest config file to the given filepath
+ * - Keep track of all the config files and their builders
+ * - Share the setup promise so it can be awaited anywhere
+ */
+export class BuilderResolver {
+  private builderByConfigDirpath = new Map<string, Builder>()
+  private synchronizingByConfigDirpath = new Map<string, Promise<void> | false>()
+
+  private configDirpathList = new Set<string>()
+  private configDirPathByFilepath = new Map<string, string>()
+  private configPathByDirpath = new Map<string, string>()
+  private _onSetup: ((args: { configPath: string }) => void) | undefined
+
+  findConfigDirpath<T>(filepath: string, onFound: (configDirPath: string, configPath: string) => T) {
+    const cachedDir = this.configDirPathByFilepath.get(filepath)
+    if (cachedDir) {
+      return onFound(cachedDir, this.configPathByDirpath.get(cachedDir)!)
+    }
+
+    const dirpath = path.dirname(filepath)
+
+    for (const configDirpath of this.configDirpathList) {
+      if (dirpath.startsWith(configDirpath)) {
+        this.configDirPathByFilepath.set(filepath, configDirpath)
+        return onFound(configDirpath, this.configPathByDirpath.get(configDirpath)!)
+      }
+    }
+  }
+
+  get(filepath: string) {
+    return this.findConfigDirpath(filepath, (configDirpath) => this.builderByConfigDirpath.get(configDirpath))
+  }
+
+  isContextSynchronizing(filepath: string) {
+    return this.findConfigDirpath(filepath, (configDirpath) => this.synchronizingByConfigDirpath.get(configDirpath))
+  }
+
+  create(configPath: string) {
+    const builder = new Builder()
+
+    const dirpath = path.dirname(configPath)
+    this.configDirPathByFilepath.set(configPath, dirpath)
+    this.builderByConfigDirpath.set(dirpath, builder)
+    this.configDirpathList.add(dirpath)
+    this.configPathByDirpath.set(dirpath, configPath)
+
+    return this
+  }
+
+  async setup(filepath: string) {
+    return this.findConfigDirpath(filepath, async (configDirpath, configPath) => {
+      const builder = this.builderByConfigDirpath.get(configDirpath)
+      if (!builder) {
+        return
+      }
+
+      const current = this.synchronizingByConfigDirpath.get(configDirpath)
+      if (current) {
+        return current
+      }
+
+      const synchronizing = builder.setup({ configPath })
+      this.synchronizingByConfigDirpath.set(configDirpath, synchronizing)
+
+      synchronizing.finally(() => {
+        this.synchronizingByConfigDirpath.set(configDirpath, false)
+
+        this._onSetup?.({ configPath })
+      })
+
+      return synchronizing
+    })
+  }
+
+  onSetup(callback: (args: { configPath: string }) => void) {
+    this._onSetup = callback
+  }
+}

package/src/capabilities.ts

@@ -0,0 +1,25 @@
+import { type ServerCapabilities, TextDocumentSyncKind } from 'vscode-languageserver'
+
+export const serverCapabilities: ServerCapabilities = {
+  textDocumentSync: TextDocumentSyncKind.Incremental,
+  inlayHintProvider: {
+    resolveProvider: false,
+  },
+  workspace: {
+    workspaceFolders: {
+      supported: true,
+      changeNotifications: true,
+    },
+  },
+
+  completionProvider: {
+    resolveProvider: true,
+    completionItem: {
+      labelDetailsSupport: true,
+    },
+  },
+  definitionProvider: false,
+  hoverProvider: true,
+  colorProvider: true,
+  inlineValueProvider: true,
+}

package/src/features/color-hints.ts

@@ -0,0 +1,68 @@
+import { ColorInformation } from 'vscode-languageserver'
+import type { PandaExtension } from '../index'
+import { color2kToVsCodeColor } from '../tokens/color2k-to-vscode-color'
+import { tryCatch } from 'lil-fp/func'
+import { onError } from '../tokens/error'
+
+export function registerColorHints(extension: PandaExtension) {
+  const { connection, documents, documentReady, parseSourceFile, getFileTokens, getPandaSettings } = extension
+
+  connection.onDocumentColor(
+    tryCatch(async (params) => {
+      const settings = await getPandaSettings()
+      if (!settings['color-hints.enabled']) return
+
+      await documentReady('🐼 onDocumentColor')
+
+      const doc = documents.get(params.textDocument.uri)
+      if (!doc) {
+        return []
+      }
+
+      const ctx = extension.getContext()
+      if (!ctx) return []
+
+      const parserResult = parseSourceFile(doc)
+      if (!parserResult) {
+        return []
+      }
+
+      const colors: ColorInformation[] = []
+
+      getFileTokens(doc, parserResult, (match) => {
+        const isColor = match.kind === 'token' && match.token.extensions?.vscodeColor
+        if (!isColor) return
+
+        // Add 1 color hint for each condition
+        if (match.token.extensions.conditions) {
+          if (settings['color-hints.semantic-tokens.enabled']) {
+            Object.values(match.token.extensions.conditions).forEach((value) => {
+              const [tokenRef] = ctx.tokens.getReferences(value)
+              const color = color2kToVsCodeColor(tokenRef.value)
+              if (!color) return
+
+              colors.push({ color, range: match.range as any })
+            })
+          }
+
+          return
+        }
+
+        colors.push({
+          color: match.token.extensions.vscodeColor,
+          range: match.range as any,
+        })
+      })
+
+      return colors
+    }, onError),
+  )
+
+  connection.onColorPresentation(() => {
+    return []
+  })
+
+  connection.onDidChangeConfiguration(async (_change) => {
+    connection.sendNotification('$/clear-colors')
+  })
+}

package/src/features/completion.ts

@@ -0,0 +1,34 @@
+import { tryCatch } from 'lil-fp/func'
+import type { PandaExtension } from '../index'
+import { onError } from '../tokens/error'
+
+export function registerCompletion(extension: PandaExtension) {
+  const { connection, documents, documentReady, getClosestCompletionList, getPandaSettings } = extension
+
+  // This handler provides the initial list of the completion items.
+  connection.onCompletion(
+    tryCatch(async (params) => {
+      const isEnabled = await getPandaSettings('completions.enabled')
+      if (!isEnabled) return
+
+      await documentReady('✅ onCompletion')
+
+      const doc = documents.get(params.textDocument.uri)
+      if (!doc) {
+        return
+      }
+
+      // TODO recipe
+      // TODO token(xxx.yyy.zzz) paths in strings
+      const matches = await getClosestCompletionList(doc, params.position)
+      if (!matches?.length) {
+        return
+      }
+
+      return matches
+    }, onError),
+  )
+
+  // This handler resolves additional information for the item selected in the completion list.
+  connection.onCompletionResolve((item) => item)
+}

package/src/features/diagnostics.ts

@@ -0,0 +1,93 @@
+import { Diagnostic, DiagnosticSeverity } from 'vscode-languageserver'
+import { TextDocument } from 'vscode-languageserver-textdocument'
+import { type PandaExtension } from '../index'
+import { tryCatch } from 'lil-fp/func'
+import { onError } from '../tokens/error'
+
+export function registerDiagnostics(context: PandaExtension) {
+  const {
+    connection,
+    debug,
+    documents,
+    documentReady,
+    loadPandaContext,
+    getContext,
+    parseSourceFile,
+    getFileTokens,
+    getPandaSettings,
+  } = context
+
+  const updateDocumentDiagnostics = tryCatch(async function (doc: TextDocument) {
+    const settings = await getPandaSettings()
+
+    if (!settings['diagnostics.enabled']) {
+      // this allows us to clear diagnostics
+      return connection.sendDiagnostics({
+        uri: doc.uri,
+        version: doc.version,
+        diagnostics: [],
+      })
+    }
+
+    debug(`Update diagnostics for ${doc.uri}`)
+
+    const diagnostics: Diagnostic[] = []
+    const parserResult = parseSourceFile(doc)
+
+    if (!parserResult) {
+      // this allows us to clear diagnostics
+      return connection.sendDiagnostics({
+        uri: doc.uri,
+        version: doc.version,
+        diagnostics: [],
+      })
+    }
+
+    getFileTokens(doc, parserResult, (match) => {
+      if (
+        match.kind === 'token' &&
+        match.token.extensions.kind === 'invalid-token-path' &&
+        settings['diagnostics.invalid-token-path']
+      ) {
+        diagnostics.push({
+          message: `🐼 Invalid token path`,
+          range: match.range,
+          severity: DiagnosticSeverity.Error,
+          code: match.token.name,
+        })
+      }
+    })
+
+    connection.sendDiagnostics({
+      uri: doc.uri,
+      version: doc.version,
+      diagnostics,
+    })
+  }, onError)
+
+  // Update diagnostics on document change
+  documents.onDidChangeContent(async (params) => {
+    await documentReady('🐼 diagnostics - onDidChangeContent')
+
+    // await when the server starts, then just get the context
+    if (!getContext()) {
+      await loadPandaContext(params.document.uri)
+    }
+
+    if (!getContext()) return
+
+    updateDocumentDiagnostics(params.document)
+  })
+
+  // Update diagnostics when watched file changes
+  connection.onDidChangeWatchedFiles(async (_change) => {
+    await documentReady('🐼 diagnostics - onDidChangeWatchedFiles')
+
+    const ctx = getContext()
+    if (!ctx) return
+
+    // Update all opened documents diagnostics
+    const docs = documents.all()
+    docs.forEach((doc) => updateDocumentDiagnostics(doc))
+  })
+}

package/src/features/hover.ts

@@ -0,0 +1,79 @@
+import { type PandaExtension } from '../index'
+import { getMarkdownCss, nodeRangeToVsCodeRange, printTokenValue } from '../tokens/utils'
+import { renderTokenColorPreview } from '../tokens/render-token-color-preview'
+import { generateKeyframeCss } from '../tokens/generate-keyframe-css'
+import { tryCatch } from 'lil-fp/func'
+import { onError } from '../tokens/error'
+
+export function registerHover(extension: PandaExtension) {
+  const { connection, documentReady, documents, getClosestToken, getClosestInstance, getPandaSettings } = extension
+
+  connection.onHover(
+    tryCatch(async (params) => {
+      const settings = await getPandaSettings()
+      if (!settings['hovers.enabled']) return
+
+      await documentReady('🐼 onHover')
+
+      const ctx = extension.getContext()
+      if (!ctx) return
+
+      const doc = documents.get(params.textDocument.uri)
+      if (!doc) {
+        return
+      }
+
+      if (settings['hovers.tokens.enabled']) {
+        // TODO recipe
+        const tokenMatch = getClosestToken(doc, params.position)
+        if (tokenMatch) {
+          if (tokenMatch.kind === 'token') {
+            const { token } = tokenMatch
+
+            const contents = [printTokenValue(token, settings)] as any[]
+            if (settings['hovers.tokens.css-preview.enabled']) {
+              const css = getMarkdownCss(ctx, { [tokenMatch.propName]: token.value }, settings).raw
+              contents.push({ language: 'css', value: css })
+            }
+
+            const category = token.extensions.category
+
+            if (category === 'colors' && settings['hovers.semantic-colors.enabled']) {
+              const preview = await renderTokenColorPreview(ctx, token)
+              if (preview) {
+                contents.push(preview)
+              }
+            }
+
+            if (category === 'animations' && token.extensions.prop) {
+              const keyframeCss = generateKeyframeCss(ctx, token.extensions.prop)
+              if (keyframeCss) {
+                contents.push({ language: 'css', value: keyframeCss })
+              }
+            }
+
+            return { contents, range: tokenMatch.range }
+          }
+
+          if (tokenMatch.kind === 'condition' && settings['hovers.conditions.enabled']) {
+            const { condition, propValue, propName } = tokenMatch
+            const css = getMarkdownCss(ctx, { [propName]: propValue }, settings).raw
+
+            return {
+              contents: [`🐼 \`${condition.value}\``, { language: 'css', value: css }],
+              range: tokenMatch.range,
+            }
+          }
+        }
+      }
+
+      if (settings['hovers.instances.enabled']) {
+        const instanceMatch = getClosestInstance(doc, params.position)
+        if (instanceMatch && instanceMatch.kind === 'styles') {
+          const range = nodeRangeToVsCodeRange(instanceMatch.props.getRange())
+          return { contents: getMarkdownCss(ctx, instanceMatch.styles, settings).withCss, range }
+        }
+      }
+    }, onError),
+  )
+}

package/src/features/index.ts

@@ -0,0 +1,5 @@
+export * from './color-hints'
+export * from './completion'
+export * from './inlay-hints'
+export * from './hover'
+export * from './diagnostics'

package/src/features/inlay-hints.ts

@@ -0,0 +1,61 @@
+import { InlayHint, InlayHintKind, type InlayHintParams } from 'vscode-languageserver'
+import { type PandaExtension } from '..'
+import { printTokenValue } from '../tokens/utils'
+import { tryCatch } from 'lil-fp/func'
+import { onError } from '../tokens/error'
+
+export function registerInlayHints(context: PandaExtension) {
+  const {
+    connection,
+    documents,
+    documentReady,
+    loadPandaContext,
+    getContext,
+    parseSourceFile,
+    getFileTokens,
+    getPandaSettings,
+  } = context
+
+  connection.languages.inlayHint.on(
+    tryCatch(async (params: InlayHintParams) => {
+      const settings = await getPandaSettings()
+      if (!settings['inlay-hints.enabled']) return
+
+      await documentReady('🐼 inlay hints')
+
+      // await when the server starts, then just get the context
+      if (!getContext()) {
+        await loadPandaContext(params.textDocument.uri)
+      }
+
+      const doc = documents.get(params.textDocument.uri)
+      if (!doc) {
+        return []
+      }
+
+      const parserResult = parseSourceFile(doc)
+      if (!parserResult) return
+
+      const inlayHints = [] as InlayHint[]
+
+      getFileTokens(doc, parserResult, (match) => {
+        if (
+          match.kind === 'token' &&
+          match.token.extensions.kind !== 'color' &&
+          match.token.extensions.kind !== 'semantic-color' &&
+          match.token.extensions.kind !== 'native-color' &&
+          match.token.extensions.kind !== 'invalid-token-path'
+        ) {
+          inlayHints.push({
+            position: match.range.end,
+            label: printTokenValue(match.token, settings),
+            kind: InlayHintKind.Type,
+            paddingLeft: true,
+          })
+        }
+      })
+
+      return inlayHints
+    }, onError),
+  )
+}

package/src/index.ts

@@ -0,0 +1,130 @@
+import {
+  createConnection,
+  TextDocuments,
+  ProposedFeatures,
+  type ServerRequestHandler,
+} from 'vscode-languageserver/node'
+import { TextDocument } from 'vscode-languageserver-textdocument'
+import { setupBuilder } from './setup-builder'
+import { setupTokensHelpers } from './tokens/setup-tokens-helpers'
+import * as features from './features'
+
+// Create a connection for the server, using Node's IPC as a transport.
+// Also include all preview / proposed LSP features.
+const original = createConnection(ProposedFeatures.all)
+
+// Wrap the connection in a proxy to be able to register multiple handlers for the same event
+// ex: onDidChangeWatchedFiles
+const connection = createConnectionProxy() as typeof original
+
+// Create a simple text document manager.
+const documents = new TextDocuments(TextDocument)
+
+let isDebug = false
+
+// Deferred promise to wait for extension to have resolved all the workspaces configs
+let resolveDeferred: (value?: unknown) => void
+const deferred = new Promise((resolve) => {
+  resolveDeferred = resolve
+})
+
+// Initialize extension.
+const setup = setupBuilder(connection, documents, {
+  onDidChangeConfiguration: (settings) => {
+    isDebug = settings['debug.enabled'] ?? false
+  },
+  onReady() {
+    resolveDeferred()
+  },
+})
+
+// Most of the tokens retrieval logic is shared between features
+const tokensHelpers = setupTokensHelpers(setup)
+
+/**
+ * Debug message helper
+ */
+function debug(message: string) {
+  isDebug && connection.console.log(message)
+}
+
+/**
+ * 1 - wait for the extension to have resolved all the workspaces configs before doing anything
+ * 2 - Check await until tokens are synchronized if a synchronization process is happening.
+ *
+ * should be used AFTER checking that the feature is enabled through settings
+ * and BEFORE getting the current context
+ */
+async function documentReady(step: string) {
+  // wait for the extension to have resolved all the workspaces configs before doing anything
+  await deferred
+
+  try {
+    if (setup.isSynchronizing()) {
+      await setup.isSynchronizing()
+    }
+
+    debug(step)
+  } catch (error) {
+    connection.console.error('error on step ' + step)
+    connection.console.error(error as any)
+  }
+}
+
+/**
+ * Extension context to be injected into features.
+ */
+const extension = {
+  connection,
+  documents,
+  debug,
+  documentReady,
+  ...setup,
+  ...tokensHelpers,
+} as const
+
+/**
+ * Register each language server feature with extension context.
+ * wait for the extension to have resolved all the workspaces configs before doing anything
+ */
+Object.entries(features).forEach(([key, registerFeature]) => {
+  debug(`🐼 Feature: ${key}`)
+  registerFeature(extension)
+})
+
+export type PandaExtension = typeof extension
+
+type EventKeys<T> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => any ? (K extends `on${string}` ? K : never) : never
+}[keyof T]
+type ConnectionEvents = EventKeys<typeof original>
+
+function createConnectionProxy(): Pick<typeof original, ConnectionEvents> {
+  const ignoredEvents = ['onNotification', 'onRequest', 'onInitialize']
+  const eventMap = new Map<string, any[]>()
+
+  return new Proxy(original, {
+    get(target, prop) {
+      if (typeof prop === 'string' && prop.startsWith('on') && !ignoredEvents.includes(prop)) {
+        const handlers = eventMap.get(prop) ?? []
+        eventMap.set(prop, handlers)
+
+        // @ts-ignore
+        target[prop].call(target, (...args: any[]) => {
+          let result
+          handlers.forEach((handler) => {
+            result = handler(...args)
+          })
+
+          return result
+        })
+        return (handler: ServerRequestHandler<any, any, any, any>) => {
+          handlers.push(handler)
+        }
+      }
+
+      // @ts-ignore
+      return target[prop]
+    },
+  })
+}