This will be the home for utilities around Panda CSS.

Prettier plugin for Panda CSS.

Will sort style props based on your local panda.config.ts:

• in any Panda function like css({ ... }) or stack({ ... })
• in the css prop of any JSX component
• etc...

pnpm add -D prettier @pandabox/prettier-plugin

{ "plugins": ["@pandabox/prettier-plugin"] }

• missing-css-warnings - Logs a warning message when a CSS rule was used at runtime but couldn't be statically extracted
• strict-tokens-scope - Enforce strictTokens only for a set of TokenCategory or style props
• strict-tokens-runtime - Enforce strictTokens at runtime, optionally scope this behaviour to a set of TokenCategory or style props
  • restrict-styled-props - Adds a props on the styled JSX Factory to restrict the props that can be passed to the component
• remove-negative-spacing - Removes negative spacing tokens
• remove-features - Removes features from the styled-system
• minimal-setup - Removes the built-in presets and allow removing features from the styled-system

pnpm add -D @pandabox/panda-plugins

import { defineConfig } from '@pandacss/dev' import { pluginStrictTokensScope, pluginRemoveNegativeSpacing, pluginRemoveFeatures } from '@pandabox/panda-plugins' export default defineConfig({ // ... strictTokens: true, // can also be used together with // strictPropertyValues: true, // plugins: [ pluginStrictTokensScope({ categories: ['colors', 'spacing'] }), pluginRemoveFeatures({ features: ['no-jsx', 'no-cva'] }), pluginRemoveNegativeSpacing({ spacingTokenType: true, tokenType: true }), ], })

Alternative distribution entrypoint for Panda CSS (other than the CLI and PostCSS plugin).

Optionally inline your styled-system functions and components results as class names (atomic or grouped) (with optimizeJs option).

pnpm i @pandabox/unplugin

import { defineConfig } from 'vite' import pandabox from '@pandabox/unplugin' export default defineConfig({ plugins: [ pandabox.vite({ /* options */ }), ], })

From:

import { css } from '../styled-system/css' export const App = () => { return ( <> <div className={css({ display: 'flex', flexDirection: 'column', fontWeight: 'semibold', color: 'green.300', textAlign: 'center', textStyle: '4xl', })} > <span>Hello from Panda</span> </div> <styled.div display="flex" flexDirection="column" fontWeight="semibold" color="green.300" textAlign="center" textStyle="4xl" onClick={() => console.log('hello')} unresolvable={something} > <span>Hello from Panda</span> </styled.div> </> ) }

To (atomic):

import { css } from '../styled-system/css' export const App = () => { return ( <> <div className={'d_flex flex_column font_semibold text_green.300 text_center textStyle_4xl'}> <span>Hello from Panda</span> </div> <div className="d_flex flex_column font_semibold text_green.300 text_center textStyle_4xl" onClick={() => console.log('hello')} unresolvable={something} > <span>Hello from Panda</span> </div> </> ) }

• assignInlineVars is like the one from vanilla-extract but type-safe with typings using your own panda.config tokens
• cssVar allows creating creating css vars as JS objects so you can reference them in your panda config or at runtime
• wrapValue will wrap every objects inside the first argument with a { value: xxx }, mostly meant to easily migrate from a chakra theme tokens object to a panda.config tokens object

pnpm i @pandabox/postcss-plugins

• removeUnusedCssVars
• removeUnusedKeyframes

pnpm i @pandabox/define-recipe

The defineRecipe method will now return a RecipeBuilder object instead of a RecipeConfig object. The RecipeBuilder object has the following methods:

• extend: add additional variants to or override variants of a recipe.

const button = defineRecipe({ className: 'btn', variants: { variant: { primary: { color: 'red' } }, }, }).extend({ variant: { primary: { px: 2 }, secondary: { color: 'blue' }, }, })

resulting in:

{ "className": "btn", "variants": { "variant": { "primary": { "color": "red", "px": 2 }, "secondary": { "color": "blue" } } } }

More methods are available on the RecipeBuilder object, see the README for more