Make sure escapes in classes are preserved in string literals (#286)

* Add tests for escapes

* Make sure escapes in classes are preserved in string literals

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Only remove duplicate Tailwind classes ([#277](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/277))
+- Make sure escapes in classes are preserved in string literals ([#286](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/286))
 
 ## [0.6.1] - 2024-05-31
 

src/index.js

@@ -450,12 +450,12 @@ function sortStringLiteral(
     node.extra = {
       ...node.extra,
       rawValue: result,
-      raw: raw[0] + result + raw.slice(-1),
+      raw: raw[0] + result.replace(/\\/g, '\\\\') + raw.slice(-1),
     }
   } else {
     // TypeScript (Literal)
     let raw = node.raw
-    node.raw = raw[0] + result + raw.slice(-1)
+    node.raw = raw[0] + result.replace(/\\/g, '\\\\') + raw.slice(-1)
   }
   return didChange
 }

tests/format.test.js

@@ -93,6 +93,15 @@ let javascript = [
     ';<div class={`flex ` + `  ` + `text-red-500`} />',
     ';<div class={`flex ` + ` ` + `text-red-500`} />',
   ],
+  [
+    `;<div class={"before:content-['\\\\2248']"} />`,
+    `;<div class={"before:content-['\\\\2248']"} />`,
+  ],
+
+  [
+    `;<div class={\`before:content-['\\\\2248']\`} />`,
+    `;<div class={\`before:content-['\\\\2248']\`} />`,
+  ],
 ]
 javascript = javascript.concat(
   javascript.map((test) => [
@@ -141,6 +150,11 @@ let vue = [
     `<div :class="' sm:p-5 ' + ' flex ' + ' underline ' + ' sm:m-5 '"></div>`,
     `<div :class="'sm:p-5 ' + ' flex' + ' underline' + ' sm:m-5'"></div>`,
   ],
+
+  [
+    `<div :class="'before:content-[\\'\\\\2248\\']'" />`,
+    `<div :class="'before:content-[\\'\\\\2248\\']'" />`,
+  ],
 ]
 
 let glimmer = [

tests/plugins.test.js

@@ -430,6 +430,9 @@ import Custom from '../components/Custom.astro'
           `<div class={' flex ' + ' underline ' + ' block '}></div>`,
           `<div class={' flex ' + ' underline ' + ' block '}></div>`,
         ],
+
+        // Escapes
+        t`<div class={"before:content-['\\\\2248']"}></div>`,
       ],
     },
   },