Fix class sorting in capture liquid tag (#131)

* Refactor liquid script attribute sorting

The Liquid prettier plugin consults the `source` property on various nodes when re-printing the AST as text. Which one gets looked at depends on what type of node is being analyzed and even what ancestor nodes there are. For instance, attributes consult the `source` on the attribute node. But some Liquid Tags end up looking at the source property of the liquid tag instead of the nodes inside it even if they’re modified (for the purposes of attrbute sorting at least).

This new setup allows us to push objects with `source` properties that can all be updated simultanously when sorting the value of an attribute.

* Fix class sorting in `capture` liquid tag

* 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
+
+- 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 -%}`,
+        ],
       ],
     }
   },