Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
u3u opened this issue Sep 4, 2024 · 6 comments
Open
Assignees
Labels
enhancement New feature or request

Comments

@u3u
Copy link

u3u commented Sep 4, 2024

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>
  );
};
@u3u u3u added the enhancement New feature or request label Sep 4, 2024
@ony3000 ony3000 self-assigned this Sep 4, 2024
@ony3000
Copy link
Owner

ony3000 commented Sep 4, 2024

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

What is your development environment like?

@u3u
Copy link
Author

u3u commented Sep 5, 2024

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

@gersomvg
Copy link

gersomvg commented Oct 9, 2024

@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
Copy link
Owner

ony3000 commented Oct 9, 2024

@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
Copy link

gersomvg commented Oct 9, 2024

@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: withastro/astro#4029
(EDIT) just recreated the referenced issue over at the right repository: withastro/compiler#1047

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

@ony3000
Copy link
Owner

ony3000 commented Oct 9, 2024

When implementing Astro integration for this plugin, I also saw withastro/astro#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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Development

No branches or pull requests

3 participants