@pandabox/prettier-plugin NPM

@pandabox/prettier-plugin

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...

Installation

pnpm add -D prettier @pandabox/prettier-plugin

Usage

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

Options

See below for more details.

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

Sorting

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.

Extending

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',
})

Options

`pandaFirstProps`

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

`pandaLastProps`

The last props to sort. Defaults to [].

`pandaOnlyComponents`

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

`pandaOnlyIncluded`

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

`pandaStylePropsFirst`

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

`pandaSortOtherProps`

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

`pandaGroupOrder`

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']