@pandabox/prettier-plugin-panda

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

Installation

pnpm add -D prettier @pandabox/prettier-plugin-panda

Usage

{
  "plugins": ["@pandabox/prettier-plugin-panda"],
  "pandaFirstProps": ["as", "layerStyle", "textStyle"],
  "pandaLastProps": [],
  "pandaOnlyComponents": false,
  "pandaOnlyIncluded": false,
  "pandaStylePropsFirst": true,
  "pandaSortOtherProps": true
}

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', '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 true.

pandaSortOtherProps

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

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

pandaConfigPath

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

pandaCwd

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