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