@pandacss/astro-plugin-studio
Advanced tools
Changelog
[0.44.0] - 2024-07-22
globalFontface
definitions are merged correctlyname
mandatory key in Preset
to make it easy to target one specificallyJSX
with React.JSX
for better React 19 supportChangelog
[0.43.0] - 2024-07-19
Add support for defining global font face in config and preset
// pandacss.config.js
export default defineConfig({
globalFontface: {
Roboto: {
src: 'url(/fonts/roboto.woff2) format("woff2")',
fontWeight: '400',
fontStyle: 'normal',
},
},
})
You can also add multiple font src
for the same weight
// pandacss.config.js
export default defineConfig({
globalFontface: {
Roboto: {
// multiple src
src: ['url(/fonts/roboto.woff2) format("woff2")', 'url(/fonts/roboto.woff) format("woff")'],
fontWeight: '400',
fontStyle: 'normal',
},
},
})
You can also define multiple font weights
// pandacss.config.js
export default defineConfig({
globalFontface: {
// multiple font weights
Roboto: [
{
src: 'url(/fonts/roboto.woff2) format("woff2")',
fontWeight: '400',
fontStyle: 'normal',
},
{
src: 'url(/fonts/roboto-bold.woff2) format("woff2")',
fontWeight: '700',
fontStyle: 'normal',
},
],
},
})
Changelog
[0.42.0] - 2024-07-08
4xl
border radius tokenclassName
to be optional, both for recipes
and slotRecipes
, with a fallback to its name.panda analyze --output coverage.json
fileimport { defineConfig } from '@pandacss/core'
export default defineConfig({
recipes: {
button: {
className: 'button', // 👈 was mandatory, is now optional
variants: {
size: {
sm: { padding: '2', borderRadius: 'sm' },
md: { padding: '4', borderRadius: 'md' },
},
},
},
},
})
[BREAKING] Removed the legacy config.optimize
option because it was redundant. Now, we always optimize the generated
CSS where possible.
BREAKING: Remove emitPackage
config option,
tldr: use importMap
instead for absolute paths (e.g can be used for component libraries)
emitPackage
is deprecated, it's known for causing several issues:
node_modules
, leading to panda codegen
updates to the styled-system
not
visible in the browserAs alternatives, you can use:
../styled-system/css
instead of styled-system/css
)#styled-system/css
instead of styled-system/css
https://nodejs.org/api/packages.html#subpath-imports@acme/styled-system
) and use
importMap: "@acme/styled-system"
so that Panda knows which entrypoint to extract, e.g.
import { css } from '@acme/styled-system/css'
https://panda-css.com/docs/guides/component-library