Fix class sorting in capture liquid tag

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix class sorting in `capture` liquid tag ([#131](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/131))
 
 ## [0.2.4] - 2023-03-02
 

src/index.js

@@ -353,60 +353,58 @@ function transformGlimmer(ast, { env }) {
 function transformLiquid(ast, { env }) {
   /** @param {{name: string | {type: string, value: string}[]}} node */
   function isClassAttr(node) {
-    if (Array.isArray(node.name)) {
-      return node.name.every((n) => n.type === 'TextNode' && n.value === 'class');
-    }
-
-    return node.name === 'class'
+    return Array.isArray(node.name)
+      ? node.name.every((n) => n.type === 'TextNode' && n.value === 'class')
+      : node.name === 'class'
   }
 
-  visit(ast, {
-    AttrSingleQuoted(node, _parent, _key, _index, meta) {
-      if (!isClassAttr(node)) {
-        return;
-      }
+  function sortAttribute(attr, path) {
+    visit(attr.value, {
+      TextNode(node) {
+        node.value = sortClasses(node.value, { env });
 
-      meta.sortTextNodes = true;
-      meta.sourceNode = node;
-    },
+        let source = node.source.slice(0, node.position.start) + node.value + node.source.slice(node.position.end)
+        path.forEach(node => (node.source = source))
+      },
 
-    AttrDoubleQuoted(node, _parent, _key, _index, meta) {
-      if (!isClassAttr(node)) {
-        return;
-      }
+      String(node) {
+        node.value = sortClasses(node.value, { env });
 
-      meta.sortTextNodes = true;
+        // String position includes the quotes even if the value doesn't
+        // Hence the +1 and -1 when slicing
+        let source = node.source.slice(0, node.position.start+1) + node.value + node.source.slice(node.position.end-1)
+        path.forEach(node => (node.source = source))
+      },
+    })
+  }
+
+  visit(ast, {
+    LiquidTag(node, _parent, _key, _index, meta) {
+      meta.path = [...meta.path ?? [], node];
+    },
 
-      // With Liquid Script it uses the "source" of certain nodes as the "source of truth"
-      // We must modify that node's source to get the desired output
-      // Even if we modify the AST it will be ignored
-      meta.sourceNode = node;
+    HtmlElement(node, _parent, _key, _index, meta) {
+      meta.path = [...meta.path ?? [], node];
     },
 
-    TextNode(node, _parent, _key, _index, meta) {
-      if (!meta.sortTextNodes) {
+    AttrSingleQuoted(node, _parent, _key, _index, meta) {
+      if (!isClassAttr(node)) {
         return;
       }
 
-      node.value = sortClasses(node.value, { env });
+      meta.path = [...meta.path ?? [], node];
 
-      // This feels hacky but it's necessary
-      node.source = node.source.slice(0, node.position.start) + node.value + node.source.slice(node.position.end);
-      meta.sourceNode.source = node.source;
+      sortAttribute(node, meta.path)
     },
 
-    String(node, _parent, _key, _index, meta) {
-      if (!meta.sortTextNodes) {
+    AttrDoubleQuoted(node, _parent, _key, _index, meta) {
+      if (!isClassAttr(node)) {
         return;
       }
 
-      node.value = sortClasses(node.value, { env });
+      meta.path = [...meta.path ?? [], node];
 
-      // This feels hacky but it's necessary
-      // String position includes the quotes even if the value doesn't
-      // Hence the +1 and -1 when slicing
-      node.source = node.source.slice(0, node.position.start+1) + node.value + node.source.slice(node.position.end-1);
-      meta.sourceNode.source = node.source;
+      sortAttribute(node, meta.path)
     },
   });
 }

tests/plugins.test.js

@@ -253,6 +253,10 @@ let tests = [
           `{% if state == true %}\n  <a class="{{ "sm:p-0 p-4" | escape }}" href="https://www.example.com">Example</a>\n{% endif %}`,
           `{% if state == true %}\n  <a class='{{ "p-4 sm:p-0" | escape }}' href='https://www.example.com'>Example</a>\n{% endif %}`,
         ],
+        [
+          `{%- capture class_ordering -%}<div class="sm:p-0 p-4"></div>{%- endcapture -%}`,
+          `{%- capture class_ordering -%}<div class="p-4 sm:p-0"></div>{%- endcapture -%}`,
+        ],
       ],
     }
   },