🐼 Panda v0.37.1

[anubra266]

To upgrade to v0.37.1:

pnpm up "@pandacss/*"
#or
yarn up '@pandacss/*'

What's Changed

Fixed

• Improve token validation logic to parse references in tokens and compositve values like borders and shadows
  which could be objects.
• Fix issue where setting the pattern jsx option with dot notation didn't work.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  patterns: {
    extend: {
      grid: {
        jsx: ['Form.Group', 'Grid'],
      },
      stack: {
        jsx: ['Form.Action', 'Stack'],
      },
    },
  },
})

• Fix an issue where the compoundVariants classes would not be present at runtime when using config recipes

// panda.config.ts
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  theme: {
    extend: {
      recipes: {
        button: {
          // ...
          variants: {
            size: {
              sm: {
                fontSize: 'sm',
              },
              // ...
            },
          },
          compoundVariants: [
            {
              size: 'sm',
              css: { color: 'blue.100'},
            },
          ],
        },
      },
    },
  },
})

// app.tsx
const Button = styled('button', button)

const App = () => {
  return (
    // ❌ this would only have the classes `button button--size_sm`
    // the `text_blue` was missing
    // ✅ it's now fixed -> `button button--size_sm text_blue`
    <Button size="sm">Click me</Button>
  )
}

Added

• Add a getVariantProps helper to the recipes API (cva and config recipes)

import { cva } from '../styled-system/css'
import { getVariantProps } from '../styled-system/recipes'

const button = cva({
    // ...
  variants: {
    size: {
      sm: {
        fontSize: 'sm',
      },
      md: {
        fontSize: 'md',
      },
    },
    variant: {
      primary: {
        backgroundColor: 'blue.500',
      },
      danger: {
        backgroundColor: 'red.500',
      }
    }
  }
  defaultVariants: {
    size: 'md',
    variant: 'primary',
  }
})

// ✅ this will return the computed variants based on the defaultVariants + props passed
const buttonProps = button.getVariantProps({ size: "sm" })
//    ^? { size: "sm", variant: "primary" }

Changed

Public changes: Some quality of life fixes for the Studio:

• Handle displaying values using the [xxx] escape-hatch syntax for textStyles in the studio
• Display an empty state when there's no token in a specific token page in the studio

(mostly) Internal changes:

• Add deepResolveReference in TokenDictionary, helpful to get the raw value from a semantic token by recursively
  traversing the token references.
• Added some exports in the @pandacss/token-dictionary package, mostly useful when building tooling around Panda
  (Prettier/ESLint/VSCode plugin etc)