Prettier plugin for Panda CSS.
Will sort style props based on your local panda.config.ts
:
- in any Panda function like
css({ ... })
orstack({ ... })
- 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 afterOther
and are always sorted in the same order as in the generated CSS -
Arbitrary conditions will be sorted
after
Conditions
-
Css
will be sorted afterArbitrary conditions
, since the JSXcss
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.