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/[email protected]_@[email protected][email protected]/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 😰.