@pandacss/core - npm Package Versions

[0.37.1] - 2024-04-02

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)

[0.37.0] - 2024-04-01

Fixed

• Fix className collisions between utilities by using unique class names per property in the default preset.

• Fix a bug where some styles would be grouped together in the same rule, even if they were not related to each other.

Internal details

This was caused by an object reference being re-used while setting a property deeply in the hashes decoding process, leading to the mutation of a previous style object with additional properties.

Added

• Add missing typings for CSS vars in properties bound to utilities (and that are not part of the list affected by strictPropertyValues)
• Allow multiple importMap (or multiple single import entrypoints if using the object format).

It can be useful to use a component library's styled-system while also using your own styled-system in your app.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  importMap: ['@acme/styled-system', '@ui-lib/styled-system', 'styled-system'],
})

Now you can use any of the @acme/styled-system, @ui-lib/styled-system and styled-system import sources:

import { css } from '@acme/css'
import { css as uiCss } from '@ui-lib/styled-system/css'
import { css as appCss } from '@ui-lib/styled-system/css'

• Spacing Utilities: Add new spaceX and spaceY utilities for applying margin between elements. Especially useful when applying negative margin to child elements.

<div className={flex({ spaceX: '-1' })}>
  <div className={circle({ size: '5', bg: 'red' })} />
  <div className={circle({ size: '5', bg: 'pink' })} />
</div>

• Added new _starting condition to support the new @starting-style at-rule. Learn more here

• Gradient Position: Add new gradientFromPosition and gradientToPosition utilities for controlling the position of the gradient color stops.

<div
  className={css({
    bgGradient: 'to-r',
    // from
    gradientFrom: 'red',
    gradientFromPosition: 'top left',
    // to
    gradientTo: 'blue',
    gradientToPosition: 'bottom right',
  })}
/>

Changed

• Color Mode Selectors: Changed the default selectors for _light and _dark to target parent elements. This ensures consistent behavior with using these conditions to style pseudo elements (like ::before and ::after).

const conditions = {
-  _dark: '&.dark, .dark &',
+  _dark: '.dark &',
-  _light: '&.light, .light &',
+  _light: '.light &',
}

• Changed divideX and divideY now maps to the borderWidths token group.