@pandacss/language-server 0.0.0-dev-20230607205019

package/src/setup-builder.ts

@@ -0,0 +1,252 @@
+import { Builder } from '@pandacss/node'
+import { type Connection, DidChangeConfigurationNotification, TextDocuments } from 'vscode-languageserver'
+import { TextDocument } from 'vscode-languageserver-textdocument'
+import { serverCapabilities } from './capabilities'
+import { type PandaVSCodeSettings, defaultSettings, getFlattenedSettings } from '@pandacss/extension-shared'
+import glob from 'fast-glob'
+import { uriToPath } from './uri-to-path'
+import { BuilderResolver } from './builder-resolver'
+
+const builderResolver = new BuilderResolver()
+
+const ref = {
+  settings: null as PandaVSCodeSettings | null,
+  /**
+   * current builder's context, used by most features as we can only be in one context at a time
+   * depending on the active document
+   */
+  context: null as unknown as Builder['context'],
+  synchronizing: false as Promise<void> | false,
+  //
+  activeDocumentFilepath: '',
+}
+
+let hasConfigurationCapability = false
+let hasWorkspaceFolderCapability = false
+
+/**
+ * Setup builder
+ * - panda.config detection & context loading
+ * - reload on panda.config change
+ * - make the builder.setup promise shared so it can be awaited by multiple features
+ */
+export function setupBuilder(
+  connection: Connection,
+  documents: TextDocuments<TextDocument>,
+  {
+    onDidChangeConfiguration,
+    onReady,
+  }: {
+    onReady: () => void
+    onDidChangeConfiguration: (settings: PandaVSCodeSettings) => void
+  },
+) {
+  builderResolver.onSetup(({ configPath }) => {
+    const builder = builderResolver.get(configPath)
+    if (!builder) return
+
+    const ctx = builder.context
+    if (!ctx) return
+
+    const tokenNames = Array.from(new Set(ctx.tokens.allTokens.map((token) => token.path.slice(1).join('.'))))
+    connection.sendNotification('$/panda-token-names', { configPath, tokenNames })
+  })
+
+  async function setupWorkspaceBuilders(rootPath: string) {
+    console.log('🐼 Setup workspace builders...')
+    const configPathList = await glob(`${rootPath}/**/panda.config.{ts,js,cjs,mjs}`, {
+      cwd: rootPath,
+      onlyFiles: true,
+      absolute: true,
+      ignore: ['**/node_modules/**'],
+    })
+
+    await Promise.all(
+      configPathList.map(async (configPath) => {
+        try {
+          console.log('💼 Config setup at:', configPath)
+          await builderResolver.create(configPath).setup(configPath)
+          console.log('✅ Config setup done:', configPath)
+        } catch (err) {
+          // Ignore
+          console.log('❌ Config setup failed!', configPath, err)
+        }
+      }),
+    )
+    console.log('🐼 Workspaces builders ready !')
+
+    if (configPathList.length === 1) {
+      return builderResolver.isContextSynchronizing(configPathList[0])
+    }
+  }
+
+  async function loadPandaContext(uriOrFilepath: string) {
+    const filepath = uriToPath(uriOrFilepath) ?? uriOrFilepath
+
+    try {
+      console.log('🚧 Loading context for:', filepath)
+      ref.synchronizing = builderResolver.setup(filepath)
+      console.log('✅ Loading context done:', filepath)
+    } catch (err) {
+      // Ignore
+      ref.synchronizing = false
+      console.log('❌ Loading context failed!', err)
+      return
+    }
+
+    ref.synchronizing = false
+
+    const builder = builderResolver.get(filepath)
+    if (!builder || !builder.context) return
+
+    ref.context = builder.context
+
+    return ref.context
+  }
+
+  function getClosestPandaContext(uri: string) {
+    const filepath = uriToPath(uri) ?? uri
+
+    const builder = builderResolver.get(filepath)
+    if (!builder || !builder.context) return
+
+    ref.context = builder.context
+
+    return ref.context
+  }
+
+  const getFreshPandaSettings = async () => {
+    return getFlattenedSettings((await connection.workspace.getConfiguration('panda')) ?? defaultSettings)
+  }
+
+  /**
+   * Resolve current extension settings
+   */
+  async function getPandaSettings(): Promise<PandaVSCodeSettings>
+  async function getPandaSettings<Key extends keyof PandaVSCodeSettings>(key: Key): Promise<PandaVSCodeSettings[Key]>
+  async function getPandaSettings<Key extends keyof PandaVSCodeSettings>(key?: Key) {
+    const getter = (settings: PandaVSCodeSettings) => {
+      return key ? settings[key] : settings
+    }
+
+    if (!hasConfigurationCapability) {
+      return getter(defaultSettings)
+    }
+
+    if (!ref.settings) {
+      ref.settings = await getFreshPandaSettings()
+    }
+
+    return getter(ref.settings ?? defaultSettings)
+  }
+
+  connection.onInitialize((params) => {
+    connection.console.log('🤖 Starting PandaCss LSP...')
+
+    const capabilities = params.capabilities
+
+    const { activeDocumentFilepath } = params.initializationOptions as { activeDocumentFilepath: string | undefined }
+    if (activeDocumentFilepath) {
+      ref.activeDocumentFilepath = activeDocumentFilepath
+      console.log('📄 Init Active document:', activeDocumentFilepath)
+    }
+
+    // Check context support
+    hasConfigurationCapability = !!(capabilities.workspace && !!capabilities.workspace.configuration)
+    hasWorkspaceFolderCapability = !!(capabilities.workspace && !!capabilities.workspace.workspaceFolders)
+
+    connection.onInitialized(async () => {
+      connection.console.log('⚡ Connection initialized!')
+
+      if (hasConfigurationCapability) {
+        // Register for all configuration changes.
+        connection.client.register(DidChangeConfigurationNotification.type, undefined)
+
+        ref.settings = await getFreshPandaSettings()
+        onDidChangeConfiguration(ref.settings)
+      }
+
+      if (hasWorkspaceFolderCapability) {
+        connection.workspace.onDidChangeWorkspaceFolders((_event) =>
+          connection.console.log('Workspace folder change event received.'),
+        )
+      }
+
+      const workspaceFolders = await connection.workspace.getWorkspaceFolders()
+      const validFolders = workspaceFolders?.map((folder) => uriToPath(folder.uri) || '').filter((path) => !!path)
+
+      console.log('📁 Workspace folders:', validFolders)
+      await Promise.all(validFolders?.map((folder) => setupWorkspaceBuilders(folder)) ?? [])
+
+      onReady()
+      connection.sendNotification('$/panda-lsp-ready')
+
+      if (activeDocumentFilepath) {
+        const ctx = getClosestPandaContext(activeDocumentFilepath)
+
+        if (ctx) {
+          connection.console.log(`🐼 Found panda context! ✅ at ${ctx.path}`)
+        }
+      }
+    })
+
+    return { capabilities: serverCapabilities }
+  })
+
+  connection.onNotification('$/panda-active-document-changed', (params) => {
+    console.log('📄 Active document:', ref.activeDocumentFilepath)
+    ref.activeDocumentFilepath = params.activeDocumentFilepath
+
+    const configPath = builderResolver.findConfigDirpath(ref.activeDocumentFilepath, (_, configPath) => configPath)
+    if (!configPath) return
+
+    connection.sendNotification('$/panda-doc-config-path', {
+      activeDocumentFilepath: ref.activeDocumentFilepath,
+      configPath,
+    })
+  })
+
+  connection.onRequest('$/get-config-path', ({ activeDocumentFilepath }: { activeDocumentFilepath: string }) => {
+    activeDocumentFilepath ??= ref.activeDocumentFilepath
+    if (!activeDocumentFilepath) return
+
+    return builderResolver.findConfigDirpath(activeDocumentFilepath, (_, configPath) => {
+      console.log('config path', configPath)
+      return configPath
+    })
+  })
+
+  connection.onDidChangeConfiguration(async (_change) => {
+    connection.console.log('⌛ onDidChangeConfiguration')
+
+    if (hasConfigurationCapability) {
+      ref.settings = await getFreshPandaSettings()
+      console.log('🐼 Settings changed!', ref.settings)
+      onDidChangeConfiguration(ref.settings)
+    }
+  })
+
+  connection.onDidChangeWatchedFiles(async ({ changes }) => {
+    changes.forEach(async (fileEvent) => {
+      const filepath = uriToPath(fileEvent.uri) ?? fileEvent.uri
+      connection.console.log('🔃 Reloading panda context for:' + filepath)
+      await builderResolver.setup(filepath)
+    })
+  })
+
+  documents.listen(connection)
+  connection.listen()
+
+  return {
+    getPandaSettings,
+    loadPandaContext,
+    getContext() {
+      return ref.context
+    },
+    isSynchronizing() {
+      return ref.synchronizing
+    },
+  }
+}
+
+export type PandaExtensionSetup = ReturnType<typeof setupBuilder>

package/src/tokens/color2k-to-vscode-color.ts

@@ -0,0 +1,18 @@
+import { type ColorPresentationParams } from 'vscode-languageserver'
+import { parseToRgba } from 'color2k'
+
+export const color2kToVsCodeColor = (value: string) => {
+  try {
+    const [red, green, blue, alpha] = parseToRgba(value)
+
+    const color = {
+      red: red / 255,
+      green: green / 255,
+      blue: blue / 255,
+      alpha,
+    }
+    return color as ColorPresentationParams['color']
+  } catch (e) {
+    return
+  }
+}

package/src/tokens/error.ts

@@ -0,0 +1,3 @@
+export const onError = (...args: any[]) => {
+  console.error(args)
+}

package/src/tokens/expand-token-fn.ts

@@ -0,0 +1,43 @@
+import { type Token } from '@pandacss/token-dictionary'
+
+type TokenFnMatch = { token: Token; index: number }
+const tokenRegex = /token\(([^)]+)\)/g
+
+const matchToken = (str: string, callback: (tokenPath: string, match: RegExpExecArray) => void) => {
+  let match: RegExpExecArray | null
+
+  while ((match = tokenRegex.exec(str)) != null) {
+    match[1]
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .forEach((str) => callback(str, match!))
+  }
+}
+
+/** @see packages/core/src/plugins/expand-token-fn.ts */
+export const expandTokenFn = (str: string, fn: (tokenName: string) => Token | undefined) => {
+  if (!str.includes('token(')) return []
+
+  const tokens = [] as TokenFnMatch[]
+  matchToken(str, (tokenPath, match) => {
+    const token = fn(tokenPath)
+    if (token) {
+      tokens.push({ token, index: match.index })
+    }
+  })
+
+  return tokens
+}
+
+export const extractTokenPaths = (str: string) => {
+  if (!str.includes('token(')) return []
+
+  const paths = [] as string[]
+
+  matchToken(str, (tokenPath) => {
+    paths.push(tokenPath)
+  })
+
+  return paths
+}

package/src/tokens/generate-keyframe-css.ts

@@ -0,0 +1,28 @@
+import { toCss } from '@pandacss/core'
+import postcss from 'postcss'
+import { type PandaContext } from '@pandacss/node'
+
+/** @see packages/generator/src/artifacts/css/keyframe-css.ts */
+export function generateKeyframeCss(ctx: PandaContext, keyframeName: string) {
+  const { keyframes = {} } = ctx.config.theme ?? {}
+  const root = postcss.root()
+
+  const keyframe = keyframes[keyframeName]
+  if (!keyframe) return ''
+
+  root.append(
+    postcss.atRule({
+      name: 'keyframes',
+      params: keyframeName,
+      nodes: toCss(keyframe).root.nodes,
+    }),
+  )
+
+  const rule = postcss.atRule({
+    name: 'layer',
+    params: 'tokens',
+    nodes: root.nodes,
+  })
+
+  return rule.toString()
+}

package/src/tokens/is-color.ts

@@ -0,0 +1,216 @@
+// borrow from https://github.com/princejwesley/is-css-color/blob/master/index.js
+'use strict'
+
+// every string I match against are lowercase
+const HEX_PATTERN = /^#(?:[a-f0-9]{3})?(?:[a-f0-9]{3})$/
+
+// css color names + initial + inherit + currentColor + transparent
+const CSS_COLOR_NAMES = [
+  'aliceblue',
+  'antiquewhite',
+  'aqua',
+  'aquamarine',
+  'azure',
+  'beige',
+  'bisque',
+  'black',
+  'blanchedalmond',
+  'blue',
+  'blueviolet',
+  'brown',
+  'burlywood',
+  'cadetblue',
+  'chartreuse',
+  'chocolate',
+  'coral',
+  'cornflowerblue',
+  'cornsilk',
+  'crimson',
+  'currentColor',
+  'cyan',
+  'darkblue',
+  'darkcyan',
+  'darkgoldenrod',
+  'darkgray',
+  'darkgreen',
+  'darkgrey',
+  'darkkhaki',
+  'darkmagenta',
+  'darkolivegreen',
+  'darkorange',
+  'darkorchid',
+  'darkred',
+  'darksalmon',
+  'darkseagreen',
+  'darkslateblue',
+  'darkslategray',
+  'darkslategrey',
+  'darkturquoise',
+  'darkviolet',
+  'deeppink',
+  'deepskyblue',
+  'dimgray',
+  'dimgrey',
+  'dodgerblue',
+  'firebrick',
+  'floralwhite',
+  'forestgreen',
+  'fuchsia',
+  'gainsboro',
+  'ghostwhite',
+  'gold',
+  'goldenrod',
+  'gray',
+  'green',
+  'greenyellow',
+  'grey',
+  'honeydew',
+  'hotpink',
+  'indianred',
+  'indigo',
+  'inherit',
+  'initial',
+  'ivory',
+  'khaki',
+  'lavender',
+  'lavenderblush',
+  'lawngreen',
+  'lemonchiffon',
+  'lightblue',
+  'lightcoral',
+  'lightcyan',
+  'lightgoldenrodyellow',
+  'lightgray',
+  'lightgreen',
+  'lightgrey',
+  'lightpink',
+  'lightsalmon',
+  'lightseagreen',
+  'lightskyblue',
+  'lightslategray',
+  'lightslategrey',
+  'lightsteelblue',
+  'lightyellow',
+  'lime',
+  'limegreen',
+  'linen',
+  'magenta',
+  'maroon',
+  'mediumaquamarine',
+  'mediumblue',
+  'mediumorchid',
+  'mediumpurple',
+  'mediumseagreen',
+  'mediumslateblue',
+  'mediumspringgreen',
+  'mediumturquoise',
+  'mediumvioletred',
+  'midnightblue',
+  'mintcream',
+  'mistyrose',
+  'moccasin',
+  'navajowhite',
+  'navy',
+  'oldlace',
+  'olive',
+  'olivedrab',
+  'orange',
+  'orangered',
+  'orchid',
+  'palegoldenrod',
+  'palegreen',
+  'paleturquoise',
+  'palevioletred',
+  'papayawhip',
+  'peachpuff',
+  'peru',
+  'pink',
+  'plum',
+  'powderblue',
+  'purple',
+  'rebeccapurple',
+  'red',
+  'rosybrown',
+  'royalblue',
+  'saddlebrown',
+  'salmon',
+  'sandybrown',
+  'seagreen',
+  'seashell',
+  'sienna',
+  'silver',
+  'skyblue',
+  'slateblue',
+  'slategray',
+  'slategrey',
+  'snow',
+  'springgreen',
+  'steelblue',
+  'tan',
+  'teal',
+  'thistle',
+  'tomato',
+  'transparent',
+  'turquoise',
+  'violet',
+  'wheat',
+  'white',
+  'whitesmoke',
+  'yellow',
+  'yellowgreen',
+]
+
+const PREFIX = '^(rgb|hsl)(a?)\\s*\\('
+const VALUE = '\\s*([-+]?\\d+%?)\\s*'
+const ALPHA = '(?:,\\s*([-+]?(?:(?:\\d+(?:.\\d+)?)|(?:.\\d+))\\s*))?'
+const SUFFIX = '\\)$'
+const RGB_HSL_PATTERN = new RegExp(PREFIX + VALUE + ',' + VALUE + ',' + VALUE + ALPHA + SUFFIX)
+
+const NUM_TYPE = 1
+const PERCENTAGE_TYPE = 2
+const ERROR_TYPE = NUM_TYPE & PERCENTAGE_TYPE
+
+export const isColor = (str: string) => {
+  function getColorType(token: string) {
+    return token.includes('%') ? PERCENTAGE_TYPE : NUM_TYPE
+  }
+
+  if (!str || typeof str !== 'string') {
+    return false
+  }
+
+  const color = str.replace(/^\s+|\s+$/g, '').toLocaleLowerCase()
+
+  // named colors or hex code
+  if (CSS_COLOR_NAMES.includes(color) || HEX_PATTERN.test(color)) {
+    return true
+  }
+
+  const result = color.match(RGB_HSL_PATTERN)
+  if (result) {
+    const flavor = result[1]
+    const alpha = result[2]
+    const rh = result[3]
+    const gs = result[4]
+    const bl = result[5]
+    const a = result[6]
+
+    // alpha test
+    if ((alpha === 'a' && !a) || (a && alpha === '')) {
+      return false
+    }
+
+    // hsl
+    if (flavor === 'hsl') {
+      if (getColorType(rh) !== NUM_TYPE) {
+        return false
+      }
+      return (getColorType(gs) & getColorType(bl)) === PERCENTAGE_TYPE
+    }
+
+    // rgb
+    return (getColorType(rh) & getColorType(gs) & getColorType(bl)) !== ERROR_TYPE
+  }
+
+  return false
+}

package/src/tokens/render-font-size-preview.ts

@@ -0,0 +1,49 @@
+// import fs from 'fs'
+// import path from 'path'
+import satori from 'satori'
+
+// __dirname = extension/dist
+// export const Roboto = fs.readFileSync(path.resolve(__dirname, '../Roboto-Medium.ttf'))
+export const Roboto = Buffer.from('')
+
+// https://og-playground.vercel.app/?share=bZBBT4QwEIX_SjPG7KWJuCqHZvWyMdGzJnvhUugUupaWtEVEwn-3BS9kd04z873My7wJKisQGByE-i4MIT6MGp-nKfWENKjqJjCyu8-y2x1dl2sNSoTmKhHKd5qPkUmNP1vGtarNe8DWR1yhCei2gnPvg5Lj0UZkkvM1Ucmrr9rZ3oij1dZF1Y2UcquR8cKH-kVGHvYX4PT_V55lC5vnwryk5g21tpScrNOiMIe7mErcAwXbBWWNBzbB8jmw_VNOYQ0IWP5IQWDZ18Ak1x4pYGvP6nPsUrhhWKZ4Jpm_tiUKYMH1OFMIvIyKJvkOyRXmPw
+export const renderFontSizePreview = (
+  text: string,
+  fontSize: string,
+  options?: {
+    width: number
+    height: number
+  },
+) => {
+  return satori(
+    {
+      type: 'div',
+      key: null,
+      props: {
+        children: text,
+        style: {
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+          fontSize: fontSize,
+        },
+      },
+    },
+    {
+      width: 264,
+      height: 64,
+      ...options,
+      fonts: [
+        {
+          name: 'Roboto',
+          data: Roboto,
+          weight: 400,
+          style: 'normal',
+        },
+      ],
+    },
+  )
+}

package/src/tokens/render-token-color-preview.ts

@@ -0,0 +1,63 @@
+import { type Dict } from '@pandacss/types'
+import { type PandaContext } from '@pandacss/node'
+import satori from 'satori'
+import { type Token } from '@pandacss/token-dictionary'
+import { svgToMarkdownLink } from './utils'
+import { Roboto } from './render-font-size-preview'
+
+// https://og-playground.vercel.app/?share=5ZTNTsMwDMdfJbLELdI2xHYIgwMfb4DEJZe2cdtAmlRJSqmqvjtNw8ZEGUzihMglsRP_9bMtp4fMCAQGWyFfuCbE-U7hVd-HMyElyqL0jHBYLZdnHGh0t1L4cuYV0tUq6YI_V_i69wfjTlrMvDQ63GZGNZXmEK6HgevrcNgBfEY4rhuVGVm920GKkEnsUG4uGANvEifdR3RYldSPu9TWB5l9U4o5Rlhpkj0X1jRa3BplbIgqLOKY8_5RpCVk8RvgL6BOy-Yk5FQ1eJR4uxiB_0XnOlTKtH-rdRbFj52L-yXXQMHUYTgdsB6m4QZ2vt5QiJDANhcUBKZNASxPlEMKWJkn-dDV4e_w7WSNMrnR_r5KUQDztsGBgk_S8UU5ldBYJWB4Aw
+export const renderTokenColorPreview = async (ctx: PandaContext, token: Token) => {
+  const colors = [] as [tokenName: string, value: string][]
+
+  // Only bother displaying a preview for multiple colors
+  if (token.extensions.conditions) {
+    Object.entries(token.extensions.conditions).forEach(([conditionName, value]) => {
+      const [tokenRef] = ctx.tokens.getReferences(value)
+
+      colors.push([conditionName, tokenRef.value])
+    })
+  }
+  if (!colors.length) return
+
+  const svg = await satori(
+    createDiv(
+      {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+      },
+      colors.map(([conditionName, backgroundColor]) =>
+        createDiv(
+          { height: '100%', flex: 1, padding: '4px', display: 'flex', justifyContent: 'center', backgroundColor },
+          createDiv({ height: '100%', padding: '4px', backgroundColor: 'white', color: 'black' }, conditionName),
+        ),
+      ),
+    ),
+    {
+      width: 256,
+      height: 28 * colors.length,
+      fonts: [
+        {
+          name: 'Roboto',
+          data: Roboto,
+          weight: 400,
+          style: 'normal',
+        },
+      ],
+    },
+  )
+
+  return svgToMarkdownLink(svg)
+}
+
+const createDiv = (style: Dict, children?: DivNode) => ({ type: 'div', key: null, props: { style, children } })
+type DivLike = {
+  type: string
+  key: null
+  props: {
+    style: Dict
+    children: any
+  }
+}
+type DivNode = string | DivLike | DivLike[] | null