🐼 Panda v0.21.0

[anubra266]

To upgrade to v0.21.0:

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

What's Changed

Fixed

• Fix static extraction issue when using JSX attributes (props) that are other JSX nodes

While parsing over the AST Nodes, due to an optimization where we skipped retrieving the current JSX element and instead
kept track of the latest one, the logic was flawed and did not extract other properties after encountering a JSX
attribute that was another JSX node.

const Component = () => {
  return (
    <>
      {/* ❌ this wasn't extracting ml="2" */}
      <Flex icon={<svg className="icon" />} ml="2" />

      {/* ✅ this was fine */}
      <Stack ml="4" icon={<div className="icon" />} />
    </>
  )
}

Now both will be fine again.

• Fix an edge-case when Panda eagerly extracted and tried to generate the CSS for a JSX property that contains an URL.

const App = () => {
  // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
  // but since it's an URL, it would produce invalid CSS
  // we now check if the property value is an URL and skip it if needed
  return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
}

• Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the normalization that
  happens internally.
• Fix issue where Preact JSX types are not merging recipes correctly
• Fix vue styled factory internal class merging, for example:

<script setup>
import { styled } from '../styled-system/jsx'

const StyledButton = styled('button', {
  base: {
    bgColor: 'red.300',
  },
})
</script>
<template>
  <StyledButton id="test" class="test">
    <slot></slot>
  </StyledButton>
</template>

Will now correctly include the test class in the final output.

Added

• Add configPath and cwd options in the @pandacss/astro integration just like in the @pandacss/postcss

This can be useful with Nx monorepos where the panda.config.ts is not in the root of the project.

• Add an escape-hatch for arbitrary values when using config.strictTokens, by prefixing the value with [ and
  suffixing with ], e.g. writing [123px] as a value will bypass the token validation.

import { css } from '../styled-system/css'

css({
  // @ts-expect-error TS will throw when using from strictTokens: true
  color: '#fff',
  // @ts-expect-error TS will throw when using from strictTokens: true
  width: '100px',

  // ✅ but this is now allowed:
  bgColor: '[rgb(51 155 240)]',
  fontSize: '[12px]',
})

• Add a shortcut for the config.importMap option

You can now also use a string to customize the base import path and keep the default entrypoints:

{
  "importMap": "@scope/styled-system"
}

is the equivalent of:

{
  "importMap": {
    "css": "@scope/styled-system/css",
    "recipes": "@scope/styled-system/recipes",
    "patterns": "@scope/styled-system/patterns",
    "jsx": "@scope/styled-system/jsx"
  }
}

• Add a way to specify a recipe's staticCss options from inside a recipe config, e.g.:

import { defineRecipe } from '@pandacss/dev'

const card = defineRecipe({
  className: 'card',
  base: { color: 'white' },
  variants: {
    size: {
      small: { fontSize: '14px' },
      large: { fontSize: '18px' },
    },
  },
  staticCss: [{ size: ['*'] }],
})

would be the equivalent of defining it inside the main config:

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  staticCss: {
    recipes: {
      card: {
        size: ['*'],
      },
    },
  },
})

• Add Open Props preset