prettier-plugin-classnames
prettier-plugin-classnames copied to clipboard
Incorrect formatting of template interpolations
Thanks for the awesome plugin! It really is a must have.
Dependency information
"prettier": "^3.3.2",
"prettier-plugin-classnames": "^0.7.0",
"prettier-plugin-merge": "^0.7.0",
"prettier-plugin-tailwindcss": "^0.6.5",
"tailwindcss": "^3.4.4",
Steps to reproduce
Use a template literal with long interpolations
The current behavior
The plugin seems to override prettier's template tag formatting, collapsing whitespace & newlines inserted by prettier.
<Component
className={`relative text-sm font-bold uppercase leading-[0.9] tracking-widest
transition-all duration-500 ease-out hover:brightness-105 active:shadow-sm
active:brightness-110 active:transition-none ${
variant === 'underline'
? 'pb-2 text-accent-1 underline underline-offset-8 hover:underline-offset-[10px]'
: `flex min-h-10 w-max min-w-28 items-center justify-between gap-2 overflow-hidden
rounded px-[max(1.5rem,_var(--radius))] py-5 text-center hover:shadow-md`
} ${variant === 'default' && 'border border-bg-3 bg-bg-2 text-accent-1'} ${
variant === 'primary' &&
'active:accent-1 border border-accent-2 !bg-accent-1 text-bg-1' } ${ variant ===
'outline' && 'border border-current !bg-transparent' } ${className}`}
>
The expected behavior
Something closer to what prettier output without the plugin, but with the classes inside still being formatted.
<Component
className={`relative text-sm font-bold uppercase leading-[0.9] tracking-widest
transition-all duration-500 ease-out hover:brightness-105 active:shadow-sm
active:brightness-110 active:transition-none ${
variant === 'underline'
? 'pb-2 text-accent-1 underline underline-offset-8 hover:underline-offset-[10px]'
: `flex min-h-10 w-max min-w-28 items-center justify-between gap-2 overflow-hidden
rounded px-[max(1.5rem,_var(--radius))] py-5 text-center hover:shadow-md`
} ${
variant === 'default' &&
'border border-bg-3 bg-bg-2 text-accent-1'
} ${
variant === 'primary' &&
'active:accent-1 border border-accent-2 !bg-accent-1 text-bg-1'
} ${
variant === 'outline' &&
'border border-current !bg-transparent'
} ${className}`}
>