prettier-plugin-classnames
prettier-plugin-classnames copied to clipboard
Variant grouping
It would be very helpful if this plugin could replicate the group option from better-tailwindcss/enforce-consistent-line-wrapping.
// { printWidth: 40 }
<div class={`
text-black underline focus:font-bold
focus:text-opacity-70 hover:font-bold
hover:text-opacity-70
`} />
// { printWidth: 40, group: "newLine" }
<div class={`
text-black underline
focus:font-bold focus:text-opacity-70
hover:font-bold hover:text-opacity-70
`} />
// { printWidth: 40, group: "emptyLine" }
<div class={`
text-black underline
focus:font-bold focus:text-opacity-70
hover:font-bold hover:text-opacity-70
`} />
Hi, sorry for the late reply! I will consider adding that option.
For now, readability can be improved by writing class names separately for each variant.
<div className={classNames(
'text-black underline',
'focus:font-bold focus:text-opacity-70',
'hover:font-bold hover:text-opacity-70',
)} />
<div className={classNames(
'text-black underline',
//
'focus:font-bold focus:text-opacity-70',
//
'hover:font-bold hover:text-opacity-70',
)} />