Don't move partial classes inside Twig attributes (#184)

* Simplify test

* Fix CS

* Fix concat expressions in Twig attributes

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don't move partial classes inside Twig attributes ([#184](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/184))
 
 ## [0.4.0] - 2023-07-11
 

src/plugin-v2.js

@@ -642,13 +642,19 @@ function transformMelody(ast, { env, changes }) {
       meta.sortTextNodes = true
     },
 
-    StringLiteral(node, _parent, _key, _index, meta) {
+    StringLiteral(node, parent, _key, _index, meta) {
       if (!meta.sortTextNodes) {
         return
       }
 
+      const isConcat = parent.type === 'BinaryConcatExpression'
+
       node.value = sortClasses(node.value, {
         env,
+        ignoreFirst:
+          isConcat && _key === 'right' && !/^[^\S\r\n]/.test(node.value),
+        ignoreLast:
+          isConcat && _key === 'left' && !/[^\S\r\n]$/.test(node.value),
       })
     },
   })

src/plugin-v3.js

@@ -642,13 +642,19 @@ function transformMelody(ast, { env, changes }) {
       meta.sortTextNodes = true
     },
 
-    StringLiteral(node, _parent, _key, _index, meta) {
+    StringLiteral(node, parent, _key, _index, meta) {
       if (!meta.sortTextNodes) {
         return
       }
 
+      const isConcat = parent.type === 'BinaryConcatExpression'
+
       node.value = sortClasses(node.value, {
         env,
+        ignoreFirst:
+          isConcat && _key === 'right' && !/^[^\S\r\n]/.test(node.value),
+        ignoreLast:
+          isConcat && _key === 'left' && !/[^\S\r\n]$/.test(node.value),
       })
     },
   })

tests/plugins.test.js

@@ -100,10 +100,17 @@ let tests = [
           `<section class="{{ {base:css.prices}|classes }}"></section>`,
           `<section class="{{ { base: css.prices }|classes }}"></section>`,
         ],
-        [
-          `<section class="sm:p-0 p-4"></section>`,
-          `<section class="p-4 sm:p-0"></section>`,
-        ],
+        t`<section class="${yes}"></section>`,
+        t`<section class="${yes} text-{{ i }}"></section>`,
+        t`<section class="${yes} {{ i }}-text"></section>`,
+        t`<section class="text-{{ i }} ${yes}"></section>`,
+        t`<section class="{{ i }}-text ${yes}"></section>`,
+
+        // text-center is used because it's placed between p-0 and sm:p-0
+        t`<section class="${yes} text-center{{ i }}"></section>`,
+        t`<section class="${yes} {{ i }}text-center"></section>`,
+        t`<section class="text-center{{ i }} ${yes}"></section>`,
+        t`<section class="{{ i }}text-center ${yes}"></section>`,
       ],
     },
   },
@@ -235,7 +242,7 @@ let tests = [
         t`<div>
   <h1 class='${yes}'/>
 </div>`,
-    t`style {
+        t`style {
   h1 {
     @apply ${yes};
   }
@@ -270,7 +277,7 @@ let tests = [
     @apply bg-fuchsia-50 p-20 w-full;
 }
 </style>`,
-      `<style>
+          `<style>
   h1 {
     @apply w-full bg-fuchsia-50 p-20;
   }
@@ -331,7 +338,7 @@ import Custom from '../components/Custom.astro'
         ],
       ],
     },
-  }
+  },
 ]
 
 // Disable pug printer -- it produces noisy test output