prettier-plugin-classnames icon indicating copy to clipboard operation
prettier-plugin-classnames copied to clipboard

Variant grouping

Open reindexnow opened this issue 2 months ago • 1 comments

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
`} />

reindexnow avatar Oct 10 '25 07:10 reindexnow

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

ony3000 avatar Nov 01 '25 13:11 ony3000