Don't move partial classes inside Liquid script attributes (#164)

* Fix liquid sorting * Fix Liquid mustache tags inside attributes * Update changelog
tailwindlabs · May 19, 2023 · 59d8f46 · 59d8f46
1 parent cc1b192
commit 59d8f46
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 21 deletions.
diff --git a/CHANGELOG.md b/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 Liquid script attributes ([#164](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/164))
 
 ## [0.3.0] - 2023-05-15
 

diff --git a/src/index.js b/src/index.js
@@ -296,33 +296,52 @@ function transformLiquid(ast, { env }) {
   /** @type {{pos: {start: number, end: number}, value: string}[]} */
   let changes = []
 
+  /** @typedef {import('@shopify/prettier-plugin-liquid/dist/types.js').AttrSingleQuoted} AttrSingleQuoted */
+  /** @typedef {import('@shopify/prettier-plugin-liquid/dist/types.js').AttrDoubleQuoted} AttrDoubleQuoted */
+
+  /**
+   * @param {AttrSingleQuoted | AttrDoubleQuoted} attr
+   */
   function sortAttribute(attr) {
-    visit(attr.value, {
-      TextNode(node) {
-        node.value = sortClasses(node.value, { env })
+    for (let i = 0; i < attr.value.length; i++) {
+      let node = attr.value[i]
+      if (node.type === 'TextNode') {
+        node.value = sortClasses(node.value, {
+          env,
+          ignoreFirst: i > 0 && !/^\s/.test(node.value),
+          ignoreLast: i < attr.value.length - 1 && !/\s$/.test(node.value),
+        })
+
         changes.push({
           pos: node.position,
           value: node.value,
         })
-      },
-
-      String(node) {
-        let pos = { ...node.position }
+      } else if (
+        node.type === 'LiquidDrop' &&
+        typeof node.markup === 'object' &&
+        node.markup.type === 'LiquidVariable'
+      ) {
+        visit(node.markup.expression, {
+          String(node) {
+            let pos = { ...node.position }
+
+            // We have to offset the position ONLY when quotes are part of the String node
+            // This is because `value` does NOT include quotes
+            if (hasSurroundingQuotes(node.source.slice(pos.start, pos.end))) {
+              pos.start += 1
+              pos.end -= 1
+            }
 
-        // We have to offset the position ONLY when quotes are part of the String node
-        // This is because `value` does NOT include quotes
-        if (hasSurroundingQuotes(node.source.slice(pos.start, pos.end))) {
-          pos.start += 1
-          pos.end -= 1
-        }
+            node.value = sortClasses(node.value, { env })
 
-        node.value = sortClasses(node.value, { env })
-        changes.push({
-          pos,
-          value: node.value,
+            changes.push({
+              pos,
+              value: node.value,
+            })
+          },
         })
-      },
-    })
+      }
+    }
   }
 
   visit(ast, {
@@ -351,7 +370,7 @@ function transformLiquid(ast, { env }) {
 
   // Sort so all changes occur in order
   changes = changes.sort((a, b) => {
-    return a.start - b.start || a.end - b.end
+    return a.pos.start - b.pos.start || a.pos.end - b.pos.end
   })
 
   for (let change of changes) {

diff --git a/tests/plugins.test.js b/tests/plugins.test.js
@@ -220,6 +220,8 @@ let tests = [
         t`<div class='${yes} {% render 'foo', bar: true %}'></div>`,
         t`<div class='${yes} {% include 'foo' %}'></div>`,
         t`<div class='${yes} {% include 'foo', bar: true %}'></div>`,
+        t`<div class='${yes} foo--{{ id }}'></div>`,
+        t`<div class='${yes} {{ id }}'></div>`,
       ],
     },
   },