Prettier plugin for Panda css
npm install @pandabox/prettier-pluginPrettier 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...
``bash`
pnpm add -D prettier @pandabox/prettier-plugin
`json`
{
"plugins": ["@pandabox/prettier-plugin"]
}
See below for more details.
`json`
{
"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 yourutilities (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:
`ts`
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 afterOther
and are always sorted in the same order as in the generated CSSConditions
- Arbitrary conditions will be sorted
after Css
- will be sorted after Arbitrary conditions, since the JSX css prop will override any other JSX style propstyled
with JSX patterns / 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.
`ts
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 ). 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.