ony3000/prettier-plugin-classnames

Support TaggedTemplateExpression

Closed this issue ยท 4 comments

Is your feature request related to a problem? Please describe

Feature request.

Describe the solution you'd like

Support tagged template expressions in addition to custom functions. For an example taken from https://github.com/tailwindlabs/prettier-plugin-tailwindcss#sorting-classes-in-template-literals:

{
  "tailwindFunctions": ["tw"],
}
const mySortedClasses = tw`bg-white p-4 dark:bg-black`

Describe alternatives you've considered

Additional context

@alex-kinokon v0.6.6 has been released, check it out!

u3u commented

Hi, I encountered this error when I upgraded from 0.6.6 โœ… to 0.7.0 โŒ.
Finally found that if backticks or TaggedTemplateExpression are used, this error will occur.

image

If single quotes are used, there is no problem.

image

test/__fixtures__/tw.tsx

const tw = String.raw
const clsx = (...args: any) => args
const twMerge = clsx
const twJoin = clsx

export const classes = clsx(
  'px-4 py-2 text-base text-white rounded bg-blue-500',
  {
    'text-gray-100 bg-blue-700': true,
  },
)

export const styles = {
  root: tw`dark:text-white text-md text-black`,
  base: twMerge(['z-[1] relative', twJoin('inset-0 absolute flex items-center')]),
}

export function Callout({ children }: React.PropsWithChildren) {
  return (
    <label className="[view-transition-name:upload] mx-auto max-w-md cursor-pointer flex flex-col items-center justify-center gap-2 rounded-lg bg-white p-8 shadow-panel transition active:scale-95 border-2 border-dashed border-transparent can-hover:hover:border-primary hover:-translate-y-1">
      {children}
    </label>
  );
}

@u3u Hi! Thanks for reporting the issue!

Fixed in v0.7.1, check it out!

u3u commented

@ony3000 Thank you! Awesome!