Formating adds escape backslashes again and again with each run in 0.6.5

[Cielquan]

What version of prettier-plugin-tailwindcss are you using?

v0.6.4

What version of Tailwind CSS are you using?

v3.4.3

What version of Node.js are you using?

v20.12.1

What package manager are you using?

pnpm

What operating system are you using?

Linux / Ubuntu

Reproduction URL

Because the reproduction code is so small I skipped creating a repo. If you want me to I can make one though.

Code at start:

const Test = () => {
  return <div className="after:content-['\2026']" />;
};

Code after 1st run:

const Test = () => {
  return <div className="after:content-['\\2026']" />;
};

Code after 2nd run:

const Test = () => {
  return <div className="after:content-['\\\\2026']" />;
};

Describe your issue

I just updated from 0.5.10 to 0.6.4 and suddenly the backslash in the code snippet above kept multiplying itself(s). Versions 0.6.4, 0.6.3, 0.6.2 are affected. 0.6.1 is ok.

I did not except the backslash(es) for the octal escape sequence to be escaped again and again.

Repro:

1. Install prettier and plugin
2. Create file with content from above
3. Run prettier multiple times and set the backslashes comin in

[thecrypticace]

Fix released in v0.6.5 — thanks for reporting! 👍

[Cielquan]

Thanks for the quick fix and release 👍🏾

[jonaschlegel]

@thecrypticace thanks for fixing this bug in the released v0.6.5, but there still seems to be an issue:

• extra spaces in the className get removed by prettier-plugin-tailwindcss
• extra backslashes are added

Code at start:

const Test = () => {
  return <div className="after:content-['\2026'] text-white " />;
};

Code after 1st run:

const Test = () => {
  return <div className="text-white after:content-['\\2026']" />;
};

Adding another space:

const Test = () => {
  return <div className="text-white after:content-['\\2026'] " />;
};

Code after 2nd run:

const Test = () => {
  return <div className="text-white after:content-['\\\\2026']" />;
};

[thecrypticace]

huh interesting I'll look into it

[karlhorky]

Workaround

If you're experiencing this, the current workaround (as mentioned by @Cielquan in the PR description) is to downgrade to prettier-plugin-tailwindcss@0.6.1

(as long as you don't need the features/fixes introduced in the latest versions)

[karlhorky]

@thecrypticace did you have some time to take a look at this yet?

In case you know generally where the problem is but don't have the bandwidth currently to fix it, maybe a community member could contribute a fix with your guidance...?

[thecrypticace]

Gonna push out a new release today with this fixed

[karlhorky]

Thanks for the PR, merge and release!

I can confirm that prettier-plugin-tailwindcss@0.6.14 no longer doubles the backslashes in className! 🙌

It also works for this use case (escaping the underscore in the background image path):

Before: prettier-plugin-tailwindcss@0.6.13

// Pre-formatting (single backslash)
<div className="mt-4 bg-[linear-gradient(url('/\_common/abc.webp')] ">

// Post-formatting (double backslash)
<div className="mt-4 bg-[linear-gradient(url('/\\_common/abc.webp')]">

After: prettier-plugin-tailwindcss@0.6.14

// Pre-formatting (single backslash)
<div className="mt-4 bg-[linear-gradient(url('/\_common/abc.webp')] ">

// Post-formatting (single backslash)
<div className="mt-4 bg-[linear-gradient(url('/\_common/abc.webp')]">