- Notifications
You must be signed in to change notification settings - Fork8
a toolbox for Panda CSS
NotificationsYou must be signed in to change notification settings
astahmer/pandabox
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This will be the home for utilities around Panda CSS.
Prettier plugin for Panda CSS.
Will sort style props based on your localpanda.config.ts:
- in any Panda function like
css({ ... })orstack({ ... }) - in the
cssprop 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 staticallyextractedstrict-tokens-scope- EnforcestrictTokensonly for a set ofTokenCategoryor style propsstrict-tokens-runtime- EnforcestrictTokensat runtime, optionally scope this behaviour to a set ofTokenCategoryor style propsrestrict-styled-props- Adds apropson thestyledJSX Factory to restrict the props that can be passed to thecomponent
remove-negative-spacing- Removes negative spacing tokensremove-features- Removes features from thestyled-systemminimal-setup- Removes the built-in presets and allow removing features from thestyled-system
pnpm add -D @pandabox/panda-plugins
import{defineConfig}from'@pandacss/dev'import{pluginStrictTokensScope,pluginRemoveNegativeSpacing,pluginRemoveFeatures}from'@pandabox/panda-plugins'exportdefaultdefineConfig({// ...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 theCLI andPostCSS plugin).
Optionally inline yourstyled-system functions and components results as class names (atomic orgrouped) (withoptimizeJs option).
pnpm i @pandabox/unplugin
import{defineConfig}from'vite'importpandaboxfrom'@pandabox/unplugin'exportdefaultdefineConfig({plugins:[pandabox.vite({/* options */}),],})
From:
import{css}from'../styled-system/css'exportconstApp=()=>{return(<><divclassName={css({display:'flex',flexDirection:'column',fontWeight:'semibold',color:'green.300',textAlign:'center',textStyle:'4xl',})}><span>Hello from Panda</span></div><styled.divdisplay="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'exportconstApp=()=>{return(<><divclassName={'d_flex flex_column font_semibold text_green.300 text_center textStyle_4xl'}><span>Hello from Panda</span></div><divclassName="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></>)}
assignInlineVarsis likethe one from vanilla-extract buttype-safe with typings using your own panda.config tokenscssVarallows creating creating css vars as JS objects so you can reference them in your panda config or at runtimewrapValuewill wrap every objects inside the first argument with a { value: xxx }, mostly meant to easily migratefrom a chakra theme tokens object to a panda.config tokens object
pnpm i @pandabox/postcss-plugins
removeUnusedCssVarsremoveUnusedKeyframes
pnpm i @pandabox/define-recipe
ThedefineRecipe method will now return aRecipeBuilder object instead of aRecipeConfig object. TheRecipeBuilder object has the following methods:
extend: add additional variants to or override variants of a recipe.
constbutton=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 theRecipeBuilder object, see theREADME for more