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"]
}

See below for more details.

{
  "pandaFirstProps": ["as", "className", "layerStyle", "textStyle"],
  "pandaLastProps": [],
  "pandaOnlyComponents": false,
  "pandaOnlyIncluded": false,
  "pandaStylePropsFirst": false,
  "pandaSortOtherProps": false,
  "pandaFunctions": []
}

The plugin will dynamically resolve your panda.config.ts file and sort the style properties based on your utilities (keys and shorthands) and their associated group.

Each utility in the @pandacss/preset-base has a group name.

The group names and their order are:

const groupNames = [
  'System',
  'Container',
  'Display',
  'Visibility',
  'Position',
  'Transform',
  'Flex Layout',
  'Grid Layout',
  'Layout',
  'Border',
  'Border Radius',
  'Width',
  'Height',
  'Margin',
  'Padding',
  'Color',
  'Typography',
  'Background',
  'Shadow',
  'Table',
  'List',
  'Scroll',
  'Interactivity',
  'Transition',
  'Effect',
  'Other',
]

• Conditions (_hover, _dark...) will be sorted after Other and are always sorted in the same order as in the generated CSS
• Arbitrary conditions will be sorted after Conditions
• Css will be sorted after Arbitrary conditions, since the JSX css prop will override any other JSX style prop with JSX patterns / styled factory

Finally, other (non-style) props will be sorted alphabetically.

You can extend the utilities in your panda.config.ts and bind (or re-bind an existing) them to a group name so that they will be sorted with the other utilities in that group.

export default defineConfig({
  utilities: {
    boxSize: {
      values: 'sizes',
      group: 'Width',
      transform: (value) => {
        return {
          width: value,
          height: value,
        }
      },
    },
  },
})

// will be sorted near the `width` prop
css({
  position: 'relative',
  boxSize: '2xl',
  width: '100%',
  fontSize: '2xl',
})

The first props to sort. Defaults to ['as', 'asChild', 'ref', 'className', 'layerStyle', 'textStyle'].

The last props to sort. Defaults to [].

Only sort props in known Panda components (JSX patterns and <styled.xxx /> factory). Defaults to false.

Only sort props in files that are included in the config. Defaults to false.

Whether to sort the style props before the component props. Defaults to false.

Whether to sort the other props alphabetically. Defaults to false.

The order of the style groups. Defaults to: ['System', 'Container', 'Display', 'Visibility', 'Position', 'Transform', 'Flex Layout', 'Grid Layout', 'Layout', 'Border', 'Border Radius', 'Width', 'Height', 'Margin', 'Padding', 'Color', 'Typography', 'Background', 'Shadow', 'Table', 'List', 'Scroll', 'Interactivity', 'Transition', 'Effect', 'Other', 'Conditions', 'Arbitrary conditions', 'Css']

A list of style functions to sort in addition to the default ones (css, cva, patterns, defineRecipe, defineSlotRecipe...). Defaults to [].

The path to the panda config file. Only relevant when used programatically.

The current working directory from which the config file will be searched for. Only relevant when used programatically.