Can a new option be added to use backticks (`) instead of double quotes (")?

[u3u]

Is your feature request related to a problem? Please describe

In Vue JSX, if class appears on multiple lines without using backticks, a module resolution error will occur, and now I have to manually replace double quotes with backticks.

const Callout = ({ children }) => {
  return (
    <div
      class="rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4 dark:border-neutral-500/30
        dark:bg-neutral-900/50"
    >
      {children}
    </div>
  );
};

Module parse failed: Unterminated string constant (629:15)
File was processed with these loaders:
 * ./node_modules/.pnpm/babel-loader@8.0.6_@babel+core@7.17.8_webpack@4.41.2/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     var children = _ref5.children;
|     return h("div", {
>       "class": "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4 dark:border-neutral-500/30
|         dark:bg-neutral-900/50"
|     }, [children]);

Describe the solution you'd like

Add a jsxBackquote option to automatically replace quotes with backticks when line breaks occur in attributes such as class, className.

const Callout = ({ children }) => {
  return (
    <div
      class="rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4 dark:border-neutral-500/30
        dark:bg-neutral-900/50"
    >
      {children}
    </div>
  );
};
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ to this ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
const Callout = ({ children }) => {
  return (
    <div
      class={`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4 dark:border-neutral-500/30
        dark:bg-neutral-900/50`}
    >
      {children}
    </div>
  );
};

Describe alternatives you've considered

A more advanced use case, automatically wrap the class content with libraries such as clsx, twMerge when there are multiple lines (but it may exceed the scope of this library).

const Callout = ({ children }) => {
  return (
    <div
      class={twMerge([
        'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4 dark:border-neutral-500/30 dark:bg-neutral-900/50',
      ])}
    >
      {children}
    </div>
  );
};

[ony3000]

Well, the issue doesn't reproduce with Vite template using Vue 3.

What is your development environment like?

[u3u]

This is a very old large Vue2 project of the company, but I have to continue to maintain it 😰.

[gersomvg]

@ony3000 Came here to post the same issue, but for .astro files.

I love this plugin so much, but in Astro when you have an Astro component, it will not work with newlines between class="".

It does work on regular HTML components as Astro handles these differently.

Would love an option to force class={``} on newlines.

[ony3000]

@gersomvg That's weird. Line wrapping works fine in Astro components too.

Maybe your VS Code is missing the prettier.documentSelectors setting.

If your setup is fine but line wrapping is not working, providing example code and Prettier configuration would be helpful in investigating the issue.

[gersomvg]

@ony3000 your plugin is wrapping fine, but Astro doesn't compile if <SomeAstroComponent class="" /> has newlines in the class="" part.

Error:

Unterminated string literal

Reference: https://github.com/withastro/astro/issues/4029 (EDIT) just recreated the referenced issue over at the right repository: https://github.com/withastro/compiler/issues/1047

In the meantime I still see an opportunity to enforce {``} in prettier-plugin-classnames as prettier is all about consistent formatting.

[ony3000]

When implementing Astro integration for this plugin, I also saw https://github.com/withastro/astro/issues/4029.

I didn't take any action on this plugin at the time because it seemed to be a problem with the Astro compiler.

But it still doesn't seem to be fixed, so I'll consider adding an option.