@pandacss/logger
Advanced tools
Changelog
[0.33.0] - 2024-02-27
Cannot read properties of undefined (reading 'raw')
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
).definePlugin
config functions for type-safety around plugins, add missing plugins
in config dependencies to
trigger a config reload on plugins
changegroup
to every utility in the @pandacss/preset-base
, this helps Panda tooling organize utilities.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.
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')