@pandacss/shared

The README file is missing

Changelog

[0.33.0] - 2024-02-27

Fixed

• Fix an issue with recipes that lead to in-memory duplication the resulting CSS, which would increase the time taken to output the CSS after each extraction in the same HMR session (by a few ms).
• Fix svg token asset quotes
• Fix conditions accessing Cannot read properties of undefined (reading 'raw')

Added

• Allow dynamically recording profiling session by pressing the p key in your terminal when using the --cpu-prof flag for long-running sessions (with -w or --watch for panda / panda cssgen / panda codegen).
• Add definePlugin config functions for type-safety around plugins, add missing plugins in config dependencies to trigger a config reload on plugins change
• Add a group to every utility in the @pandacss/preset-base, this helps Panda tooling organize utilities.
• Add support for element level css reset via preflight.level. Learn more here.

Setting preflight.level to 'element' applies the reset directly to the individual elements that have the scope class assigned.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  preflight: {
    scope: '.my-scope',
    level: 'element', // 'element' | 'parent (default)'
  },
  // ...
})

This will generate CSS that looks like:

button.my-scope {
}

img.my-scope {
}

This approach allows for more flexibility, enabling selective application of CSS resets either to an entire parent container or to specific elements within a container.

Changed

• Unify the token path syntax when using formatTokenName

Example with the following config:

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  hooks: {
    'tokens:created': ({ configure }) => {
      configure({
        formatTokenName: (path: string[]) => '$' + path.join('-'),
      })
    },
  },
})

Will now allow you to use the following syntax for token path:

- css({ boxShadow: '10px 10px 10px {colors.$primary}' })
+ css({ boxShadow: '10px 10px 10px {$colors-primary}' })

- token.var('colors.$primary')
+ token.var('$colors-black')