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

Incorrect formatting of template interpolations

Open sxxov opened this issue 7 months ago • 1 comments

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

sxxov avatar Jul 06 '24 11:07 sxxov